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) {