爲什麼這段代碼使用angular JS給ngRoute注入模塊錯誤？

這裏是app.js代碼。我定義了兩個控制器和一個使用ngRoute的簡單路由機制。我無法理解爲什麼我不斷收到ngRoute的注射器模塊錯誤。我正在使用節點服務器提供此代碼。請注意，到目前爲止，home.html和forecast.html文件完全是空的。爲什麼這段代碼使用angular JS給ngRoute注入模塊錯誤？

請幫忙！

感謝

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）

來源

2016-05-30 Irtaza Safi

沒有工作。我認爲這不重要。我可以看到從開發工具（chrome）加載到瀏覽器中的源文件，所以並不是它沒有下載.. –

在ngResource之後的模塊聲明中有一個空格var myApp = angular.module（「myApp 「，['ngRoute'，'ngResource']）; –

問題出在ngResource之上，因爲在關閉引用之前，依賴關係數組中的名稱中有額外的空間。

請注意，如果您使用的角度開發版本你在控制檯，而不是鏈接到轉角誤差現場

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

其他一些事情要注意一個更詳細的錯誤輸出和堆棧跟蹤，如果你的角度之前包括jQuery的那麼angular.element（jQlite）將在內部使用完整的jQuery API，但如果您在後麪包含它，則不會。

同時建議從腳本刪除協議，以避免被阻止的內容問題，當瀏覽器去加載它們在http

至於bootstrap.js最好是將其刪除，並使用angular-ui-bootstrap代替。這也將刪除bootstrap.js的jQuery依賴關係

來源

2016-05-30 18:10:06 charlietfl

完美。謝謝！ –

你的代碼是正確的但是唯一沒有被設想寫的是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' 
    }); 
});

來源

2016-05-30 18:12:15

爲什麼這段代碼使用angular JS給ngRoute注入模塊錯誤？

回答

相關問題