我想使用AngularUi啓動一個單頁面應用程序,但我在製作基本示例工作時遇到了麻煩。這裏是我的不同的文件:設置AngularUi應用程序
的index.html:
<!doctype html>
<html lang="en" ng-app="studentDetailApp">
<head>
<meta charset="UTF-8">
<title>Student Details App</title>
<link rel="stylesheet" href="../node_modules/angular-ui-bootstrap/ui-bootstrap-csp.css"/>
</head>
<body>
<div class="row-fluid" ng-controller="StudentController">
<div class="span2">{{studentName}} </div>
<div class="span4"><progress percent="studentMark"></progress></div>
</div>
<!--Required JS Files List :start -->
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular/angular-route.js"></script>
<script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="controllers/controllers.js"></script>
<script src="js/app.js"></script>
<!--Required JS Files List :end -->
</body>
</html>
controller.js:
'use strict';
/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', ['ngRoute', 'ui.bootstrap']);
/*StudentController: controller for students*/
studentControllerModule.controller('StudentController', function($rootScope, $scope, $location, $routeParams) {
$scope.studentName = "Sandeep Kumar Patel";
$scope.studentMark = 75;
});
app.js:
'use strict';
angular.module('studentDetailApp', ['ngRoute', 'studentDetailApp.controllers']).
config(['$routeProvider', function($routeProvider,StudentController) {
$routeProvider.when('/', { controller: 'StudentController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
我有一個進度條,所以我猜AngularUI已經正確初始化,但看起來我無法訪問控制器數據。
我有此錯誤:
Error: [$injector:modulerr] Failed to instantiate module studentDetailApp due to:
[$injector:modulerr] Failed to instantiate module studentDetailApp.controllers due to:
[$injector:nomod] Module 'studentDetailApp.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.7/ $injector/nomod?p0=studentDetailApp.controllers
minErr/<@http://localhost:8080/node_modules/angular/angular.js:68:12
module/<@http://localhost:8080/node_modules/angular/angular.js:1986:1
[email protected]http://localhost:8080/node_modules/angular/angular.js:1910:38
[email protected]http://localhost:8080/node_modules/angular/angular.js:1984:1
loadModules/<@http://localhost:8080/node_modules/angular/angular.js:4390:22
[email protected]http://localhost:8080/node_modules/angular/angular.js:336:11
[email protected]http://localhost:8080/node_modules/angular/angular.js:4374:5
loadModules/<@http://localhost:8
這是錯字?在代碼中,您有'controllers/controllers.js',但在文件描述中,您將該文件描述爲'controller.js'。 – Claies
謝謝!鷹眼 ! – Ellone