Angular 模块化文件结构答案

【问题标题】：Angular Modular File StructureAngular 模块化文件结构
【发布时间】：2014-02-12 02:25:27
【问题描述】：

这篇文章基于this。

我的意图是在文件的基础上分离组件。例如，我希望一个特定的控制器拥有它自己的文件（服务、过滤器和指令也是如此）。当然，文件将根据它们所属的模块组合在一起。以下是我目前拥有的概述：

User/
    User/UserModule.js
    User/UserDirective.js
    User/UserService.js
    User/UserFilter.js
    User/UserController.js

UserModules.js

UserModule = angular.module('UserModule', []);

UserModule.controller('userCtrl', ['$scope', 'UserService', UserCtrl])

    .factory('userService', function() {
        return new UserService();
    })  

    .filter('userFilter', UserFilter)

    .directive('userDirective', UserDirective);

用户控制器.js

UserCtrl = function($scope, UserService) {
    // ...
};

UserDirective.js

UserDirective = function() {
    return {
        // ...
    }
};

用户服务.js

UserService = function() {
    // ...
};

用户过滤器.js

UserFilter = function() {
    return function() {
        // ...
    }
};

那我就把用户模块推送到应用模块。

app.requires.push('UserModule');

我关心的是将概念（如控制器、服务...）注册到模块中。我想知道这是否是最好的方法以及它是否正确。 parameters 和外部 js 文件也可能存在问题。

考虑这部分：

.controller('userCtrl', ['$scope', 'UserService', UserCtrl])

上面的UserCtrl 指的是在单独文件中定义的函数。我能否将$scope 和UserService 依赖项作为参数传递给UserCtrl？

UserCtrl = function($scope, UserService) { // Pass parameters (UserController.js)

就服务、过滤器和指令而言，正确的做法是什么？

最后，我该如何改进代码？

顺便说一句，我也在使用 Meteor。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您不需要声明全局变量UserModule, UserDirective, UserService。您只需要如下声明/注册它们。 Angular 将负责注入依赖项。

UserModule.js

angular.module('UserModule', []);

UserDirective.js

angular.module('UserModule').directive('userDirective', function() {
   return {
      // ...
   }
});

用户服务.js

angular.module('UserModule').service('UserService', function() {

});

用户控制器.js

angular.module('UserModule').controller('UserController', ['$scope', 'UserService', function($scope, UserService){
}])

【讨论】：

太棒了！用这种方式，js文件的加载顺序有影响吗？
你需要先加载 UserModule.js。控制器、指令和服务可以按任何顺序加载。