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 — Ram Rajamony
– Ram Rajamony, Commented May 22, 2013 at 13:31
Not sure return response.data; is doing what you think it is doing. — Chris Sainty
– Chris Sainty, Commented May 22, 2013 at 13:33

Ajay Singh Beniwal · Accepted Answer · 2013-05-22 13:34:57Z

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, 2013 at 13:34

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Cannot call method 'then' of undefined. looks like repoService.getItems() is undefined for some reason

Ajay Singh Beniwal Over a year ago

im able to get the result perfectly using above methods if problem persists kindly set up a plunker of fiddle demo

Jason · Accepted Answer · 2013-05-22 20:39:54Z

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, 2013 at 20:39

answered May 22, 2013 at 13:38

Jason

15.9k3 gold badges51 silver badges73 bronze badges

4 Comments

Jon Over a year ago

I've tried adding the 'then'to my controller but myVar gets injected as undefined into my controller. Any ideas?

Jason Over a year ago

have you seen this example on SO, it looks relevant: stackoverflow.com/questions/11972026/…

Jon Over a year ago

not sure how to do that as I reference my controller via string not object

Jon Over a year ago

Thanks will give it a go. I saw a similar approach here stackoverflow.com/questions/14980805/… but I get the error myVarProvider unknown

Nirav Gandhi · Accepted Answer · 2015-12-07 07:35:51Z

0

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;
        }
    };
});

answered Dec 7, 2015 at 7:35

Nirav Gandhi

1,9951 gold badge25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using Resolve to show template when JSON returned in AngularJS

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related