在angularJS1.x中使用@NgModule裝飾器

zc的救贖發表於2017-12-04
AngularJS

ng1-module-decorator

我們都知道Angular2結合TypeScipt使用@NgModule裝飾器裝飾模組是非常方便的，而在angular1.x中我們只能使用angular.module().xxxx來進行模組的組合，如果一個模組的功能非常多，這樣寫會是非常令人苦惱且不易維護的。

幸而在ES6誕生之後，語言本身提供了裝飾器的功能，雖然沒有typescript那麼強大，卻也能滿足我們的需求了。於是寫了一個裝飾器的函式庫，讓我們在angular1.x中也能像angular2中一樣使用@NgModule功能。本人在實際專案中親測，可以有效的縮短開發週期。

github地址：ng1-module-decorator

使用樣例

話不多說，下面我們來看一下實際的使用效果，具體的程式碼示例請檢視上面的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上給個星喔^_^。

相關文章