angular injecting resolve into controller logging undefined

Question

I have the following resolve:

.state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts.html',
      controller: 'postsController as postsCtrl',
      resolve: {
        post: getSinglePostWrapper
      }
    })

and helper function

getSinglePostWrapper.$inject = ['postsService', '$stateParams'];
function getSinglePostWrapper(postsService, $stateParams) {
    return postsService.getSinglePost($stateParams.id);
}

and my controller looks like this:

angular.module('flapperNews')
.controller('postsController', postsController);

postsController.$inject = ['postsService', 'post'];

function postsController(postsService, post) { 
   var vm = this;
   vm.post = post;
   console.log(post); //undefined here
}

I'm getting an undefined "post" when I try to inject the post from the resolve. I tried logging the post in the getSinglePostWrapper function, and it logs the correct object. I seem to be losing some binding or something from the resolve to the controller.

posts service

angular.module('flapperNews')
.factory('postsService', postsService);

postsService.$inject = ['httpService'];

function postsService(httpService) {
  return {
        getSinglePost: getSinglePost
  }
  function getSinglePost(postId) {
        httpService.baseGet('/posts/' + postId)
        .then(function(data) {
            return data;
        }, function(data) {});
  }
}

httpservice

angular.module('httpService', [])
.factory('httpService', httpService);

httpService.$inject = ['$http', '$q'];

function httpService($http, $q) {
  return {
        baseGet: baseGet
  }
  function baseGet(url) {
        return $http.get(url).then(
                function (result) {
                    return result.data;
                },
                function (result) {
                    return $q.reject(result);
                }
        );
    }

}

and I've injected httpservice into the first place I declare the flapperNews module.

FYI- everything is working. Other http requests are fine. This one is fine too. It just doesn't inject the post into the controller.

I don't see why this wouldn't work. Can you post your service code? — Anid Monsur
– Anid Monsur, Commented Oct 7, 2015 at 4:07
Are you sure you don't have another resolve or dependency named post? — Anid Monsur
– Anid Monsur, Commented Oct 7, 2015 at 4:15
yep, that's my only resolve on that controller. and the only dependency named post — Abdul Ahmad
– Abdul Ahmad, Commented Oct 7, 2015 at 4:16
You must some kind of error somewhere else. Here's a similar plunker that does work. — Anid Monsur
– Anid Monsur, Commented Oct 7, 2015 at 4:37

Estus Flask · Accepted Answer · 2015-10-07 05:05:35Z

2

Promise chain breaks here.

  function getSinglePost(postId) {
        httpService.baseGet('/posts/' + postId)
        .then(function(data) {
            return data;
        }, function(data) {});
  }

You don't return the promise, hence post will be resolved to undefined before httpService.baseGet request has been finished.

edited Oct 7, 2015 at 5:05

answered Oct 7, 2015 at 4:49

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

1 Comment

Anid Monsur Over a year ago

Wow, very nice catch! Your second point is incorrect though. ui-router handles 'unwrapping' the promise.

Enkode · Accepted Answer · 2015-10-07 03:55:57Z

0

try this:

.state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts.html',
      controller: 'postsController as postsCtrl',
      resolve: {
        post: function('postsService', '$stateParams') {
           return postsService.getSinglePost($stateParams.id);
      }
    })

angular.module('flapperNews')
.controller('postsController', function($scope, post){
    $scope.post = post;
   console.log($scope.post); //undefined here
});

edited Oct 7, 2015 at 3:55

answered Oct 7, 2015 at 3:53

Enkode

4,8634 gold badges40 silver badges54 bronze badges

5 Comments

Abdul Ahmad Over a year ago

well I need to inject the postsService and stateParams

Abdul Ahmad Over a year ago

I'm trying to avoid that syntax. I'd like to keep my functions more modular.

Enkode Over a year ago

What are you trying to keep modular? This code is clean, lean and should work if your service is done correctly. This seems to be be the standard from what I have seen for ui-router / angular controller AND it has the added benefit of working.

Anid Monsur Over a year ago

There is no standard. But the closest thing we do have to one even advocates using named over anonymous functions. github.com/johnpapa/angular-styleguide#style-y024

Estus Flask Over a year ago

Sure, JP style has the potential in migrating the codebase to classes, but @Enkode has the point. I believe that JP had good intentions when popularizing his styleguide, but generally it is abused and the code is barely readable when compared to Angular native syntax.

Collectives™ on Stack Overflow

angular injecting resolve into controller logging undefined

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related