目的

Angular是一种十分流程的前端MVVC的框架，但其对于工程化方面的帮助实在是太差了。对于整个Angular项目组织有各种各样的解决方案，本文编写目的在分享一种基于模块、使用Webpack及ES2015下组织编写的Angular代码组织逻辑。

先从Module说起

Angular中对于Module的定位类似于Java中Package的概念或者其他语言中“库”的概念。是一种组织有关联逻辑的控制器、服务、指令等其他Angualr组件的一种容器。

基于Webpack的entry组织

在entry.js中我们并不直接引入所有关联的controller与service而是一个一个引入module文件，以module作为引入的一个单元。
对于一些公用的service与directives则可以单独引入entry.js或者统一通过一个索引service文件引入entry.js。因为webpack似乎有50个import文件的限制。
则整个工程的组织结构如下图:

示例的entry.js

这里我们首先引入了一个全局app级的config.js文件,用于定义全局的router配置。

\\entry.js
import angular from 'angular'; 
import routing from './app.config';
import uirouter from 'angular-ui-router';
import app from './app.module';

\\config.js
routing.$inject = ['$urlRouterProvider', '$locationProvider'];

export default function routing($urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $urlRouterProvider.otherwise('/');
}

然后引入整个项目的module关联文件，我这里习惯将所有需要引入的module放在一个app.module.js进行管理，保持entry.js的那里只有引入全局moudle.js,service.js,directive.js等全局性的索性文件。

\\app.moudle.js
import angular from 'angular';
import uirouter from 'angular-ui-router';

import login from './login/login.module';//引入login模块

export default 
  angular.module('oms-web', [
                          uirouter,
                          login           // login模块             
   ])
  .name

login模块中的组织

一般我会将所有一个module关联的view文件，controller、service、directive以及最重要的router文件放在一个模块下进行管理。达到内聚的目的。
一个module文件下至少会包含以下文件:

• *.controller.js 控制器文件
• *.service.js 服务文件
• *.directive.js 指令文件
• *.html 模板视图文件
• config.routes.js 模块内的路由文件
• module_name.module.js 模块声明模块

login.module.js示例

\\login.module.js
import angular from 'angular';
import uirouter from 'angular-ui-router';

//引入模块的路由配置
import routing from './config.route';

// 引入service、controller、directive等文件
import AuthService from '../services/auth.service';
import LoginController from './login.controller';

//setter定义模块
export default angular.module('oms-web.login', [uirouter,AuthService])
  .config(routing)
  .controller('LoginController', LoginController)//setter controller
  .name;

路由文件

路有文件中则使用require来关联相应的视图文件

\\config.routes.js
routes.$inject = ['$stateProvider'];

export default function routes($stateProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      template: require('./login.html'),
      controller: 'LoginController', 
      controllerAs: 'vm'  //使用vm而不是使用$scope去操作视图
    });
}

登陆控制器

控制器的写法对于没有接触过ES2015的同学会显得比较奇怪。
ES2015中的写法主要将声明定义一个Controller分为至少3个阶段：
1.实现构造器
2.使用$inject控制注入
3.实现方法

\\第一步，实现构造器
export default class LoginController {
    constructor(authService) {
      this.authService = authService;
      \\构造参数为auth service，具体注入是什么并不在这里操作
    }
}

\\第二步，使用$inject进行构造器注入
LoginController.$inject = ['AuthService']; //请确保在module层面该服务被正确的注入

\\最后，则可欢乐的实现其他控制器的方法

  login(){       
    var $state = this.$state; //我这里没有使用ES的let
    $state.go('login')
    this.authService.login({ loginName: this.username, 
                    password: this.password 
    }).then(function(resp){
      $state.go('dashboard.home');//注意:回调中的this并不指向controller
    },function(reps){
      this.error = reps.data;
    });
  }

结束语

按照module进行组织angular工程，可以把一个整体的web项目分割成多个小的module工程，互相之间一般并不会有太多耦合，并且同一个module中的组件又相互关联可以快速的定位到相应功能代码，提供Ju内聚性。从而在工程层面达到“高内聚，低耦合”的目的。
祝各位在可以愉快的控制住一个大型的angular工程。