angular inject using route's resolve data

Question

In my routeProvider, I am using a resolve option (user) to fetch user data:

// route.js
$routeProvider
    .when('/view', {
        templateUrl: 'home.html',
        controller: 'ViewController',
        resolve: {
            user: getUser // some promise that resolves a user object
        }
    });

<body ng-app="app">
    <nav ng-controller="NavController"></nav>
    <main ng-view="">
        {{user | json}}
    </main>
</body>

This works just fine when I pass user into my route Controllers.

But, the <nav> html throws an error, I assume since it's not located inside that ng-view tag

// Controller.js
angular.module('Controllers', [])
    .controller('NavController', ['$scope', 'user', function($scope, user){
        $scope.user = user; // broken!
    })
    .controller('ViewController', ['$scope', 'user', function($scope, user){
        $scope.user = user; // works!
    });

Error: [$injector:unpr] Unknown provider: userProvider <- user <- NavController

Does anyone know of a way I can get the resolved data (user) into an "outside" controller, like the navigation, for example?

AFAIK you can't inject user into NavController because you declare it inside the view. Use a service or any other method to get the current user in this controller — Alon Eitan
– Alon Eitan, Commented Mar 21, 2016 at 5:18
use a service or wrap both of your controllers in a parent controller they can both inherit from — atsituab
– atsituab, Commented Mar 21, 2016 at 5:52

Thomas Maddocks · Accepted Answer · 2016-03-21 16:03:31Z

You could do what the people commenting on your post have suggested, as follows:

$routeProvider
    .when('/view', {
        templateUrl: 'home.html',
        controller: 'ParentController',
        resolve: {
            user: function(UserService){
                return UserService.getUser();
            }
        }
    });

Your controllers would then be something like:

angular.module('Controllers', [])
     .controller('ParentController', ['$scope', 'user', function($scope, user){
        $scope.user = user;
    }])    
    .controller('NavController', ['$scope', function($scope){
        $scope.user = $scope.user; // now works!
    }])
    .controller('ViewController', ['$scope', function($scope){
        $scope.user = $scope.user; // works!
    }]);

And finally your controllers would be called like:

<div ng-controller="ParentController">
    <div ng-controller="NavController"></div>
    <div ng-controller="ViewController"></div>
</div>

However, I wouldn't advise this. Both NavController and ViewController inherit the scope of ParentController, and as such, there is nothing stopping you mutating the value of user as it is inherited down the tree. It'd be a lot better to extract this user object into a service which both NavController and ViewController can have access to.

Hopefully this helps!

Ran Sasportas · Accepted Answer · 2016-03-21 07:38:10Z

0

This is not possible, what is possible is to resolve the data into a data service which will contain the user data, and then you can access the data using the service from any controller you choose.

answered Mar 21, 2016 at 7:38

Ran Sasportas

2,2661 gold badge16 silver badges21 bronze badges

Collectives™ on Stack Overflow

angular inject using route's resolve data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related