CODEWITHSUNDEEP
javascriptajaxangularjs
Elorfin
Elorfin

Reputation: 2497

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 loaded from ng-controller directive.

<div ng-controller="MainCtrl">
    <!-- All my app take place here, -->
    <!-- so all my others controllers are in MainCtrl scope -->
    <div ng-view></div>
</div>

I have one controller by editing steps (ex. general info, planner, validation, etc.). Each controller is loaded by the $routeProvider (inside MainCtrl scope).

My problem is when I load (or refresh) the page, MainCtrl make an AJAX request to retrieve data to edit. The controller attached to $routeProvider is loaded before AJAX request is finished, so I can't use data grabbed by MainCtrl.

I want to defer $routeProvider loading route while AJAX request is not ended. I think I have to use the $q provider, but I can't prevent route loading.

I have tried this (in MainCtrl) and controller is still rendered premature :

$scope.$on('$routeChangeStart', function(event, current, previous) {
    $scope.pathLoaded.promise.then(function() {
        // Data loaded => render controller
        return true;
    });

    // Stop controller rendering
    return false;
});

And AJAX call is defined like this :

$scope.pathLoaded = $q.defer();
// Edit existing path
$http.get(Routing.generate('innova_path_get_path', {id: EditorApp.pathId}))
     .success(function (data) {
         $scope.path = data;

         $scope.pathLoaded.resolve();
     })
     .error(function(data, status) {
         // TODO
     });

So the question is : is it the good way to achieve this ? And if yes, how can I defer controller rendering ?

Thanks for help.

Upvotes: 0

Views: 613

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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 usage
            return $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.

Upvotes: 1

Related Questions