使用`ng s`啟動(dòng)項(xiàng)目,使用瀏覽器打開(kāi)[http://localhost:4200/](http://localhost:4200/)并使用相關(guān)的用戶(hù)名密碼登錄系統(tǒng)。
> 可用的用戶(hù)名請(qǐng)?jiān)L問(wèn):[http://angular.api.codedemo.club:81/teacher/](http://angular.api.codedemo.club:81/teacher/)獲取,默認(rèn)密碼為:codedemo.club
## 菜單

當(dāng)前點(diǎn)擊班級(jí)管理菜單時(shí)將跳轉(zhuǎn)到首頁(yè),為此我們配置班級(jí)管理菜單:
```html
+++ b/first-app/src/app/nav/nav.component.html
@@ -15,7 +15,7 @@
<a class="nav-link" routerLink="teacher">教師管理</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#">班級(jí)管理</a>
+ <a class="nav-link" routerLink="clazz">班級(jí)管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">學(xué)生管理</a>
```
如上為班級(jí)管理定義的URL地址為`clazz`,此時(shí)再次點(diǎn)擊班級(jí)管理菜單時(shí),在控制臺(tái)中將出現(xiàn)無(wú)法匹配相關(guān)路由的錯(cuò)誤:

這是由于我們尚未`clazz`路由設(shè)置任何組件的原因。
## 設(shè)置路由
在前面的教師管理、個(gè)人中心章節(jié)中,我們是通過(guò)`AppRoutingModule`來(lái)**直接**設(shè)置路由的。在這些路由設(shè)置中有個(gè)共性是:路由對(duì)應(yīng)的所有的組件,都屬于`AppModule`。為了更加的清楚路由的配置過(guò)程,我們對(duì)以下代碼進(jìn)行解讀:
`AppModule`在`imports`中聲明了`AppRoutingModule`:
```typescript
imports: [
BrowserModule,
AppRoutingModule, ??
HttpClientModule,
FormsModule,
RouterModule
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: XAuthTokenInterceptor, multi: true}
],
bootstrap: [IndexComponent]
})
export class AppModule {
}
```
此時(shí)`AppModule`便可以使用`AppRoutingModule`的一些功能了(當(dāng)前`AppRoutingModule`未提供任何功能):

`AppRoutingModule`在`imports`中聲明了`RouterModule.forRoot(routes)`,其中的`routes`即為我們?cè)O(shè)置的路由。
```typescript
@NgModule({
imports: [RouterModule.forRoot(routes)], ??
exports: [RouterModule]
})
export class AppRoutingModule {
}
```
所以`AppRoutingModule`實(shí)際上引入了已配置了路由的`RouterModule`

最后`AppRoutingModule`又在`exports`中聲明了`RouterModule`,這相當(dāng)于把`RouterModule`傳送給了`AppModule`:

觀察上圖不難得出:Angular給出的默認(rèn)示例之所以這么做,僅僅是為了將路由定義的代碼由`AppModule`中抽離出來(lái)。所以如果按下圖這樣做,也是可以直接配置路由信息的。

