Nícolas Amarante Nícolas Amarante - 3 months ago 11
AngularJS Question

Angularjs: How to inject dependency from resolve routeProvider

I have a problem injecting resolve parameters from the routing into the controller. I'm setting the resolve value to an object

{name: 'Banner', slug: 'banner'}
, but I get an error.

App.js

var app = angular.module('CMS', ['fields', 'ngRoute']);

app.controller('ModuleController', ['$http', 'properties',
function($http, properties) {
var module = this;
module.properties = properties;

if (module.properties.slug.length) {
$http.get(module.properties.slug + '.php').success(function(data) {
module.list = data;
});
}
}
]);

app.controller('HomeController', function() {});

app.config(function($routeProvider) {
$routeProvider
// route for the banner page
.when('/banner1', {
templateUrl: 'banner1.php',
controller: 'ModuleController',
resolve: {
properties: function() {
return { name: 'Banner', slug: 'banner' };
}
}
})
.when('/home', {
templateUrl: 'home.php',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/home'
});
});


Error:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=propertiesProvider%20%3C-%20properties%20%3C-%20ModuleController
at Error (native)
at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:6:417
at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:7
at Object.d [as get] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:81
at d (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
at Object.e [as invoke] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:283)
at $get.w.instance (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:75:451)
at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:58:476
at s (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:7:408) <div ng-view="" class="ng-scope">



Answer

ngRoute supports injection of resolved variables to the controller, which is useful for cross-cutting concerns of the app, like authentication or configuration of the app.

The downside is that the controller can only be instantiated with these parameters available to be injected, which means that either you instantiate your controller manually (with $controller), which almost never the case, or with ngRoute with resolve. What you cannot do with such a controller is instantiate it with ng-controller or in any other location where the injected parameters are not available.

This error indicates that in addition to having defined the controller on the route, you also have the controller defined as ng-controller in the template of the route. This second instantiation of the controller is what fails.

Comments