2016-05-30 5 views
0

ここにapp.jsコードがあります。私は2つのコントローラとngRouteを使った簡単なルーティング機構を定義しました。なぜ私はngRouteでインジェクタモジュールのエラーが発生し続けるのか理解できません。私はノードサーバーを使ってこのコードを提供しています。これまでのhome.htmlファイルとforecast.htmlファイルは完全に空であることに注意してください。ngRouteにインジェクタモジュールエラーを出す角度JSを使用するこのコードはなぜですか?

助けてください!

おかげ

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

 
myApp.controller('homeController',['$scope', 
 
    function($scope) { 
 
     
 
    }]); 
 

 

 
myApp.controller('forecastController',['$scope', 
 
    function($scope) { 
 

 

 
    }]); 
 

 

 
myApp.config(function ($routeProvider) { 
 
    $routeProvider. 
 
    when('/home', { 
 
     templateUrl:'home.html', 
 
     controller:'homeController' 
 

 
    }). 
 
    when('/forecast', { 
 
     templateUrl: 'forecast.html', 
 
     controller: 'forecastController' 
 
    }); 
 
});
EMPTY
<!DOCTYPE html> 
 
<html ng-app = "myApp"> 
 
<head> 
 
    <title>Learning Angular JS</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular.min.js"></script> 
 
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-messages.min.js"></script> 
 
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-resource.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.3.0-rc.5/angular-route.js"></script> 
 
    <script src ="app.js"></script> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="/"> Weather </a> 
 
      </div> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#home">Home</a></li> 
 
       <li><a href = "#forecast"></a> Forecast </li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <div class="container"> 
 

 
     <div ng-view></div> 
 
    </div> 
 
</body> 
 
</html>

はここでエラーのリンクです。

angular.js:4068Uncaughtエラー:[$インジェクター:modulerr]?http://errors.angularjs.org/1.3.0-rc.5/ $インジェクター/ modulerr P0 = weatherApp & P1 = ... 20(HTTPS%3A%2F%2Fcode.angularjs.org%2F1.3.0-RC。 5%2Fangular.min.js%3A18%3A3)

+0

動作しませんでした。私はそれが重要だとは思わない。 devツール(chrome)からブラウザにロードされたソースファイルを見ることができるので、ダウンロードされていないわけではありません。 –

+0

ngResourceの後ろにモジュール宣言のスペースがあります。var myApp = angular.module( "myApp "、['ngRoute'、 'ngResource']); –

答えて

1

問題はngResourceです。これは、引用符を閉じる前に依存関係配列の名前に余分なスペースがあるためです。

あなたが角度の前にjQueryを含める場合は、角度の開発版を使用する場合は、代わりに、角度誤差のサイトへのリンクのコンソールで、より詳細なエラー出力とスタックトレースを取得することに注意注意すべき

var myApp = angular.module("myApp",['ngRoute','ngResource ']); 
              //remove this ^^ 

いくつかの他のものがありますangular.element(jQlite)は完全なjQuery APIを内部的に使用しますが、後でそれを組み込む場合は使用しません。

また、ブラウザはそれを削除し、代わりにangular-ui-bootstrapを使用するのが最善ですbootstrap.jsについてはhttp

にそれらをロードするために行くときにブロックされたコンテンツの問題を回避するために、スクリプトからプロトコルを削除するお勧めします。これにより、bootstrap.jsのjQuery依存関係も削除されます

+0

パーフェクト。ありがとう! –

0

あなたのコードは正しいですが、書かれていなかったのはngResourceの後の空白スペースだけでした。あなたのapp.jsはここにあります

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

myApp.controller('homeController',['$scope', 
    function($scope) { 

    }]); 


myApp.controller('forecastController',['$scope', 
    function($scope) { 


    }]); 


myApp.config(function ($routeProvider) { 
    $routeProvider. 
    when('/home', { 
     templateUrl:'home.html', 
     controller:'homeController' 

    }). 
    when('/forecast', { 
     templateUrl: 'forecast.html', 
     controller: 'forecastController' 
    }); 
}); 
関連する問題