Angular error: Error: [$injector:unpr] Unknown provider: $stateProvider
I've read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!
The full error reads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
{{ test }}
</div>
<script src="static/bower_components/angular/angular.js"></script>
<script src="static/bower_components/angular-route/angular-route.min.js"></script>
<script src="static/components/app.js"></script>
</body>
</html>
app.js:
'use strict';
function() {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.
'use strict';
(function () {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.
Check out this answer. What is the difference between angular-route and angular-ui-router?
If this is the case. Solution 1. change the script from angular-route.js to angular-ui-router.js Solution 2. change the provider to $routeProvider
Hope it helps
If all the above answers fail, Just try this one.
I think the problem is with the included script...
Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as
<script src="angular.min.js"></script>上一篇: 通过$ state.go导航到另一个视图