问使用ui-路由器时出错："$injector:modulerr“
EN

Stack Overflow用户

提问于 2016-01-28 04:32:09

回答 2查看 479关注 0票数 1

我正在追随Thinkster的AngularJS教程:学习使用Rails和Rails构建现代网络应用程序，并面临一个问题。

在生成内联模板之后，我有一个空白页和一个错误$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>

javascript

angularjs

AIGC及大模型加速场景解决方案

为有AI内容生成、大模型需求的企业客户快速打造一站式方案

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-28 04:38:08

模块名是'ui.router'，而不是'ui-router'。

只需将这一行更改为：

var app = angular.module('flapperNews', ['ui.router']);

票数 3

Stack Overflow用户

发布于 2016-01-28 04:38:12

您的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>