Rendering template and data from a promise in AngularJS: A comprehensive guide

Question

Rendering template and data from a promise in AngularJS: A comprehensive guide

Hey there, I'm diving into the world of Angular and I've been struggling for the past couple of days trying to figure out a solution for this issue. Not entirely sure if my approach is right either.

My goal is to create a simple page with a dynamic menu. When a user clicks on a menu link, the corresponding view should load below the menu without refreshing the entire page. Sounds straightforward, right?

However, here's the catch - I need to have separate menus for admins and regular users, which are loaded through ajax. Here's a snippet of what I'm dealing with:

[
    {
        name: "Manage games",
        templateUrl: "/view/mygames.html",
        url: "/games",
    },
    {
        name: "Weekly Reports",
        templateUrl: "/view/myreports.html",
        url: "/reports"
    },
    {
        name: "Manage Users",
        templateUrl: "/view/users.html",
        url: "/users",
        adminRequired: true
    }
];

Once the menu is loaded, clicking on a menu item should trigger an ajax call to fetch data from the specified url, while the template to display this data will also be fetched via an ajax call to the templateUrl.

So, how can I achieve this? Essentially, I want to have a directive/component that starts off empty and hidden by default. When a menu item is clicked, I plan to $broadcast an event containing the dataUrl/templateUrl to the directive/component, prompting it to make two ajax calls - one for retrieving the data and another for fetching the template. Once both requests are complete, the content will render and become visible on the page.

Any suggestions or guidance on accomplishing this would be really helpful.

Just a heads up, I'm working with Angular 1.5.7

javascript angularjs ajax

Answer 1

Answer №1

To achieve this, it is recommended to utilize routing, for example with the ui-router. The ui-router includes a resolve property that allows you to resolve controller dependencies and then inject them into your controller for use.

Here is an example I created (apologies for the simplistic UI):

HTML:

<div ng-app="app">
  <div ng-controller="homeCtrl as vm">
    <menu items="vm.items"></menu>
  </div>
  <div>
    <ui-view></ui-view>
  </div>
</div>

JS:

var app = angular.module('app', ['ui.router']);

app.controller('gamesCtrl', function(data) {
  this.title = data.title;
}).
controller('reportsCtrl', function(data) {
  this.title = data.title;
}).
controller('usersCtrl', function(data, adminData) {
  this.title = data.title;
  this.removedUsers = adminData.removedUsers;
}).
controller('homeCtrl', function() {
  this.items = [{
    name: 'Manage games',
    state: 'games'
  }, {
    name: 'Weekly Reports',
    state: 'reports'
  }, {
    name: 'Manage Users',
    state: 'users',
    adminRequired: true
  }];
});

app.component('menu', {
  bindings: {
    items: "="
  },
  template: '<div ng-repeat="item in  $ctrl.items"><span ng-click="$ctrl.goToState(item)">{{item.name}}</span></div>',
  controller: function($state) {
    this.goToState = function(item) {
      console.log('redirecting to state:' + item.state);
      $state.go(item.state);
    }
  }
});

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state('games', {
    url: '/games',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'games'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'gamesCtrl as vm'
  }).
  state('reports', {
    url: '/reports',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'reports'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'reportsCtrl as vm'
  }).
  state('users', {
    url: '/users',
    template: '<div><h1>{{vm.title}}</h1><div>Removed Users:</div><div ng-repeat="user in vm.removedUsers">{{user}}</div></div>', // use templateUrl..
    // return injectables who return promises and inject them into your ctrl
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'users'
        })
      },
      adminData: function($q) {
        return $q.when({
          removedUsers: ['user1', 'user2', 'user3']
        })
      }
    },
    controller: 'usersCtrl as vm'
  }).
  state('default', {
    url: '/default',
    template: '<h1>This is the default state</h1>'
  });

  $urlRouterProvider.otherwise('/default');
});

JSFIDDLE.

Pointers:

Consider using templateUrl instead of template when setting up states.
In the example, $q.when was used to illustrate returning a promise. Typically, $http.get\post would be utilized instead.

Answer 2

To achieve this, it is recommended to utilize routing, for example with the ui-router. The ui-router includes a resolve property that allows you to resolve controller dependencies and then inject them into your controller for use.

Here is an example I created (apologies for the simplistic UI):

HTML:

<div ng-app="app">
  <div ng-controller="homeCtrl as vm">
    <menu items="vm.items"></menu>
  </div>
  <div>
    <ui-view></ui-view>
  </div>
</div>

JS:

var app = angular.module('app', ['ui.router']);

app.controller('gamesCtrl', function(data) {
  this.title = data.title;
}).
controller('reportsCtrl', function(data) {
  this.title = data.title;
}).
controller('usersCtrl', function(data, adminData) {
  this.title = data.title;
  this.removedUsers = adminData.removedUsers;
}).
controller('homeCtrl', function() {
  this.items = [{
    name: 'Manage games',
    state: 'games'
  }, {
    name: 'Weekly Reports',
    state: 'reports'
  }, {
    name: 'Manage Users',
    state: 'users',
    adminRequired: true
  }];
});

app.component('menu', {
  bindings: {
    items: "="
  },
  template: '<div ng-repeat="item in  $ctrl.items"><span ng-click="$ctrl.goToState(item)">{{item.name}}</span></div>',
  controller: function($state) {
    this.goToState = function(item) {
      console.log('redirecting to state:' + item.state);
      $state.go(item.state);
    }
  }
});

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state('games', {
    url: '/games',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'games'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'gamesCtrl as vm'
  }).
  state('reports', {
    url: '/reports',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'reports'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'reportsCtrl as vm'
  }).
  state('users', {
    url: '/users',
    template: '<div><h1>{{vm.title}}</h1><div>Removed Users:</div><div ng-repeat="user in vm.removedUsers">{{user}}</div></div>', // use templateUrl..
    // return injectables who return promises and inject them into your ctrl
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'users'
        })
      },
      adminData: function($q) {
        return $q.when({
          removedUsers: ['user1', 'user2', 'user3']
        })
      }
    },
    controller: 'usersCtrl as vm'
  }).
  state('default', {
    url: '/default',
    template: '<h1>This is the default state</h1>'
  });

  $urlRouterProvider.otherwise('/default');
});

JSFIDDLE.

Pointers:

Consider using templateUrl instead of template when setting up states.
In the example, $q.when was used to illustrate returning a promise. Typically, $http.get\post would be utilized instead.

Rendering template and data from a promise in AngularJS: A comprehensive guide

Answer №1

Similar questions

Replacing strings using Regex capture groups in JavaScript

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

I am unable to retrieve images using the querySelector method

Show the correct URL address in the browser's address bar

Include features once JSON has been loaded

Creating a static webpage hosted in an S3 bucket and implementing an AJAX request within the page to invoke a Lambda function

How to troubleshoot passing json data from a controller to an AngularJS directive

The search functionality is malfunctioning within the JavaScript table

Step-by-step guide for setting up CodeMirror

Adding new pages in express.js without increasing the complexity of the routes

Using multiple servers with Socket.io and Node.Js

Is it possible for Angular models to have relationships with one another? Can one model make references to

Refresh shopping cart information using AJAX in WooCommerce

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

Wait for a reply from one GET request before initiating the next one in node

The hyperlink appears to be malfunctioning with an additional border surrounding it within a pop-up window

When THREE.js repeatedly loads and plays the same animated GLB file in a loop, only the final model that is loaded will

Converting data into a multidimensional array in AngularJS: A comprehensive guide

Utilizing Docker to Deploy Nginx with Angular JS for Serving Static CSS, Images, and JS Files with Dynamic URL Paths