目的
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工程。
