未捕获的错误:[$ injector:modulerr]

时间:2016-11-27 01:35:45

标签: javascript angularjs angular-ui-router

我正在

未捕获错误:[$ injector:modulerr] jquery.js:3855

似乎我已经包含了几乎所有的依赖项,但我仍然收到错误 app.js

angular.module('app', ['ui.router', 'app.controllers'])
	
	.config(function($stateProvide, $urlRouterProvider){
		$stateProvider
			.state('home', {
				url : "/home",
				templateUrl : "views/home.html",
				controller : "HomeCtrl"
			})

			.state('details', {
				url : "/details",
				templateUrl : "views/details.html",
				controller : "DetailsCtrl"
			})

			.state('about', {
				url : "/about",
				templateUrl : "views/about.html",
				controller : "AboutCtrl"
			})

			.$urlRouterProvider.otherwise('/home');
})

我的控制器文件app.controllers.js

angular.module('app.controllers',[])
	
	.controller('HomeCtrl',function($scope){
		console.log("In home ctrl");
		$scope.message = 'This is Add new order screen';
	})

	.controller('DetailsCtrl',function($scope){
		console.log("In details ctrl");
	})

	.controller('AboutCtrl',function($scope){
		console.log("In about ctrl");
	})

我的索引页

<html>
    <head>
        <title>Angular Practice</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css">

        <script type="text/javascript" src="libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/ui-router/angular-ui-router.js"></script>

        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="controllers/controllers.js"></script>
    </head>
    <body ng-app="app">
    	<div class="well">
    		<div class="row">
    			<div class="col-md-4 text-center">
    				<button class="btn btn-lg btn-info" ui-sref="home">
    					Home 
    				</button>
    			</div>
    			<div class="col-md-4 text-center" ui-sref="details">
    				<button class="btn btn-lg btn-info">
    					Details
    				</button>
    			</div>
    			<div class="col-md-4 text-center">
    				<button class="btn btn-lg btn-info" ui-sref="about">
    					About
    				</button>
    			</div>
    		</div>
    	</div>
    	<div ng-view>
    		{{message}}
    	</div>
    </body>
</html>

错误堆栈

 http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=TypeError%3A…0(http%3A%2F%2F127.0.0.1%3A8887%2Flibs%2Fangular%2Fangular.min.js%3A20%3A1)
    at http://127.0.0.1:8887/libs/angular/angular.min.js:6:412
    at http://127.0.0.1:8887/libs/angular/angular.min.js:40:222
    at q (http://127.0.0.1:8887/libs/angular/angular.min.js:7:355)
    at g (http://127.0.0.1:8887/libs/angular/angular.min.js:39:319)
    at cb (http://127.0.0.1:8887/libs/angular/angular.min.js:43:336)
    at c (http://127.0.0.1:8887/libs/angular/angular.min.js:20:390)
    at Bc (http://127.0.0.1:8887/libs/angular/angular.min.js:21:179)
    at fe (http://127.0.0.1:8887/libs/angular/angular.min.js:20:1)
    at HTMLDocument.<anonymous> (http://127.0.0.1:8887/libs/angular/angular.min.js:317:386)
    at mightThrow (http://127.0.0.1:8887/libs/jquery/jquery.js:3570:29)

1 个答案:

答案 0 :(得分:1)

配置函数依赖名称中的错字。

$stateProvide

应该是

$stateProvider

另外,您应该在html上使用ui-view而不是ng-view

.$urlRouterProvider.otherwise('/home');

应该是

$urlRouterProvider.otherwise('/home'); // removed. From the start
相关问题