我编写了一个包含三个文件的基本应用程序，试图使用 ui-router 第 3 方模块。如果我从我的代码中取出路由，该应用程序可以正常工作并且 Controller 会向 View 发送值。如果我引入路由器代码，ngApp 加载失败，我无法理解错误消息。
home.html 主视图
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp" data-ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.14.min.js"></script>
<script src="homeControllers.js"></script>
<script src="homeRoutes.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-default navbar-static-top" data-ng-controller="navBarController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">firstName lastName</a></li>
<li><a href="#"><img src='shutdown.png' /></a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home <span class="sr-only">(current)</span></a></li>
<li><a ui-sref="files">Files</a></li>
<li><a href="#">Exchange</a></li>
<li><a href="#">Mail <span class="badge">{{unreadMailCount}}</span></a></li>
</ul>
<ul id="taskBarUL" class="nav navbar-nav">
<li>
<ul id='taskul' class='horiz-ul-task-bar'></ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div>
<div id='main' ui-view></div>
</div>
</body>
</html>
homeControllers.js 定义
var mod = angular.module('myControllers', []);
mod.controller('navBarController', ['$scope', function($scope) {
$scope.unreadMailCount = 5;
}]);
mod.controller('homeController', ['$scope', function($scope) {
$scope.test = 5;
}]);
mod.controller('fileController', ['$scope', function($scope) {
$scope.test = 5;
}]);
mod.controller('alertController', ['$scope', function($scope) {
$scope.msg = [
{text:'{{message}}'}
];
$scope.info = function() {
};
$scope.warning = function() {
};
$scope.danger = function() {
};
}]);
homeRoutes.js
var myApp = angular.module('myApp', ['ui.router', 'myControllers']);
myApp.config('$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
templateUrl: 'pane-0.html'
})
.state('files', {
templateUrl: 'pane-1.html'
})
});
我看到的错误是...
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=ionApp&p1=Error%3A…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A34%3A399)
在尝试更正 angular page 中关于该错误的所有内容后，我只是无法弄清楚我的错误是什么。
这是页面显示的内容...
最佳答案
有a working plunker与你的场景。
Firstly, whenever you develop or test... do not use angular min.js version. This is only for production, once there are no errors
这是调整后的路由定义:
// the module def is ok
var myApp = angular
.module('myApp', ['ui.router', 'myControllers']);
// here we use array notation for minification
myApp
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
// both states are now provided with url
$stateProvider
.state('home', {
url: "",
templateUrl: 'tpl.pane-0.html'
})
.state('files', {
url: "/files",
templateUrl: 'tpl.pane-1.html'
})
}]);
所以主要的变化是
- 数组定义(当缩小到位时)
- url 定义。 它应该存在，它不是必须的，但至少在根级别应该存在。
查一下here
关于angularjs - 在本地 tomcat 上运行 AngularJS 编码的基本应用程序无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28788227/