Angularjs, Resolve Data Before Showing View

This subject has been already asked but I couldn't figure out what to do in my case. Using AngularJS 1.0.5: Before showing the view 'login', I want to get some data and delay the v

Solution 1:

Answering the question, the way you are loading data explicitly before the view is rendered seems right. Remember that it may not give the best experience as there will be some time to resolve that, maybe giving an impression that your app stopped for some moments.

See an example from John Pappa's blog to load some data before the route is resolved using angular's default router:

// route-config.js
angular
    .module('app')
    .config(config);

functionconfig($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
}

// avengers.js
angular
    .module('app')
    .controller('Avengers', Avengers);

Avengers.$inject = ['moviesPrepService'];
functionAvengers(moviesPrepService) {
    var vm = this;
    vm.movies = moviesPrepService.movies;
}

You basically use the resolve parameters on the route, so that routeProvider waits for all promises to be resolved before instantiating the controller. See the docs for extra info.