What is the best way to resolve data before loading view and controller in Angular JS?

Question

I've a page with Navbar and Sidebar that remains common across most of the pages and hence I load all data related to LoggedInUser in NavbarController.

This data ($scope.loggedInUser) is used in other Controllers (child controller) as well. Since call to get User data is async, many times, child controller tries to access data before it is returned from the server.

What is the best way to ensure, all promises of parent controller are resolved before child controller starts it's work?

see this http://stackoverflow.com/questions/30626919/when-using-ui-router-resolve-how-do-i-access-the-resolved-data — Hadi J, Feb 20 '17 at 05:09
That means, I will end up making same request multiple times. Once for parent controller (Navbar) and then for individual child controllers. — Ashit Vora, Feb 20 '17 at 05:20
when using `resolve` the view will not render until `resolve` not completed. — Hadi J, Feb 20 '17 at 05:28

score 0 · Answer 1 · answered Feb 20 '17 at 05:09

0

You should use resolve from $stateProvider. This function ensures that all the promises are resolved before loading a new state.

answered Feb 20 '17 at 05:09

Deividas

6,437
2
26
27

What if I'm using ng-route instead of ui-router? – Ashit Vora Feb 20 '17 at 05:11
It has the same functionality: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider – Deividas Feb 20 '17 at 05:13

score 0 · Answer 2 · answered Feb 20 '17 at 05:15

A resolve is a property you can attach to a route in both ngRoute and the more robust UI router. A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

$routeProvider
.when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
}

})

in controller

app.controller("newsController", function (message) {
$scope.message = message;

});

Hope this will help you

What is the best way to resolve data before loading view and controller in Angular JS?

2 Answers2