Application Init Handler Equivalent in Angular?

Question

I would like to "simulate" global variables in Angular. I would also like to be able to initialize those "global variables" in an App_Init()-type of handler. Such an initialization will require $http calls to populate those variables. I want all of the "global variables" to be completely loaded before Angular "calls up" controllers and views, because controllers would depend on the initialized data.

What are some best practices for that in Angular? Nested controllers? Services?

Example: An app that manages items in a restaurant's menu. Each item will be associated with a category (beverage, appetizer, dessert, etc.). I need to load all of those categories first before Angular "even touches" the controllers and views for the food items.

Answer 1

Are you using ng-view and the $routeProvider service for your app? Assuming you are or will consider, here is what you can do in order of steps:

1. Build a service that provides acces to the categories to its called. My idea is that this service would load the categories from the server when it's first called and then cache the data loaded, so the next time it's called a cache copy is served, instead, to save a request to the server. Let's call this service categories for now.
2. Use the resolve property of route object to ensure the dependency on the categories service is resolved before loading the view the user is requesting (and the corresponding controller). As a result, you can inject the categories service into the controller and be sure the service is always available because it has already been resolved.

If you have never worked with the resolve property in configuring routing before, Here is an example and the part of the official docs that talks about it. I recommend you go through them.

Also, in order to understand how resolve works, you need to be familiar with the concept of promise and deferred. If you are not, here is a good starting point on the topic. $q is AngularJS's implementation of promise/deferred.

I can't comment on if the above approach is the best practice, but I know it's a good practice to use service to provide access to some data/functions like if there were global variables.

Answer 2

You can create a service to load the configuration from server and put it in rootScope, in your controller you can call this service on your function and this function you call from ng-init in your view.

View

<mytag ng-init="myFunc()">

Controller

module.controller('MyCtrl', function($scope, myService){
    $scope.myFunc = function(){
        myService();
    }
}

your service (initialize app)

module.service('myService', function($http, $rootScope){
    //do something
    $rootScope.config = configLoaded;
}

another tip

if you are in trouble with asynchronous calls you can try to use

var deferred = $q.defer();

//when your call come back
deferred.resolve(yourData);

//and in the last line of function
deferred.promise;