current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 7 down vote favorite
4

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;
        }
    ]);
share|improve this question
    
what is userResource? is that a $resource object? – charlietfl Jul 24 '15 at 14:41
    
yes, it's a $resource object. – BBauer42 Jul 24 '15 at 14:49
up vote 6 down vote accepted

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;
        }
    ]);
share|improve this answer
1  
and if you want the promise returned for $resource ...return userResource.get({ id: $stateParams.id }).$promise – charlietfl Jul 24 '15 at 15:41
    
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? – sTx Aug 9 '16 at 7:01
up vote 1 down vote

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
share|improve this answer
up vote -1 down vote

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

share|improve this answer
    
when I try that only the userResource.get request shows in fiddler. :o( – BBauer42 Jul 24 '15 at 14:51
    
Hmm..perhaps this is an issue with fiddler... does the controller receive the data anyway? – jsonmurphy Jul 24 '15 at 14:56
    
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. – BBauer42 Jul 24 '15 at 14:59
    
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 – jsonmurphy Jul 24 '15 at 15:03
    
You are correct, I just go it to work based on this. – BBauer42 Jul 24 '15 at 15:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.