使用 ui 路由器时出错:“$injector:模块”

Error using ui-router: "$injector:modulerr"

本文关键字：injector 模块 使用 路由器 出错 ui      更新时间：2023-09-26

我正在遵循Thinkster的AngularJS教程：学习使用Angular和Rails构建现代Web应用程序，并面临一个问题。

制作内联模板后，我有一个空白页面和一个错误$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']);

您的app.js需要ui-router库，但该库是在应用之后加载的。您应该更正脚本文件的加载顺序：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>

应用所需的模块名称ui.router而不是ui-router 。

相关文章：