我正在关注 AngularJS Tutorial: Learn to Build Modern Web Apps with Angular and Rails由 Thinkster 提出并面临一个问题。
制作内联模板后，我有一个空白页面和一个错误 $injector:modulerr，详细信息如下:
Failed to instantiate module flapperNews due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=...)
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:97
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:284
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207
这是我的代码。
模块:
# app.js
var app = angular.module('flapperNews', ['ui-router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
查看:
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Thinkster's AngularJS Tutorial</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click='incrementUpvotes(post)'></span>
- {{post.upvotes}} upvotes
<span style="font-size: 20px; margin-left: 10px;">
<a ng-href="post.link" ng-show='post.link'>{{post.title}}</a>
<span ng-hide="{{post.link}}">{{post.title}}</span>
</span>
</div>
<form ng-submit="addPost()" style="margin-top: 30px">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" placeholder="Title" class="form-control" ng-model="title">
</div>
<div class="form-group">
<input type="text" placeholder="Link" class="form-control" ng-model="link">
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
最佳答案
模块名称是 'ui.router' 而不是 'ui-router'。
只需将这一行更改为:
var app = angular.module('flapperNews', ['ui.router']);
关于javascript - 使用 ui-router : "$injector:modulerr" 时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35061589/