## 惰性加載
在Angular中可以使用**惰性加載**來(lái)加速項(xiàng)目的啟動(dòng)速度。**惰性加載**也可以稱(chēng)為**按需加載**,即僅當(dāng)用戶(hù)需要某個(gè)模塊時(shí),才加載某個(gè)模塊。比如我們將班級(jí)管理設(shè)置為惰性加載,系統(tǒng)則在用戶(hù)登錄系統(tǒng)時(shí)不加載班級(jí)管理模塊,而僅在用戶(hù)首次訪問(wèn)`http://localhost:4200/clazz`時(shí)進(jìn)行加載。這樣做可以顯著的提升用戶(hù)打開(kāi)應(yīng)用時(shí)的等待時(shí)間。
### 配置惰性加載
在路由配置時(shí)可以配置路由的`loadChildren`屬性來(lái)達(dá)到惰性加載的目的:
```typescript
+++ b/first-app/src/app/app-routing.module.ts
@@ -11,6 +11,10 @@ const routes: Routes = [
path: '',
component: WelcomeComponent
},
+ {
+ path: 'clazz',
+ loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule)
+ },
{
path: 'teacher',
component: AppComponent
```
- `loadChildren`是路由的一個(gè)屬性,該屬性接收一個(gè)**回調(diào)函數(shù)**,這使得Angular可以在有需求的時(shí)候調(diào)用這個(gè)**回調(diào)函數(shù)**,從而實(shí)現(xiàn)了惰性加載。
- `import(xxx)`是指從`xxx`導(dǎo)入文件,在導(dǎo)入過(guò)程中省略`ts`后綴,所以上述`import`相當(dāng)于`import('./clazz/clazz.module.ts')`。
- `m => m.ClazzModule`這也是一個(gè)**回調(diào)函數(shù)**。`m`為參數(shù)代表前面`import`成功的文件,所以可以使用任意的合法關(guān)鍵來(lái)替換,比如:`f => f.ClazzModule`。`m.ClazzModule`則表示文件中對(duì)應(yīng)的`ClazzModule`類(lèi)。
此時(shí),當(dāng)請(qǐng)求的url地址以`clazz`打頭時(shí),則會(huì)惰性加載`loadChildren`中的模塊,并以該模塊中繼續(xù)查找相應(yīng)的路由。為了更加清晰的明了執(zhí)行過(guò)程,我們?cè)谏鲜龆栊约虞d中加入一些日志:
```typescript
{
path: 'clazz',
- loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule)
+ loadChildren: () => import('./clazz/clazz.module').then(m => {
+ console.log('開(kāi)始加載,調(diào)用ClazzModule');
+ return m.ClazzModule;
+ })
},
```
此時(shí)當(dāng)**首次**點(diǎn)擊**班級(jí)管理**菜單時(shí),控制臺(tái)將打印一次日志:

### 定義路由
在訪問(wèn)`clazz`時(shí),惰性加載將路由的設(shè)置交給了`ClazzModule`。

加之剛剛上圖展示了可以直接在模塊中定義路由,故打開(kāi)`ClazzModule`來(lái)嘗試進(jìn)行路由定義:
```typescript
+++ b/first-app/src/app/clazz/clazz.module.ts
@@ -6,13 +6,22 @@ import {KlassSelectComponent} from './klass-select/klass-select.component';
import {ClazzComponent} from './clazz.component';
import {PageComponent} from './page/page.component';
import {EditComponent} from './edit/edit.component';
+import {RouterModule, Routes} from '@angular/router';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ClazzComponent
+ }
+];
@NgModule({
declarations: [AddComponent, KlassSelectComponent, ClazzComponent, PageComponent, EditComponent],
imports: [
CommonModule,
FormsModule,
- ReactiveFormsModule
+ ReactiveFormsModule,
+ RouterModule.forChild(routes) ??
]
})
export class ClazzModule {
```
上述路由的配置基本與`AppRoutingModule`中的配置無(wú)異,不同的是使用惰性加載引用的模塊在進(jìn)行路由配置時(shí)必須使用`forChild()`,而非`forRoot()`。
> `forRoot()` 在應(yīng)用中只應(yīng)該使用一次。

同時(shí)在控制臺(tái)發(fā)生如下錯(cuò)誤(如果你在6.1.3小節(jié)中完成了使用Api攔截器的作業(yè),則已充分的證明了自己的能力,此處將看不到如下錯(cuò)誤):

## 本節(jié)作業(yè)
1. 請(qǐng)找出控制臺(tái)發(fā)生上述404錯(cuò)誤的原因并嘗試修正該錯(cuò)誤。
2. 點(diǎn)擊班級(jí)管理時(shí),班級(jí)管理的菜單未并像教師管理一樣點(diǎn)亮,請(qǐng)修正它。
| 名稱(chēng) | 鏈接 |
| ---------------- | ------------------------------------------------------------ |
| 惰性加載特性模塊 | [https://angular.cn/guide/lazy-loading-ngmodules](https://angular.cn/guide/lazy-loading-ngmodules) |
| `forRoot()` 模式 | [https://angular.cn/guide/singleton-services#the-forroot-pattern](https://angular.cn/guide/singleton-services#the-forroot-pattern) |
| 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip) |
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴(lài)注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶(hù)登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類(lèi)
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷(xiāo)
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)