Angular.js delaying controller initialization

Question

I would like to delay the initialization of a controller until the necessary data has arrived from the server.

I found this solution for Angular 1.0.1: Delaying Angu

Answer 1

You can take a look at a near identical question here that uses resources, but it works the same way with $http. I think this should work

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets: function($http, $q) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
        }

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​

Answer 2

Since $http returns a promise, it's a performance hit to create your own deferred just to return the promise when the http data arrives. You should be able to do:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'});
    }
};

If you need to do some processing of the result, use .then, and your promise is chained in for free:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};

Answer 3

You could always just put "ng-show" on the outer-most DOM element and set it equal to the data you want to wait for.

For the example listed on the Angular JS home page you can see how easy it is: http://plnkr.co/CQu8QB94Ra687IK6KgHn All that had to be done was That way the form won't show until that value has been set.

Much more intuitive and less work this way.