錯誤使用ui路由器：「$ injector：modulerr」

我跟隨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>

來源

2016-01-28 Viktor

模塊名稱是'ui.router'不'ui-router'。

只需改變這一行：

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

來源

2016-01-28 12:38:08 Daniel

謝謝。到最後一刻，我在想'我在'.config'中輸入了一個錯字。 – Viktor

你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。

來源

2016-01-28 12:38:12 gnerkus

錯誤使用ui路由器：「$ injector：modulerr」

回答

相關問題