2016-04-29 4 views
1

人。ngRouteが読み込まれない理由が見つかりません:モジュール 'ngRoute'は利用できません

私はこのエラーがかなり古いことは知っていますが、私はすでにこの問題について多くの回答を見つけましたが、まだ解決策を見つけることができませんでした。

I`mは、次のエラーメッセージ取得:

angular.js:68不明なエラー:[$インジェクター:modulerr]起因するモジュールmyappのインスタンス化に失敗しました: エラー:[$インジェクター:modulerr]に失敗しました。次の理由でモジュールngRouteをインスタンス化します。 エラー:[$ injector:nomod]モジュール 'ngRoute'は使用できません!モジュール名のスペルが間違っているか、モジュール名を読み込めませんでした。モジュールを登録する場合は、依存関係を2番目の引数として指定するようにしてください。

Index.htmlと

<!DOCTYPE html> 

<html lang="en" ng-app="myApp" > 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
     <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 
     <title>My test Website</title> 
     <meta name="author" content="me"> 
    </head> 

    <body ng-controller="ContentController"> 
     <ul class="main-nav" id="main-nav"> 
      <li><a href="#/"><i class="fa fa-home"></i>Home</li> 
      <li><a href="#nothing"><i class="fa fa-comment"></i>Portfolio</li> 
      <li><a href="#nothing"><i class="fa fa-comment"></i>Articles</li> 
      <li><a href="#nothing"><i class="fa fa-comment"></i>Books</li> 
     <li><a href="#about"><i class="fa fa-shield"></i>About Me</li> 
     </ul> 
     <p>Nothing here {{ 1 + 2}}</p> 

     <ng-view></ng-view> 
    </body> 


</html> 

App.js

var websiteApp = angular.module('myApp', ['ngRoute']); 


    websiteApp.config( function($routeProvider) { 
    $routeProvider 
     .when('/main', { 
      templateUrl: '/views/main.html', 
      controller: 'MainController' 
     }) 
     .when('/about', { 
      templateUrl: '/views/about.html', 
      controller: 'AboutController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

    websiteApp.controller('ContentController', function ($scope) { 
     console.log("content controller loaded"); 
    }); 

    websiteApp.controller('MainController', function ($scope) { 
     console.log("main loaded"); 
    }); 

    websiteApp.controller('AboutController', function ($scope) { 
     console.log("about loaded"); 
    }); 

私は私は本当にシンプルなディテールを失われるかもしれないけど、私はダブルスタックオーバーフローに関連する問題のすべての答えをチェックしていると、私はこの問題を解決する方法を見つけることができません。

私はフィーリングの準備があなたを助けてくれないと信じています。なぜなら、問題は角度経路の参照に関連しているようです。

また、私はすでにブラウザでキャッシングを無効にしています。

お手伝いできますか?

ありがとうございました!

答えて

2

あなたは、それはあなたがまた

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 

にスクリプトタグを更新する必要がありSCRしかしSRC

0

をBRべきではありません

<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 

このラインでスペルミスを持っていますであなたの設定を宣言するためのより良い推奨方法がありますファイル。この方法は、コードがAngularのガイドラインと一貫していることを保証します。

websiteApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) { 
    $routeProvider 
     .when('/main', { 
      templateUrl: '/views/main.html', 
      controller: 'MainController' 
     }) 
     .when('/about', { 
      templateUrl: '/views/about.html', 
      controller: 'AboutController' 
     }]) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

希望します。

関連する問題