Router permission will not be entered into the controller

Question

I tried everything to get ui-router permission to pass this value to this controller-AppCtrl. I am using dependency injection with $inject and this seems to be causing problems. What am I missing?

Routing

 $stateProvider.state('app.index', { url: '/me', templateUrl: '/includes/app/me.jade', controller: 'AppCtrl', controllerAs: 'vm', resolve: { auser: ['User', function(User) { return User.getUser().then(function(user) { return user; }); }], } }); 

controller

 appControllers.controller('AppCtrl', AppCtrl); AppCtrl.$inject = ['$scope', '$rootScope']; function AppCtrl($scope, $rootScope, auser) { var vm = this; console.log(auser); // undefined ... } 

Edit Here plunk http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

When you use the route resolution argument as a dependency injection in a controller bound to a route, you cannot use this controller with the ng-controller directive, because a service provider named aname does not exist. This is a dynamic dependency that is introduced by the router when it creates a connection with the controller in the corresponding partial representation.

Also, do not forget to return $timeout in your example, because it returns a promise, otherwise your argument will be resolved without a value, just as if you use $http or another service that returns a promise.

i.e

  resolve: { auser: ['$timeout', function($timeout) { return $timeout(function() { return {name:'me'} }, 1000); }], 

A resolution dependency is introduced in the controller.

 appControllers.controller('AppCtrl', AppCtrl); AppCtrl.$inject = ['$scope', '$rootScope','auser']; //Inject auser here function AppCtrl($scope, $rootScope, auser) { var vm = this; vm.user = auser; } 

in the view, instead of the ng controller, use the ui-view directive:

 <div ui-view></div> 

Demo

Answer 2

This is how I work with the solution. He must receive a promise. Therefore, I create the service accordingly.

 app.factory('User', function($http){ var user = {}; return { resolve: function() { return $http.get('api/user/1').success(function(data){ user = data; }); }, get: function() { return user; } } }); 

This is the main idea. You can also do something similar with $q

 app.factory('User', function($q, $http){ var user = {}; var defer = $q.defer(); $http.get('api/user/1').success(function(data){ user = data; defer.resolve(); }).error(function(){ defer.reject(); }); return { resolve: function() { return defer.promise; }, get: function() { return user; } } }); 

They are almost identical in action. The difference is that in the first case, the service will start receiving the date when you call the resolve() service method, and in the second example, it will start fetching when creating the factory object.

Now in your condition.

 $stateProvider.state('app.index', { url: '/me', templateUrl: '/includes/app/me.jade', controller: function ($scope, $rootScope, User) { $scope.user = User.get(); console.log($scope.user); }, controllerAs: 'vm', resolve: { auser: function(User) { return User.resolve() } } });