Angularjs Init Service

Question

I'm working on AngularJs project which have top navigation items load from server using a service call

App.service('Menu', function($http){
   return {
       get:function(callback){
           $http.get('api/menu.json').success(function(menuData){
               callback(menuData);
           });
       }
   }
});

I'm using the same in my BaseController as mentioned below

App.controller('BaseCtrl', function($scope, Menu){
    $scope.menuData = {};
    Menu.get(function(menuData){
        $scope.menuData = menuData;
    });
});

My Menu looks blank for a while until the service call succeed and assign the value to the $scope.menuData is there any way to fetch the same before rendering the view.

Please let me know, I might have tried all possible ways to do this, but nothing worked :(

PS: I'm using AngularJS v1.2.9

@MohammadSepahvand I have gone through the documentation of ng-cloak but didn't understand how it works and what part of my view I have to apply the same, can you please explain a bit. Thanks — Ashok Vishwakarma
– Ashok Vishwakarma, Commented Apr 21, 2014 at 15:18
ng-cloak basically doesn't display the binding expression in the view until the bindings have actually been set, I thought that was your problem initially, it's in a way a better approach than preventing the controller/view being rendered, because in a way the latter kills the point of SPAs having almost immediate route transitions and a very fluid nature. — ms87
– ms87, Commented Apr 21, 2014 at 15:26
I made a small edit to my answer, in the Menu service getMenuPromise should be pointing directly to the promise in the service, it shouldn't be a function returning a promise. — ms87
– ms87, Commented Apr 21, 2014 at 16:17

ms87 · Accepted Answer · 2014-04-21 15:59:47Z

4

Return a promise from your service, and use that in your controller's resolve:

app.service('Menu', function($http) {
    var menuData = null;

    var promise = $http.get('api/menu.json').success(function (data) {
      menuData = data;
    });

  return{
          getMenuPromise: promise,
          getMenuData:function(){
            return menuData;
          }
   };
});

and in your route definitions:

$routeProvider
    .when('/home',{controller:'BaseCtrl',
    templateUrl:'../homeTpl.html',
    resolve:{
      'menuData':function(Menu){
        return Menu.getMenuPromise;
     }
    }})

Now when BaseCtrl is instantiated the data is there:

app.controller('BaseCtrl', function($scope,Menu) {
  $scope.menuData = MyService.getMenuData();
});

edited Apr 21, 2014 at 15:59

answered Apr 21, 2014 at 15:20

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashok Vishwakarma Over a year ago

The problem is my BaseCtrl is not assigned to any specific view, its a common controller for all views. Please suggest a way to resolve data in controller not in router. Thanks

Josh · Accepted Answer · 2014-04-21 15:19:46Z

3

The best way to make sure data is available before rendering a view is to use the resolve property on your route.

If it returns a promise it will resolve that promise before actually rendering your view.

.when('/blah', {
   templateUrl: '/path/to/view.html',
   controller: 'myController',
   resolve: {
      menuItems: function($http){
         return $http.get('api/menu.json');
      }
   }
});

That value will be passed in to your controller as a dependency:

angular.controller('myController', function(menuItems){
   $scope.menuData = menuItems;
});

answered Apr 21, 2014 at 15:19

Josh

45k7 gold badges106 silver badges125 bronze badges

2 Comments

Ashok Vishwakarma Over a year ago

The problem is my BaseCtrl is not assigned to any specific view, its a common controller for all views. Please suggest a way to resolve data in controller not in router. Thanks

Josh Over a year ago

@AshokVishwakarma - You can't accomplish what you want that way. You can create a promise to resolve things inside your control and call init() or something like that, but you can't prevent the view from loading without using the route. The best you could do inside your controller is to create some sort of ready flag that gets flipped when everything is loaded and simply ng-hide or ng-show your content when it is ready.

Collectives™ on Stack Overflow

Angularjs Init Service

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related