Defer Controller Rendering

I have an AngularJS app which grab data from PHP via AJAX and permit user to edit it through few steps. Structure of the app is very simple : I have a main controller which is load

Solution 1:

You can use the resolve property of routes, execute the AJAX there and pass the result to your controller. In the route definition:

$routeProvider.when("path", {
    controller: ["$scope", "mydata", MyPathCtrl], // NOTE THE NAME: mydata
    templateUrl: "...",
    resolve: {
        mydata: ["$http", function($http) { // NOTE THE NAME: mydata// $http.get() returns a promise, so it is OK for this usagereturn$http.get(...your code...);
        }]
        // You can also use a service name instead of a function, see docs
    },
    ...
});

See docs for more details. The controller for the given path will not be called before all members in the resolve object are resolved.