Resolve multiple objects in angularjs ui-router state?

Question

Here is my code:

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id }).then(function (res) { return res.data; });
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url).then(function(res) { return res.data; });
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

If I navigate to dashboard.userRole and look in fiddler, I see the request to get the user resource, but not the roles. If I comment out the user: section, I see the request to get the roles in fiddler. Why can't I resolve both? Should I just be sending the id into the controller and get everything there?

I was trying to avoid gathering data in the controller as it should just be the stitching between the view model stuff and the ui. Maybe that doesn't matter? Thanks in advance.

Edit 1: Ok, I can change the code to this and see both requests showing in fiddler, and they both return the properly formatted json data:

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id }).$promise;
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url).then(function(res) { return res.data; }).$promise;
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

However, the roles injected into the controller are always 'undefined'. The user is populated correctly. And the response in fiddler shows the roles that come back, so I'm not sure why they are undefined. Here is the controller code.

"use strict";

angular
    .module("app")
    .controller("userRolesController", [
        "user", "roles", function (user, roles) {

            console.log("app.userRolesController.function()");

            var vm = this;
            vm.user = user;
            vm.roles = roles;
        }
    ]);

what is userResource? is that a $resource object?

charlietfl
– charlietfl

2015-07-24 14:41:55 +00:00
Commented Jul 24, 2015 at 14:41 — charlietfl
– charlietfl, Commented Jul 24, 2015 at 14:41
yes, it's a $resource object.

BBauer42
– BBauer42

2015-07-24 14:49:38 +00:00
Commented Jul 24, 2015 at 14:49 — BBauer42
– BBauer42, Commented Jul 24, 2015 at 14:49

BBauer42 · Accepted Answer · 2015-07-24 15:19:13Z

11

This angular-ui-router issue/question was helpful. Anyhow, this works!

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id });
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url);
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

And here is the controller. The .data on roles is important!

angular
    .module("app")
    .controller("userRolesController", [
        "user", "roles", function (user, roles) {

            var vm = this;
            vm.user = user;
            vm.roles = roles.data;
        }
    ]);

answered Jul 24, 2015 at 15:19

BBauer42

3,69711 gold badges48 silver badges83 bronze badges

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

2 Comments

charlietfl Over a year ago

and if you want the promise returned for $resource ...return userResource.get({ id: $stateParams.id }).$promise

sTx Over a year ago

How can I use in a state resolve a service which is loaded before to call and use it; sth like this: let's say that in user I load my service file with ocLazyLoad and in roles I want to use that loaded service? How to wait for lazyload?

James A Mohler · Accepted Answer · 2016-03-15 18:34:36Z

1

Set a breakpoint (or watch) in the Chrome browser (within your angular controller). And inspect $state. I found my answer to be:

  $state.$current.locals.globals.employeeslist

edited Mar 15, 2016 at 18:34

James A Mohler

11.1k15 gold badges51 silver badges76 bronze badges

answered Mar 15, 2016 at 18:16

DeveloperAlex

1491 silver badge4 bronze badges

Comments

jsonmurphy · Accepted Answer · 2015-07-24 15:21:24Z

-1

Thats pretty weird. Perhaps you could try:

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        // put both in one object
        data: function (userResource, $stateParams, $http) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return {
                user: userResource.get({ id: $stateParams.id }).then(function (res) { return res.data; });
                roles: $http.get(url).then(function(res) { return res.data; });
            }
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

Update:

Solution above doesn't fix the problem. OP has resolved his own issue (See the comments below).

edited Jul 24, 2015 at 15:21

answered Jul 24, 2015 at 14:39

jsonmurphy

1,6001 gold badge11 silver badges19 bronze badges

6 Comments

BBauer42 Over a year ago

when I try that only the userResource.get request shows in fiddler. :o(

jsonmurphy Over a year ago

Hmm..perhaps this is an issue with fiddler... does the controller receive the data anyway?

BBauer42 Over a year ago

See my edit, I updated the resolve on and see fiddler showing both api requests, both responding with the correct data, however the controller always shows the "roles" data as undefined for some reason.

jsonmurphy Over a year ago

Ok so you dont need that $promise or the then() on the roles request. $promise is only used with $resource types. By default, I believe $http.get(url) returns a promise

BBauer42 Over a year ago

You are correct, I just go it to work based on this.

|

Collectives™ on Stack Overflow

Resolve multiple objects in angularjs ui-router state?

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related