app.js中的角度初始化錯誤

Question

所以我試圖跳過Angular的潮流，我一直負責構建一個SPA，爲此我選擇了帶有ASP.Net MVC Web API的AngularJS（我是一個.Net開發者）。作爲強類型語言的粉絲，我在整個職業生涯中儘可能避免使用JavaScript，但近年來AngularJS和其他庫的插件使得它無法忽視。所以我在這裏，要求一些指導。

我觀看了教程，完成了示例代碼項目，並在PluralSight上完成了一些學習，至少從基礎的角度來看，我已經開始工作了。我在MVVM和MVC有豐富的背景，所以SOC對我來說是一件大事。我喜歡Angular提供的MVC類型的結構，這很大程度上是爲什麼我首先走這條路線。

現在讓我來看看我的問題。爲了簡單起見，我正在初始化我的模塊（當前）在我的母版頁（_Layout.cshtml）中，這是我在調整和試驗時所做的。

<script> 
    angular.module('xcmApp', ['ngRoute', 'ngResource']) 
     .config(function ($routeProvider) { 
      $routeProvider 
      .when('/', 
      { 
       controller: 'companiesController', 
       templateUrl: 'views/companylist.html' 
      }) 
      .when('/Reports', 
      { 
       controller: 'reportsController', 
       templateUrl: 'views/reportlist.html' 
      }) 
      .otherwise({ redirectTo: '/' }) 
     }) 
     .factory('companiesFactory', ['$resource', 
      function ($resource) { 
       return $resource('/api/companies', {}, { 
        query: { method: 'GET', params: {}, isArray: true } 
       }); 
      } 
     ]) 
     .controller('companiesController', function ($scope, companiesFactory) { 
      $scope.Companies = companiesFactory.query(); 
    }); 

</script> 

但現在我已經準備好轉向更深層次的概念了，我想將我的腳本分解爲適當的文件。也就是說，app.js和相關控制器/工廠/服務等等。但是當我移動該腳本到app.js和_Layout.cshtml引用它，它的錯誤：

<script src="~/app.js"></script> 

Error: [$injector:unpr] Unknown provider: a

現在有沒有點當我甚至無法讓app.js正常工作時，繼續觸發控制器文件等等，所以在這裏我被卡住了。我知道這裏有一些非常出色的AngularJS開發者，他們甚至可能在閱讀這些東西之前知道我錯過了什麼，我很感謝您的幫助。

任何能強調我的疏忽的人都會成爲今天的超級明星。提前致謝！

編輯：

這裏是我的堆棧跟蹤：

0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module xcmApp due to: 
Error: [$injector:unpr] Unknown provider: a 
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=a 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4015:13) 
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4162:11) 
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4191:9) 
    at runInvokeQueue (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4109:11) 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4118:11) 
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:323:11) 
    at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4099:5) 
    at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4025:3) 
    at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1452:5) 
    at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1473:5) 
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=xcmApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20a%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Funpr%3Fp0%3Da%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4015%3A13)%0A%20%20%20at%20getService%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4162%3A11)%0A%20%20%20at%20invoke%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4191%3A9)%0A%20%20%20at%20runInvokeQueue%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4109%3A11)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4118%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A323%3A11)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4099%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4025%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1452%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1473%3A5) 

提醒：

我的問題不在於它不工作，它的工作。當我將Javascript從我的HTML頁面中取出並放入引用的app.js文件時，它只是停止工作。

Answer 1

回到文檔。您正在使用定義應用程序的不好方法。嘗試：

var MyApp = angular.module('MyApp', ['ngRoute' , 'ngSanitize']) ; 

，然後用MyApp添加控制器，過濾器等

編輯：

順便說一句，這是寫一個很好的做法（你是的Javascript在SPA單獨的文件我猜不是寫一個小項目）。

Answer 2

我沒有一個ASP.net的背景，但我認爲這不應該回答你的Angular問題。

首先聲明你的模塊是這樣的：

angular.module('myModule', []); 

，並讓他們的IM奧德文件是這樣的：

angular.module('myModule').controller/foactory/.... 

所以，你的代碼應該是這個樣子：

//xcmApp.module.js 
angular.module('xcmApp', ['ngRoute', 'ngResource']); 

//xcmApp.config.js 
angular.module('xcmApp').config(function ($routeProvider) { 
    $routeProvider 
     .when('/', 
      { 
       controller: 'companiesController', 
       templateUrl: 'views/companylist.html' 
      }) 
     .when('/Reports', 
      { 
       controller: 'reportsController', 
       templateUrl: 'views/reportlist.html' 
      }) 
     .otherwise({redirectTo: '/'}) 
}); 

//xcmApp.factory.js 
angular.module('xcmApp').factory('companiesFactory', ['$resource', 
    function ($resource) { 
     return $resource('/api/companies', {}, { 
      query: {method: 'GET', params: {}, isArray: true} 
     }); 
    } 
]); 

//xcmApp.controller.js 
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) { 
    $scope.Companies = companiesFactory.query(); 
}); 

編輯：

關於錯誤，請記住，您的依賴項必須按照正確的順序。 所以您的index.html（假設你使用不使用腳本加載程序還）應該是這樣的：

<script src="/*path to angular*/"></script> 
<script src="/*path to ngRoute*/"></script> 
<script src="/*path to ngResource*/"></script> 

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first 
<script src="/*path to xcmApp.config.js*/"></script> 
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case 
<script src="/*path to xcmApp.controller.js*/"></script> 

Answer 3

它看起來像你缺少你的控制器定義與依賴注入了幾件申報。

在我發佈特定的代碼和修復之前，我想提一個有用的依賴注入問題的故障排除工具。 Angular有一個內置的指令ng-strict-di。該指令是ng-app的配套產品。從ng-app documentation：

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide , and useful debugging info will assist in tracking down the root of these bugs.

現在，在您的文章中的代碼：

控制器不使用明確的功能註釋。在顯式函數註釋中，傳遞一個依賴關係的字符串數組，然後是該函數。這確保了即使縮小是爲了重命名函數參數，Angular仍然可以識別提供給函數的依賴關係。您在代碼的某些部分中使用了明確的註釋，但它在控制器定義中缺少。

即使您從未定義名爲a的供應商，這也是典型的易於識別的產品，使用Error: [$injector:unpr] Unknown provider: a。 ng-strict-di會標記此控制器代碼。

這是當前的代碼和建議的修復程序。

相反的：

.controller('companiesController', function ($scope, companiesFactory) { 

嘗試：

.controller('companiesController', ['$scope', 'companiesFactory', function ($scope, companiesFactory) {