Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resolve multiple objects in angularjs ui-router state?

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;
        }
    ]);
like image 744
BBauer42 Avatar asked Jul 24 '15 14:07

BBauer42


2 Answers

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;
        }
    ]);
like image 88
BBauer42 Avatar answered Oct 19 '22 04:10

BBauer42


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
like image 30
DeveloperAlex Avatar answered Oct 19 '22 04:10

DeveloperAlex