Dynamic AngularJS Content Loader

Question

Dynamic AngularJS Content Loader

I am attempting to utilize angularJS in order to dynamically load content from my HTML using ajax calls. My goal is to create a single method that can handle different parameters to specify the ajax/REST uri and display the results in various components. Below is a snippet of the (non-functional) code I have been working on:

app.controller('ContentController', function($scope, $sce, $http) {
  $scope.FetchContent = function(pageId) {
    let contentUri = 'https://somewhere/restendpoint/?id=' + pageId;

    $http.get(contentUri).then(function(data) {
      return $sce.trustAsHtml(data.data.d[0].Content);
    }
  }
})

<div ng-controller="ContentController" class="row">
  <div class="col-md-4" ng-bind-html="FetchContent('home')"></div>
  <div class="col-md-4" ng-bind-html="FetchContent('welcome')"></div>
  <div class="col-md-4" ng-bind-html="FetchContent('contact')"></div>
</div>

However, this implementation is generating numerous ajax calls which is not ideal. I have tried creating a custom directive, but it updates all elements with the same data. Can anyone offer some guidance or advice on how to resolve this issue? Thank you!

javascript angularjs ajax

Answer 1

Answer №1

After encountering repeated ajax calls, I found a solution using directives instead. This involved embedding element Ids to ensure each element is locked down:

app.controller('ContentController', function($scope, $sce, $http) {
  $scope.FetchContent = function(pageName, elem) {
    var contentUri = 'https://somecontent/restendpoint/?id=' + pageName;
    $http.get(contentUri).then(function (data) {
      $('#' + elem).html(data.data.d[0].HTMLContent);
    });
  }
});


app.directive('loadcontent', function($parse) {
  return {
    restrict: 'A',
    link: function ($scope, elem, attrs) {
      elem.ready(function() {
        $scope.$apply(function() {
          var func = $parse(attrs.loadcontent);
          func($scope, elem)
        });
      });
    }
  };
});

<div ng-controller="ContentController" class="row">
  <div class="col-md-4" id="e1" loadcontent="FetchContent('home', 'e1')"></div>
  <div class="col-md-4" id="e2" loadcontent="FetchContent('home', 'e2')"></div>
  <div class="col-md-4" id="e3" loadcontent="FetchContent('home', 'e3')"></div>
</div>

This method successfully inserts unique content into individual elements, but I can't help feeling there must be a more efficient way to achieve this. Any suggestions from experienced AngularJS users?

Answer 2

After encountering repeated ajax calls, I found a solution using directives instead. This involved embedding element Ids to ensure each element is locked down:

app.controller('ContentController', function($scope, $sce, $http) {
  $scope.FetchContent = function(pageName, elem) {
    var contentUri = 'https://somecontent/restendpoint/?id=' + pageName;
    $http.get(contentUri).then(function (data) {
      $('#' + elem).html(data.data.d[0].HTMLContent);
    });
  }
});


app.directive('loadcontent', function($parse) {
  return {
    restrict: 'A',
    link: function ($scope, elem, attrs) {
      elem.ready(function() {
        $scope.$apply(function() {
          var func = $parse(attrs.loadcontent);
          func($scope, elem)
        });
      });
    }
  };
});

<div ng-controller="ContentController" class="row">
  <div class="col-md-4" id="e1" loadcontent="FetchContent('home', 'e1')"></div>
  <div class="col-md-4" id="e2" loadcontent="FetchContent('home', 'e2')"></div>
  <div class="col-md-4" id="e3" loadcontent="FetchContent('home', 'e3')"></div>
</div>

This method successfully inserts unique content into individual elements, but I can't help feeling there must be a more efficient way to achieve this. Any suggestions from experienced AngularJS users?

Dynamic AngularJS Content Loader

Answer №1

Similar questions

Three.js Collada Loader struggles to load a small scene with multiple objects

Include draggable functionality to a seating chart that is generated dynamically

Accessing files from various directories within my project

Leveraging the OR operator in a ternary conditional statement

Having trouble with submitting an Ajax form to a MySQL database

Error: The function expressJwt is not recognized as a valid middleware

Why is Joi validation triggering an error when dealing with a nested object? Could this issue be connected to the use of dot notation in the

Unable to start dat.GUI in Three.js

Hash functionality does not cooperate with the back button, requiring the use of JavaScript to trigger a function when the URL changes

Instructions for transferring an email attachment to a collaborative drive stored in a Google Sheets document

Create a Bootstrap modal that includes a checkbox option to prevent it from appearing again in

Enhance a portion of your text with some flair

What strategies can be employed to streamline the code provided?

Error: The object "request" has not been defined. This issue occurs when trying to execute an Action

What is the reason behind the momentary functionality of v-for?

cutting tags with priority levels

Encountering $stateChangeSuccess event twice

Separating express routes into individual files

What is the best method for tallying the word count in a WYSIWYG editor using JavaScript?

Problem with resizing in CSS and jQuery