Angular 模組化

更新於 分類於

模組化

在 Angular 模組 我們練習先建立一個模組(NgModule)，然後在上面建立元件(Component)，今天我們試著反過來將既有的元件包覆到一個模組內。

重整

先將用不到的元件及模組刪除：PagexComponent、OptxComponent、OperationModule，直接刪除檔案，再將把註冊相關元件的模組(src\app\app.module.ts、src\app\app-routing.module.ts)程式碼給移除。
img

app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Page404Component } from './page404/page404.component';
import { CustomMaterialModule } from './custom-material.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    Page404Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Page404Component } from './page404/page404.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '404', component: Page404Component }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

因為 src\app\app.component.html 只有一行語法，所以直接將它併入 src\app\app.component.ts，相關的樣板檔(app.component.scss)以及測試檔(app.component.spec.ts)可以先移除，後續有需要時再加回來。

app.component.ts
1
2
3
4
5
6
7
8
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { }

整個專案應該會變乾淨很多。
img

建立模組

開始將在 Angular 子路由 所建立的功能元件都合併到一個模組內。
img
透過 ng g m employee 建立一個 EmployeeModule 模組。
img
將相關模組移動到 src\app\employee 下面，在可以透過 VS Code 的檔案總管用滑鼠直接拖拉，並將相關元件註冊到 src\app\employee\employee.module.ts。
img

employee.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarComponent } from './calendar/calendar.component';
import { AddressBookComponent } from './address-book/address-book.component';
import { LogbookComponent } from './logbook/logbook.component';
import { ToDoListComponent } from './to-do-list/to-do-list.component';
import { FileComponent } from './file/file.component';
import { LeaveComponent } from './leave/leave.component';
import { ReimburseComponent } from './reimburse/reimburse.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CalendarComponent,
    AddressBookComponent,
    LogbookComponent,
    ToDoListComponent,
    FileComponent,
    LeaveComponent,
    ReimburseComponent
  ]
})
export class EmployeeModule { }

再將相關元件從 src\app\home\home.module.ts 中移除參考，並將 EmployeeModule 註冊進來。

home.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { HeaderComponent } from './header/header.component';
import { AsideComponent } from './aside/aside.component';
import { CustomMaterialModule } from '../custom-material.module';
import { EmployeeModule } from '../employee/employee.module';

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
    CustomMaterialModule,
    EmployeeModule
  ],
  declarations: [
    HomeComponent,
    HeaderComponent,
    AsideComponent
  ]
})
export class HomeModule { }

最後的問題大概就是 HomeRoutingModule(src\app\home\home-routing.module.ts) 的路由規則要如何處理？

home-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { CalendarComponent } from './calendar/calendar.component';
import { AddressBookComponent } from './address-book/address-book.component';
import { FileComponent } from './file/file.component';
import { LeaveComponent } from './leave/leave.component';
import { LogbookComponent } from './logbook/logbook.component';
import { ReimburseComponent } from './reimburse/reimburse.component';
import { ToDoListComponent } from './to-do-list/to-do-list.component';

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, children: [
      { path: '', redirectTo: 'to-do-list', pathMatch: 'full' },
      { path: 'address-book', component: AddressBookComponent },
      { path: 'calendar', component: CalendarComponent },
      { path: 'file', component: FileComponent },
      { path: 'leave', component: LeaveComponent },
      { path: 'logbook', component: LogbookComponent },
      { path: 'reimburse', component: ReimburseComponent },
      { path: 'to-do-list', component: ToDoListComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

比較好的做法應該是將路由規則 path:'home' 下 children 屬性內的路由規則都移到 src\app\employee\ 資料夾內，維護上會比較方便。
我們先在 employee 資料夾內建立一個存放路由規則的 ts 檔(src\app\employee\employee.routing.ts)，在將路由規則搬移至此，最後再將路由規則 export 出來。

employee.routing.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Routes } from '@angular/router';
import { AddressBookComponent } from './address-book/address-book.component';
import { CalendarComponent } from './calendar/calendar.component';
import { FileComponent } from './file/file.component';
import { LeaveComponent } from './leave/leave.component';
import { LogbookComponent } from './logbook/logbook.component';
import { ReimburseComponent } from './reimburse/reimburse.component';
import { ToDoListComponent } from './to-do-list/to-do-list.component';

const routes: Routes = [
  { path: '', redirectTo: 'to-do-list', pathMatch: 'full' },
  { path: 'address-book', component: AddressBookComponent },
  { path: 'calendar', component: CalendarComponent },
  { path: 'file', component: FileComponent },
  { path: 'leave', component: LeaveComponent },
  { path: 'logbook', component: LogbookComponent },
  { path: 'reimburse', component: ReimburseComponent },
  { path: 'to-do-list', component: ToDoListComponent }
];

export const employeeRouter = routes;

接下來將 employeeRouter 變數指派回 src\app\home\home-routing.module.ts 的 children 屬性。

home-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { employeeRouter } from '../employee/employee.routing';

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, children: employeeRouter
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

觀看執行結果其實感覺不出差異，但是對於系統維護上來說會更加便利。
img

[**first-app_2017-09-04.zip**](/uploads/first-app_2017-09-04.zip)