AngularJS种子:将JavaScript放入单独的文件中(app.js,controllers.js,directives.js,filters.js,services.js)

Question

我正在使用angular-seed模板来构建我的应用程序.最初我将所有JavaScript代码放入一个文件中main.js.该文件包含我的模块声明,控制器,指令,过滤器和服务.应用程序工作正常,但我担心可扩展性和可维护性,因为我的应用程序变得更加复杂.我注意到,角种子模板对每一种单独的文件,所以我尝试从单一的发布我的代码main.js文件到每个标题中的这个问题提到的其他文件,并在找到app/js的目录角- 种子模板.

我的问题是:如何管理依赖项以使应用程序工作？这里找到的现有文档在这方面不是很清楚,因为给出的每个示例都显示了一个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
}

如何管理依赖项？

提前致谢.

Answer 1

问题是由于您在所有单独的文件中"重新声明"应用程序模块而导致的.

这就是app模块声明(不确定声明是正确的术语)的样子:

angular.module('myApp', []).controller( //...

这就是你的应用程序模块的赋值(不确定赋值是否正确):

angular.module('myApp').controller( //...

注意缺少方括号.

所以,前一个版本,一个带方括号,只能使用一次,通常在你的app.js或main.js.所有其他相关文件 - 控制器,指令,过滤器 ...... - 应使用后一版本,即没有方括号的版本.

我希望这是有道理的.干杯!

Answer 2

如果您想将应用程序的不同部分(filters, services, controllers)放在不同的物理文件中,那么您需要做两件事:

1. 在您app.js或每个文件中声明这些名称空间(缺少更好的术语);
2. 请参阅每个文件中的这些命名空间.

所以,你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'); 当你实例化你的控制器时,这会导致它被覆盖,可能不是你想要的.