[英]set up AngularUi Application
I'm trying to start a single page application using AngularUi but I'm having trouble making a basic example work. 我正在尝试使用AngularUi启动一个单页应用程序,但是在使基本示例工作时遇到了麻烦。 Here are my different files : 这是我的不同文件:
index.html : 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 : 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 : app.js:
'use strict';
angular.module('studentDetailApp', ['ngRoute', 'studentDetailApp.controllers']).
config(['$routeProvider', function($routeProvider,StudentController) {
$routeProvider.when('/', { controller: 'StudentController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
I'm having a progress bar, so I guess AngularUI is properly initialized but it looks like I can't access the controller data. 我有一个进度条,所以我猜想AngularUI已正确初始化,但看起来我无法访问控制器数据。
I'm having this error : 我遇到这个错误:
Error: [$injector:modulerr] Failed to instantiate module studentDetailApp due to: 错误:[$ injector:modulerr]由于以下原因,无法实例化模块StudentDetailApp:
[$injector:modulerr] Failed to instantiate module studentDetailApp.controllers due to: [$ injector:modulerr]由于以下原因,无法实例化模块studentDetailApp.controllers:
[$injector:nomod] Module 'studentDetailApp.controllers' is not available! [$ injector:nomod]模块'studentDetailApp.controllers'不可用! 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 http://errors.angularjs.org/1.4.7/ $ injector / nomod?p0 = studentDetailApp.controllers
minErr/<@ http://localhost:8080/node_modules/angular/angular.js:68:12 minErr / <@ http:// localhost:8080 / node_modules / angular / angular.js:68:12
module/<@ http://localhost:8080/node_modules/angular/angular.js:1986:1 模块/ <@ http:// localhost:8080 / node_modules / angular / angular.js:1986:1
ensure@ http://localhost:8080/node_modules/angular/angular.js:1910:38 确保@ http:// localhost:8080 / node_modules / angular / angular.js:1910:38
module@ http://localhost:8080/node_modules/angular/angular.js:1984:1 模块@ http:// localhost:8080 / node_modules / angular / angular.js:1984:1
loadModules/<@ http://localhost:8080/node_modules/angular/angular.js:4390:22 loadModules / <@ http:// localhost:8080 / node_modules / angular / angular.js:4390:22
forEach@ http://localhost:8080/node_modules/angular/angular.js:336:11 forEach @ http:// localhost:8080 / node_modules / angular / angular.js:336:11
loadModules@ http://localhost:8080/node_modules/angular/angular.js:4374:5 loadModules @ http:// localhost:8080 / node_modules / angular / angular.js:4374:5
loadModules/<@ http://localhost:8 loadModules / <@ http:// localhost:8
Did you start this project from scratch? 您是否从头开始了这个项目?
I suggest using Yeoman. 我建议使用Yeoman。 It is an Angular project generator 这是一个Angular项目生成器
https://github.com/yeoman/generator-angular https://github.com/yeoman/generator-angular
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.