AngularJS + Routing + Resolve
I am getting this error:
Error: error: [$ injector: unpr] http://errors.angularjs.org/1.3.7/ $ injector / unpr? p0 = HttpResponseProvider% 20% 3C-% 20HttpResponse% 20% 3C-% 20DealerLeads
Supplier of unknown suppliers
Here's my router (ui.router):
$stateProvider
.state('main', {
url: "/main",
templateUrl: "views/main.html",
data: { pageTitle: 'Main Page' }
})
.state('leads', {
url: "/leads",
templateUrl: "views/leads.html",
data: { pageTitle: 'Dealer Leads' },
controller: 'DealerLeads',
resolve: DealerLeads.resolve
})
Here's my controller:
function DealerLeads($scope, HttpResponse) {
alert(JSON.stringify(HttpResponse));
}
Here's my solution:
DealerLeads.resolve = {
HttpResponse: function ($http) {
...
}
}
The data gets to the controller, I see this in the warning. However, after the controller is done, during rendering of the view (I think) the problem seems to happen.
The final rendered view has two controllers: one main controller in the body tag and a second controller "DealerLeads" inside that. I tried to remove the main controller and the problem is still present.
What am I doing wrong? Is there any more code needed to understand / fix the problem?
source to share
When you use the route resolution argument as dependency injection in a controller bound to a route, you cannot use that controller with a directive ng-controller
because the named service provider HttpResponse
does not exist. This is a dynamic dependency that is injected by a router when it creates a link to a controller in the appropriate partial view.
Just remove ng-controller="DealerLeads"
from the view and make sure the view is part of the html rendered by the leads
@ state templateUrl: "views/leads.html",
. The router will bind it to a template to resolve dynamic dependency HttpResponse
. If you want to use controllerAs, you can specify this in the router itself as: -
controller: 'DealerLeads',
controllerAs: 'leads' //Not sure if this is supported by ui router yet
or
controller: 'DealerLeads as leads',
Also when you do:
.state('leads', {
url: "/leads",
templateUrl: "views/leads.html",
data: { pageTitle: 'Dealer Leads' },
controller: 'DealerLeads',
resolve: DealerLeads.resolve
})
make sure it DealerLeads
is accessible where the route is indicated. It would be better to translate the route definition into the controller's own file so that they are all in one place. And when possible, especially in partial route representation, it is better to get rid of the ng-controller
starting directive and instead use the route to instantiate and bind the controller for that pattern. This allows for more reuse in terms of the view as a whole, without being tightly tied to the controller name and instead just its contract. So I wouldn't worry about removing the directive ng-controller
where the router can instantiate the controller.
source to share
I don't quite understand your question and also not an expert like @PSL in angular.
If you just want to pass some data to the controller, maybe below code will help you.
I copied a piece of code from the project:
.state('masthead.loadTests.test',{
url: '/loadTests/:id',
templateUrl: 'load-tests/templates/load-test-entity.tpl.html',
controller: 'loadTestEntityCtrl',
data: { pageTitle: 'loadTests',
csh: '1005'
},
resolve: {
// Get test entity data before enter to the page (need to know running state)
LoadTestEntityData: [
'$stateParams',
'$state',
'LoadTestEntity',
'LoggerService',
'$rootScope',
function ($stateParams, $state, LoadTestEntity, LoggerService, $rootScope) {
// Get general data
return LoadTestEntity.get({id: $stateParams.id},function () {
},
// Fail
function () {
// When error navigate to homepage
LoggerService.error('error during test initiation');
$state.go('masthead.loadTests.list', {TENANTID: $rootScope.session.tenantId});
}).$promise;
}
]
}
})
Here LoadTestEntityData is the data we entered into the controller, LoadTestEntity and LoggerService are the services we need to create the data.
.factory('LoadTestEntity', ['$resource', function ($resource) {
return $resource(
'/api/xxx/:id',
{id: '@id'},
{
create: {method: 'POST'},
update: {method: 'PUT'}
}
);
}])
Hope it helps!
source to share