Resolving data in Angular Controller

Question

I'm pretty new to Angular and I've been going round in circles on this one for a while now.

A bit of background first, I'm using the MEAN stack from mean.io which uses Angular UI Router.

I have a Post model in my DB which can have a category id assigned to it.

When I create a new post I want to load the existing categories from the DB and display them in a select box.

From what I can see I need to use resolve, first of all it doesn't feel right having logic in the resolve property which is in a file called config.js - so far I've placed the call to a service in there and im getting the categories back using the following code:

.state('create post', {
    url: '/posts/create',
    templateUrl: 'views/posts/create.html',
    controller: 'PostsController',
    resolve: {
      loadCategories: function (Categories) {
        Categories.query(function(categories) {
            return categories;
        });
      }
    }
})

The first problem is that I can't access the returned data in my controller or view.

Secondly I only want to load Categories that belong to a certain Organisation. I will be assigning an organisation id to each user so how can I access the currently signed in user when I'm in config.js - again this doesn't feel like the right place to be doing this sort of logic though.

Any help would be really appreciated.

Thanks

@wayne yes there is a $promise property on the response of Categories.query — Giles Butler
– Giles Butler, Commented Mar 30, 2014 at 7:52

a8m · Accepted Answer · 2014-03-30 08:17:55Z

1

config.js:

register post state :

.state('post', {
        url: '/posts/create',
        templateUrl: 'views/posts/create.html',
        controller: 'PostsController',
        resolve: PostsController.resolve
      })

register posts controller:

.controller({
     PostsController: ['$scope', 'loadCategories', PostsController],
     ...
    })

controller function:

function PostsController($scope, loadCategories){
    $scope.categories = loadCategories;
};

PostsController.resolve = {
    loadCategories: ['dependencies', function(dependencies){
       return dependencies.query(...)
    }]
};

Angular manage your dependency injection

answered Mar 30, 2014 at 8:17

a8m

9,4844 gold badges39 silver badges41 bronze badges

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

Comments

dave · Accepted Answer · 2014-03-30 08:18:58Z

0

Assuming Categories is an angular resource, you should be able to just

loadCategories: function (Categories) {
    return Categories.query();
}

And then in your controller:

.controller('PostsController', function ($scope, loadCategories) {
     $scope.categories = loadCategories;
});

Ok, reading your comments, it sounds like you'll have some issue because you want to inject this into the controller, but only in certain states. You could try:

.state('create post', {
  url: '/posts/create',
  templateUrl: 'views/posts/create.html',
  controller: 'PostsController',
  data: {
    categories: Categories.query()
  }
})

and then

.controller('PostsController', function ($scope, $state){
  console.log($state.current.data.categories);
});

Which should work...

edited Mar 30, 2014 at 8:18

answered Mar 30, 2014 at 7:36

dave

65.1k6 gold badges81 silver badges98 bronze badges

3 Comments

Giles Butler Over a year ago

Thanks for the response Dave, pretty new to Angular, I presume I put this in the resolve property? Then how do I access this from my controller?

Giles Butler Over a year ago

I added that but I now get an error on other actions such as trying to read a post -

Error: [$injector:unpr] http://errors.angularjs.org/1.2.14/$injector/unpr?p0=loadCategoriesProvider%20%3C-%20loadCategories

Giles Butler Over a year ago

Thanks Dave, yes that's correct, I also need to be able to pass a id into the Categories.query() so it returns only the correct objects. The answer above @tasseKATT seems to be the way to go to split out the logic from the routes, I'm just trying to implement it now.

Collectives™ on Stack Overflow

Resolving data in Angular Controller

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related