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

问题描述

我正在使用 angular-seed 模板来构建我的应用程序.最初，我将所有 JavaScript 代码放在一个文件中，main.js.该文件包含我的模块声明、控制器、指令、过滤器和服务.应用程序像这样工作得很好，但随着我的应用程序变得更加复杂，我担心可扩展性和可维护性.我注意到 angular-seed 模板中的每一个都有单独的文件，所以我尝试将我的代码从单个 main.js 文件分发到标题中提到的每个其他文件中这个问题在 app/js 目录中找到">angular-seed 模板.

I'm using the angular-seed template to structure my application. Initially I put all my JavaScript code into a single file, main.js. This file contained my module declaration, controllers, directives, filters, and services. The application works fine like this, but I'm worried about scalability and maintainability as my application becomes more complex. I noticed that the angular-seed template has separate files for each of these, so I've attempted to distribute my code from the single main.js file into each of the other files mentioned in the title to this question and found in the app/js directory of the angular-seed template.

我的问题是:如何管理依赖项以使应用程序正常工作?在此处 找到的现有文档在这方面不是很清楚，因为给出的每个示例都显示了一个 JavaScript源文件.

My question is: how do I manage the dependencies to get the application to work? The existing documentation found here isn't very clear in this regard since each of the examples given shows a single JavaScript source file.

我所拥有的一个例子是:

An example of what I have is:

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
}

如何管理依赖项?

提前致谢.

推荐答案

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

The problem is caused from you "redeclaring" your application module in all your separate files.

这是应用模块声明(不确定声明是否正确)的样子:

This is what the app module declaration (not sure declaration is the right term) looks like:

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

这就是您的应用程序模块的分配(不确定分配是否正确)的样子:

This is what assignment (not sure if assignment is the right term either) to your application module looks like:

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

注意缺少方括号.

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

So, the former version, one with the square brackets, should only be used once, usually in your app.js or main.js. All other associated files — controllers, directives, filters … — should use the latter version, the one without the square brackets.

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

I hope that makes sense. Cheers!

这篇关于AngularJS 种子:将 JavaScript 放入单独的文件(app.js、controllers.js、directives.js、filters.js、services.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！