设置 AngularUi 应用程序答案

【问题标题】：set up AngularUi Application设置 AngularUi 应用程序
【发布时间】：2023-03-21 08:43:01
【问题描述】：

我正在尝试使用 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 已正确初始化，但看起来我无法访问控制器数据。

我遇到了这个错误：

错误：[$injector:modulerr] 无法实例化模块 studentDetailApp 由于：

[$injector:modulerr] 无法实例化模块 studentDetailApp.controllers 由于：

[$injector:nomod] 模块 '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

模块/http://localhost:8080/node_modules/angular/angular.js:1986:1

确保@http://localhost:8080/node_modules/angular/angular.js:1910:38

模块@http://localhost:8080/node_modules/angular/angular.js:1984:1

加载模块/http://localhost:8080/node_modules/angular/angular.js:4390:22

forEach@http://localhost:8080/node_modules/angular/angular.js:336:11

loadModules@http://localhost:8080/node_modules/angular/angular.js:4374:5

加载模块/http://localhost:8

【问题讨论】：

这是错字吗？在代码中，您有controllers/controllers.js，但在文件描述中，您将文件描述为controller.js。
谢谢！鹰眼！

标签： javascript angularjs angular-ui-router angular-ui angular-ui-bootstrap

【解决方案1】：

您是从头开始这个项目的吗？

我建议使用 Yeoman。它是一个 Angular 项目生成器

https://github.com/yeoman/generator-angular

【讨论】：