Resolve multiple objects in angularjs ui-router state? - angularjs

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;
}
]);

Answer 1

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;
}
]);

Answer 2

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

Answer 3

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).