我使用
angular-seed模板来构造我的应用程序。最初,我把所有的JavaScript代码放在一个单一的文件,main.js.此文件包含我的模块声明,控制器,指令,过滤器和服务。应用程序工作正常,像这样,但我担心可扩展性和可维护性,因为我的应用程序变得更加复杂。我注意到角种子模板有其中每个的单独的文件,所以我试图将我的代码从单个main.js文件分发到每个其他文件中提到的问题的标题,并在应用程序中找到/ js目录下的
angular-seed模板。
我的问题是:我如何管理依赖以使应用程序工作?现有的文档here在这方面不是很清楚,因为给出的每个示例显示单个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,MyService) { // same code as in app.js }
如何管理依赖关系?
提前致谢。