Using AngularJS Resolve in order to fetch API data before DOM is rendered

Question

I am continuing to have issues where my templates and directives are throwing errors because they are trying to be $compiled before the data is actually set. This is because it takes time for the API response to get back.

Therefore, I am trying to convert my API call to work in the resolve property of my route, however I cannot figure out how to do it correctly. Here is what I have:

My State Provider w/ resolve property

 $stateProvider
            .state('dashboard', {
                url: '/',
                controller: 'LandingController',
                resolve: {
                    data: ['API', function(API){
                        return API.Backups.getAll(function (data) {


                            return data.result;


                        });
                    }]
                }
            })

My controller

app.controller('LandingController', ['$scope', 'API', function ($scope, API, data) {

        $scope.data = data;
......

I am using an Angular service that provides a $resource in order to get the API data, however something is not working still because my data parameter in the controller is still undefined.

are you getting any console errors?

V31
– V31

2014-07-25 17:03:54 +00:00
Commented Jul 25, 2014 at 17:03 — V31
– V31, Commented Jul 25, 2014 at 17:03

Matt Hintzke · Accepted Answer · 2014-07-25 17:05:22Z

1

I figured out what I needed. I just needed to return the $resource.$promise instead of just the $resource. After doing that, everything worked great!

Solution

$stateProvider
            .state('dashboard', {
                url: '/',
                controller: 'LandingController',
                resolve: {
                    res: ['API', function(API){
                        return API.Backups.getAll(function (data) {
                            return data.result;
                        }).$promise;
                    }]
                }
            })

answered Jul 25, 2014 at 17:05

Matt Hintzke

8,03216 gold badges63 silver badges119 bronze badges

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

3 Comments

craigb Over a year ago

Yes. Its not clear from your example what the API call is returning i.e. it could take just a callback and return nothing which doesn't help do any resolves.

Matt Hintzke Over a year ago

API is a service, Backups is a resource, and getALL is an action on that resource

craigb Over a year ago

Yes, I missed that you mentioned $resource, but as you figured out getAll() does not return a promise.

craigb · Accepted Answer · 2014-07-25 17:14:25Z

0

Without the code for API.Backups.getAll() I can't tell, but the resolve function needs to return a "promise" which can be provided by the Angular $q:

resolve: ['$q', 'API', function($q, API) {

    // 1. $q provides the deferred which satisfies the "promise" API
    var deferred = $q.defer();

    // 2. call your API
    API.Backups.getAll(function (data) {
        // 4. resolve the promise with data that was returned
        deferred.resolve(data.result);
    });

    // 3. return the promise
    return deferred.promise;
}]

The numbered comments show the order things will occur. Angular will not instantiate your controller until resolve() is called on the promise (deferred).

see: https://docs.angularjs.org/api/ng/service/$q

answered Jul 25, 2014 at 17:14

craigb

16.9k7 gold badges54 silver badges63 bronze badges

2 Comments

Matt Hintzke Over a year ago

Thanks a lot.. please see stackoverflow.com/questions/24961640/… which explains the downfall to this solution. At least, I think even your solution would cause this

craigb Over a year ago

Yes, this solution is basically the same as yours below but it answers the question asked.

Collectives™ on Stack Overflow

Using AngularJS Resolve in order to fetch API data before DOM is rendered

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related