conor conor - 25 days ago 6
AngularJS Question

UI-Router and resolve, unknown provider in controller

I am using resolve in my UI-Router .state() call. In my controller I can access the values no problem, but it is throwing an error as follows:


The following code throws the error but allows me to access the variable
just fine:

.state('new_user', {
url: "/user/new",
templateUrl: "views/user/new.html",
data: {pageTitle: 'New User'},
controller: "UserController",
resolve: {

ctrlOptions: ['$stateParams', function($stateParams) {

return {

view: 'new_user',
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [


MetronicApp.controller('UserController', ['$rootScope', '$scope', '$http', '$stateParams', 'ctrlOptions', function($rootScope, $scope, $http, $stateParams, ctrlOptions, $timeout) {}

Any idea how to fix this?


Answer Source

Remove ng-controller="UserController" from your view, let the router instantiate the controller.

When you use route resolve argument as dependency injection in the controller bound to the route, you cannot use that controller with ng-controller/or any other directive because the service provider with the name ctrlOptions does not exist. It is a dynamic dependency that is injected by the router when it instantiates the controller to be bound in its respective partial view. It is also a better practice not to instantiate a controller with ng-controller and starting a template with ng-controller directive when router can instantiate and bind the controller to that template, template will be more reusable as it is not tightly coupled with the controller name (with ng-controller="ctrlName" ) but only with the contract.