Angularjs force resolve data before initializing controller functions

Question

I have the following code in my application (stripped out otiose code so there might be typos)

Basically I need to be sure that $scope.takeovers has data before any other code is executed.

When monitoring network activity in the browser I can see that /api/pagedata is being called and successfully outputs the data I want in a $scope

However $scope.takeovers is undefined always.

Currently I have this which is not working.

app.js

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('index', {
        url : '/',
        resolve: {
            takeovers: function(pageSetup) {
                return pageSetup.getData().$promise;
            }
        },
        controller: 'newFormController',
        templateUrl: '/templates/form.html'
    })
});

app.controller('newFormController', ['$scope', 'takeovers', function($scope, takeovers) {

    $scope.takeovers = takeovers.data; //Is empty when controller is initiated...

    /* continue with code that rely on $scope.takeovers */


}]);

app.factory('pageSetup', ['$http', function($http) {
  var res = {
    getData: function() {
      var promise = $http({ 
        method: 'GET', 
        url: '/api/pagedata' 
      });
      promise.success(function(data, status, headers, conf) {
        return data;
      });
      return promise;
    }
  }
  return res;
}]);

/api/pagedata result

["2015-11-01","2015-11-02","2015-11-03","2015-11-08","2015-11-09","2015-11-10","2015-11-11","2015-11-15","2015-11-16","2015-11-29","2015-11-30"]

What am I missing?

The resolve is making sure all data is resolved before instantiating the controller. Looking at your code my guess would be there is no field data in takeover as takeover itself is your data. $scope.takeovers = takeovers; should suffice. — skubski
– skubski, Commented Dec 8, 2015 at 15:47

Erik Honn · Accepted Answer · 2015-12-08 15:49:57Z

4

I think the final part of return pageSetup.getData().$promise; is your problem. getData already returns a promise so all you need to do is to return it directly.

return pageSetup.getData();

You can also actually resolve the promise directly in your resolve function and return the result of it. I don't think that actually changes anything in the simple case, but it lets you manipulate the result or grab a specific part of it before sending it to the controllers. So something along the lines of:

resolve: {
    takeovers: function(pageSetup) {
        pageSetup.getData().then(function(response) {
            return response.data;
        });
    }
}

answered Dec 8, 2015 at 15:49

Erik Honn

7,5665 gold badges36 silver badges42 bronze badges

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

3 Comments

David Over a year ago

Thank's for your input. I have tried that already but it doesn't work. When I console.log takeovers it outputs some kind of objec with alot of strange properties. Before expanding it it says Object {defaults: Object, version: "10.0.2"}

Erik Honn Over a year ago

Even with the second version? I think a resolve is supposed to resolve promises on its own, but if you do it explicitly then I don't see how it could fail.

Erik Honn Over a year ago

Unless your promise.success confuses it, that part of your code doesn't really do anything.

Collectives™ on Stack Overflow

Angularjs force resolve data before initializing controller functions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related