前情提要

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 所擁有的項目

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

參考來源

[1]
@NgModule的項目