在angularJS1.x中使用@NgModule装饰器

ng1-module-decorator

我们都知道Angular2结合TypeScript使用@NgModule装饰器装饰模块是非常方便的，而在angular1.x中我们只能使用angular.module().xxxx来进行模块的组合，如果一个模块的功能非常多，这样写会是非常令人苦恼且不易维护的。

幸而在ES6诞生之后，语言本身提供了装饰器的功能，虽然没有typescript那么强大，却也能满足我们的需求了。于是写了一个类似ng2的@NgModule装饰器的函数库，让我们在angular1.x中也能像angular2中一样使用@NgModule功能。本人在实际项目中亲测，可以大大缩短开发周期，也方便日后的维护。

本项目github地址：ng1-module-decorator

使用样例

可以看到在这里我们使用了几乎ng1所有的东西，但是代码却非常简单，话不多说，下面我们来看一下实际的使用效果，具体的代码示例请查看上面的github地址。

//导入装饰器
import  NgModule  from 'ng1-module-decorator';
//或 let NgModule = require('ng1-module-decorator');

//配置块和运行块
import { appConfig } from './app.config';
import { appRun } from './app.run';

//app组件
import { appComponent } from './component/app/app.component';
import { appState } from './component/app/app.state';

//home组件
import { homeComponent } from './component/home/home.component';
import { homeState } from './component/home/home.state';

//控制器
import { myController } from './share/controllers/myController';

//指令
import { greeting } from './share/directives/greeting';

//过滤器
import { replaceHello } from './share/filters/replaceHello';

//服务
import { greetService } from './share/services/greetService';
import { apiPath } from './share/services/apiPath';
import { colorService } from './share/services/colorService';

@NgModule({
    name: 'app',                    //模块名,必填
    imports:      ['ui.router'],    //导入模块,根模块必须导入uiRouter模块,其他可选
    configBlocks: [appConfig],      //配置块函数,可选
    runBlocks:    [appRun],         //运行块函数,可选
    states:       [                 //路由状态,可选
        appState,
        homeState
    ],
    components:   {                 //组件,可选
        appComponent,
        homeComponent
    },
    directives:   {greeting},       //指令,可选
    controllers:  {myController},   //控制器,可选
    filters:      {replaceHello},   //过滤器,可选
    providers:    {colorService},   //提供者,可选
    services:     {greetService},   //服务,可选
    constants:    {apiPath},        //常量服务,可选
    decorators:   {}                //装饰器,可选
})
class Module {}

//导出模块：通过name属性导出模块,不用需要关注模块名是什么
export const AppModule = new Module().name;

在这里我们使用name元数据指定了模块的名称，使用imports导入了其他的模块，然后注入了其他的一些元数据，最终构成了我们的这个AppModule模块。

虽然在这里组件、路由、指令、服务很多，但是我们的代码看起来非常清晰明了，且随着项目的增长，这种简单性将依然保持，这对于我们以后进行项目重构或者维护是极其方便的。

在这里分享出来，希望能够帮助到一些有类似需求的朋友。如果您喜欢的话，别忘了在github上给个星喔^_。