iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

Angular初期筆記系列 第 7

DAY7-Angular6之「IT狗的生活」開演/@NgModule項目

前情提要

DAY6-Angular6之假如app是舞台劇/@Component項目

開演啦!

在沒有 routing 的狀況下

以下就可以演好一齣戲了,僅讓 IT 狗擁有動作

地點:這間辦公室( index.html )
第一幕 ( module.ts )
    ---
    Component:正常的 IT 狗生活
        景象 (html):
            IT狗 (可觸發事件:打code、接收老闆任務、回報任務、收錢)
            電腦
            老闆
            打卡機
            客戶
            PM
        動作 (ts):
            打code() {...}
            接收老闆任務() {...}
            回報任務() {...}
            收錢 () {...}
    ---

有 routing 的狀況下

地點:這間辦公室( index.html )

第一幕劇本( routing.module ) 
假如導演沒有給提示,就是演 normalLifeComponent
假如導演給 「憂愁的 IT 狗生活」,就是演 sadLifeComponent
假如導演給 「很樂的 IT 狗生活」,就是演 happyLifeComponent
Routes = [
    { path: '/正常的 IT 狗生活', component: normalLifeComponent},
    { path: '/憂愁的 IT 狗生活', component: sadLifeComponent},
    { path: '/很樂的 IT 狗生活', component: happyLifeComponent },
    { path: '', redirectTo: '/正常的 IT 狗生活' , pathMatch: 'full'}
];

第一幕(初始幕、根幕) ( module.ts )
    ---
    appComponent
        景象 (html):
            配合劇本預留的位置 (<router-outlet></router-outlet>)
        動作 (ts):
            空

    normalLifeComponent:正常的 IT 狗生活
        景象 (html):
            IT狗 (可觸發事件:打code、除手上的BUG、上證照課程、接收老闆任務、回報任務、接電話、吃早餐、收錢)
            電腦
            老闆
            PM
            會計
            離職(<a [routerLink]="['/憂愁的 IT 狗生活']">離職</a>)

        動作 (ts):
            打code() {...}
            接收老闆任務() {...}
            回報任務() {...}
            收錢 () {...}

    sadLifeComponent:憂愁的 IT 狗生活
        景象 (html):
            IT狗 (可觸發事件:打code、接收老闆任務、接收客戶任務、回報任務、收自己的薪資、收客戶的款項、跟客戶討價還價、跟客戶談案件、跟客戶溝通設計、面對過往的BUG、面對不知道哪間公司的BUG、打卡下班、處理電腦故障問題、等待電腦運算空檔、處理薪資未發的事情、聆聽老闆的宏景、開不知道的會、做線稿、做網站企劃、倒垃圾、想離職的說詞、找能外包的人才、跟第三方公司洽談專案、面試其他人、做開會用簡報、處理過往專案的問題、幻想美好的未來)
            電腦
            BUG
            老闆
            打卡機
            客戶
            客戶的親戚
            離職(<a [routerLink]="['/很樂的 IT 狗生活']">離職</a>)

        動作 (ts):
            打code() {...}
            接收老闆任務() {...}
            接收客戶任務() {...}
            ...省略

    happyLifeComponent: 很樂的 IT 狗生活
        景象 (html):
            IT狗 (可觸發事件:打code、收錢)
            電腦
            離職(<a [routerLink]="['/正常的 IT 狗生活']">離職</a>)

        動作 (ts):
            打code() {...}
            收錢() {...}

    ---

每一幕(module.ts)都可以選擇性擁有一個劇本(routing.module),端看是否需要換劇情或換幕

app 為首的檔案,大多稱為根,是因為它們就是第一幕也會是第一個劇情,也可以選擇性擁有第一本劇本

[1]@NgModule 所擁有的項目

項目 描述
providers(中文:供應商) 一組 injectable objects 在 injector(注射器)或這個 module 的參數
declarations (中文:宣告) 一組屬於這個 module 的 components、directives、pipes(要申報的) 的參數
imports (中文:輸入) 一組 NgModules 參數,其輸出的 template 若要在這個 modeul 上使用需申請才可以輸入
exports (中文:輸出) 一組 NgModule 擁有 component 、 directive 和 宣告過的 pipes 參數,這樣就可以在任何 component 的 template 上使用,這個 component 是 NgModel 中的一部分,被輸出的這些參數,會變成 module's 的公開API
entryComponents (中文:入口元件) 一組 當定義這個 NgModule 就編譯 component 參數, 所以可以動態載入到這個 view
bootstrap (中文:引導) 一組 module 和 component 都被引導好的參數,這個 components 會自動被列上 entryComponents (入口components)
schemas (中文:模式) 一組 schemas 宣告元素屬於在這個 NgModule ;元素和屬性兩者都不是 angular components 也不是 directives ,必須是宣告在 schema 中
id 一個名稱或路徑 獨特的識別這個 NgModule 在 getModuleFactory,假如是 undefined ,這個 NgModule 不會登記在 getModuleFactory
jit (中文:即時) 假如是 true ,這個 module 不會用 AOT 編譯模式,將會都使用 JIT 編譯模式

其他相關文章
[Angular 深入淺出三十天] Day 06 - 基礎結構說明(一)

參考來源

[1]
@NgModule的項目


上一篇
DAY6-Angular6之假如app是舞台劇/@Component項目
下一篇
DAY8-Angular6之data binding-Interpolation
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言