AngularJS种子：将JavaScript放入单独的文件中（app.js，controllers.js，directives.js，filters.js，services.js）

17 浏览
0 Comments

AngularJS种子：将JavaScript放入单独的文件中（app.js，controllers.js，directives.js，filters.js，services.js）

我正在使用angular-seed模板来构建我的应用程序。最初，我将所有的JavaScript代码放在一个文件中，main.js中。这个文件包含了我的模块声明、控制器、指令、过滤器和服务。这样应用程序可以正常工作，但是随着应用程序变得越来越复杂，我担心可扩展性和可维护性。我注意到angular-seed模板为每个功能都有单独的文件，所以我尝试将代码从单个main.js文件分发到问题标题中提到的其他文件中，并在angular-seed模板的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; // 在services.js中找到
        // 其他函数...
    }
]);

filters.js

angular.module('myApp.filters', []).
    filter('myFilter', [function (MyService) {
        return function(value) {
            if (MyService.data) { // 测试以确保服务已加载
                for (var i = 0; i < MyService.data.length; i++) {
                    // 从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

/* 这是我想要分离到其他文件中的单个文件 */
var myApp = angular.module('myApp'), []);
myApp.factory('MyService', function($http) {
    // 与services.js中的代码相同
}
myApp.filter('myFilter', function(MyService) {
    // 与filters.js中的代码相同
}
function AppCtrl ($scope, $http, $filter, MyService) {
    // 与app.js中的代码相同
}

我如何管理这些依赖关系？

0