Using Resolve to show template when JSON returned in AngularJS

Question

I have a URL which gets hit and the model of the controller is data from an API call. At the moment by the time the template is rendered the data hasnt come back so I get a blank page.

I looked into and apprently Resolve is the approach to take but I've not had much luck. Below is what I have but I'm very new at Angular so it maybe completely the wrong approach.

//app.js    
(function () {
    'use strict';

    var app = angular.module('barbato', []).
           config(function ($routeProvider) {
               $routeProvider.
                   when('/', {
                       controller: 'ReposController',
                       templateUrl: '/Content/templates/repos.html',
                       resolve: {
                           myVar: function(repoService) {
                               return repoService.getItems();
                           }
                       }
                   }).
                   otherwise({ redirectTo: '/' });
           });

    app.factory('repoService', function ($http) {

        return {
            getItems: function () {
                $http.get('http://localhost:12008/getrepodata/jchannon').then(function (response) {
                    return response.data;
                });
            },
        };
    });

})();




//repo.js    
(function () {
    'use strict';

    var app = angular.module('barbato');

    var repooController = app.controller(
        'ReposController', ['$scope','myVar', function ($scope, myVar) {
            $scope.items = myVar;
        }
    ]);

})();

indeed resolve is the way to go. Take a look at [this question](http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker) — Ram Rajamony, May 22 '13 at 13:31
Not sure `return response.data;` is doing what you think it is doing. — Chris Sainty, May 22 '13 at 13:33

score 2 · Answer 1 · answered May 22 '13 at 13:34

2

You should do a little modification in your code

resolve: {
            myVar: function (repoService) {
                return repoService.getItems().then(function (response) {
                    return response.data;
                });
            }
        }


app.factory('repoService', function ($http) {
    return {
        getItems: function () {
            return $http.get('http://localhost:12008/getrepodata/jchannon');
        }
    };
});

answered May 22 '13 at 13:34

Ajay Beniwal

18,857
9
81
99

Cannot call method 'then' of undefined. looks like repoService.getItems() is undefined for some reason – Jon May 22 '13 at 13:49
im able to get the result perfectly using above methods if problem persists kindly set up a plunker of fiddle demo – Ajay Beniwal May 22 '13 at 14:10

Jason · Accepted Answer · 2013-05-22T20:39:54.107

1

I spent entirely too much time today trying to figure out how to get this to work. I found this thread in the angularjs group and reworked the example provided by Pawel Kozlowski.

Basically, the trick is to use an anonymous factory method in the resolve function. Otherwise, I guess you could just inject the function into the controller

Here's the plnkr

edited May 22 '13 at 20:39

answered May 22 '13 at 13:38

Jason

15,915
3
48
72

I've tried adding the 'then'to my controller but myVar gets injected as undefined into my controller. Any ideas? – Jon May 22 '13 at 14:43
have you seen this example on SO, it looks relevant: http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker – Jason May 22 '13 at 14:46
not sure how to do that as I reference my controller via string not object – Jon May 22 '13 at 14:47
Thanks will give it a go. I saw a similar approach here http://stackoverflow.com/questions/14980805/angularjs-resolve-with-controller-as-string but I get the error myVarProvider unknown – Jon May 22 '13 at 21:30

score 0 · Answer 3 · answered Dec 07 '15 at 07:35

When working with resolves, you need to return the promise object. The view waits for the promise to resolve. Change your getItems function as follows.

app.factory('repoService', function ($http) {
    return {
        getItems: function () {
            var p = $http.get('http://localhost:12008/getrepodata/jchannon');
            p.then(function (response) {
                return response.data;
            });
            return p;
        }
    };
});

Using Resolve to show template when JSON returned in AngularJS

3 Answers3