角模块文件结构 [英] Angular Modular File Structure

问题描述

这个职位是根据这个。

我的目的是基于文件分离组件。例如，我要一个特定的控制器有它自己的文件（同去的服务，过滤器和指令）。当然，文件将被组合在一起基于他们会落入模块上。下面是我目前有一个概述：

My intention is to separate components on a file basis. For example, I want a specific controller to have it's own file (Same goes with services, filters and directives). Of course, files will be group together based on the module they will fall into. Here's an overview of what I currently have:

目录

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

UserModules.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);

UserController.js

UserController.js

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

UserDirective.js

UserDirective.js

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

UserService.js

UserService.js

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

UserFilter.js

UserFilter.js

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

然后我就推用户模块到应用程序模块。

Then I'll just push the user module to the app module.

app.requires.push('UserModule');

我关注的位于概念（如控制器，服务......）到模块的注册。我想知道，这是最好的方式，如果它是正确的。另外关于参数和外部js文件可能存在的问题。

My concern lies on the registration of the concepts (Such as controllers, services...) to the module. I was wondering if this is the best way to go and if it's correct. Also possible issues on the parameters and the external js file.

考虑这一部分：

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

的 UserCtrl 以上是指在一个单独的文件中定义的函数。我将能够通过 $范围和 UserService 依赖作为参数传递给 UserCtrl ？

The UserCtrl above refers to a function defined in a separate file. Will I be able to pass the $scope and UserService dependency as parameters to the UserCtrl?

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

什么是在服务，过滤器和指令方面这样做的正确方法是什么？

What's the correct way of doing this in terms of Services, Filters and Directives?

最后，我怎么能提高code？

Finally, how can I improve the code?

我还使用流星顺便说一句。

I'm also using Meteor btw.

推荐答案

您不必声明全局变量 UserModule，UserDirective，UserService 。你只需要声明/如下注册。角将注入依赖的照顾。

You do not need to declare global variables UserModule, UserDirective, UserService. You just need to declare/register them as below. Angular will take care of injecting dependencies.

UserModule.js

UserModule.js

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

UserDirective.js

UserDirective.js

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

UserService.js

UserService.js

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

});

UserController.js

UserController.js

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

这篇关于角模块文件结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！