AngularJS种子：将JavaScript放入单独的文件（app.js，controllers.js，directives.js，filters.js，services.js）
我正在使用angular种子模板来构build我的应用程序。 最初，我把所有的JavaScript代码放在一个文件main.js 。 这个文件包含了我的模块声明，控制器，指令，filter和服务。 这样的应用程序工作正常，但我担心可扩展性和可维护性，因为我的应用程序变得越来越复杂。 我注意到angular-seed模板对每个模板都有单独的文件，所以我试图将我的代码从单个main.js文件分发到这个问题的标题中提到的每个其他文件中，并在app/jsfindapp/js目录的angular种子模板。
我的问题是：如何pipe理依赖关系以使应用程序正常工作？ 这里find的现有文档在这方面不是很清楚，因为每个给出的例子都显示了一个JavaScript源文件。
我所拥有的一个例子是：
app.js
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.controllers']);
controllers.js
angular.module('myApp.controllers', []). controller('AppCtrl', [function ($scope, $http, $filter, MyService) { $scope.myService = MyService; // found in services.js // other functions... } ]);
filters.js
angular.module('myApp.filters', []). filter('myFilter', [function (MyService) { return function(value) { if (MyService.data) { // test to ensure service is loaded for (var i = 0; i < MyService.data.length; i++) { // code to return appropriate value from MyService } } } }] );
services.js
angular.module('myApp.services', []). factory('MyService', function($http) { var MyService = {}; $http.get('resources/data.json').success(function(response) { MyService.data = response; }); return MyService; } );
main.js
/* This is the single file I want to separate into the others */ var myApp = angular.module('myApp'), []); myApp.factory('MyService', function($http) { // same code as in services.js } myApp.filter('myFilter', function(MyService) { // same code as in filters.js } function AppCtrl ($scope, $http, $filter, MyService) { // same code as in app.js }
我如何pipe理依赖关系？
提前致谢。
这个问题是由于您在所有单独的文件中“重新声明”您的应用程序模块造成的。
这是什么应用程序模块声明（不确定声明是正确的词）看起来像：
angular.module('myApp', []).controller( //...
这是什么赋值（不知道赋值是否是正确的术语）到你的应用程序模块看起来像：
angular.module('myApp').controller( //...
注意缺less方括号。
所以，前一个版本，一个带方括号的版本，只能使用一次，通常在你的app.js或main.js 。 所有其他相关文件 – 控制器，指令，filter …应该使用后一个版本， 没有方括号的版本。
我希望这是有道理的。 干杯!
如果您希望将应用程序的不同部分（ filters, services, controllers ）置于不同的物理文件中，则需要执行以下两项操作：
- 在
app.js或每个文件中声明这些命名空间（因为没有更好的术语） - 请参阅每个文件中的那些命名空间。
所以，你的app.js看起来像这样：
angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers']) .run(function() { //... }) .config(function() { //... });
并在每个单独的文件中：
services.js
angular.module('myApp.services', []); //instantiates angular.module('myApp.services') //gets .factory('MyService', function() { return {}; });
controllers.js
angular.module('myApp.controllers', []); //instantiates angular.module('myApp.controllers') //gets .controller('MyCtrl', function($scope) { //snip... }) .controller('AccountCtrl', function($scope) { //snip... });
所有这些都可以合并为一个调用：
controllers.js
angular.module('myApp.controllers', []) .controller('MyCtrl', function($scope) { //snip... });
重要的是你不应该重新定义angular.module('myApp') ; 这会导致它在实例化控制器时被覆盖，可能不是你想要的。
你得到错误，因为你还没有定义myApp.services 。 我到目前为止所做的是将所有的初始定义放在一个文件中，然后在另一个文件中使用它们。 就像你的例子，我会放在：
app.js
angular.module('myApp.services', []); angular.module('myApp', ['myApp.services', ...]);
这应该摆脱错误，但我认为你应该读一篇评论中提到的文章Eduard Gamonal 。
