很少有項目是僅僅有一個模塊組成的。我們當前的前臺`app`目錄如下： ``` . ├── app-routing.module.ts ├── app.component.html ├── app.component.sass ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── teacher-add.component.html ├── teacher-add.component.ts ├── teacher-edit.component.html └── teacher-edit.component.ts ``` 如果再有其它的模塊（比如我們馬上要進行開發的班級管理模塊），則會面臨如下問題： * 教師管理模塊占用了入口組件AppComponent，其它模塊沒有地方安置。 * 教師的增加、編輯生了四個新文件，隨著模塊數量的增加，該目錄面臨文件數過多。 * 直接使用`/add`路徑來增加教師，語義沒有`/teacher/add`明確。 * 路由配置文件app-routing.module單一，多人開發時容易產生沖突。 * 路由配置文件app-routing.module單一，隨著模塊的增多，將文件內容會過長而變得無法維護。 引入班級管理后，我們希望看到如下的路由： | URL | 組件 | 功能 | | ---- | ---- | ---- | | <空> | App | 首頁，顯示歡迎界面，顯示導航欄 | | `/teacher` | TeacherIndex | 教師列表頁 | | `/teacher/add` | TeacherAdd | 增加教師 | | `/teacher/edit/<id>` | TeacherEdit | 編輯教師 | | `/klass` | KlassIndex | 班級列表頁 | | `/klass/add` | KlassAdd | 增加班級 | | `/Klass/edit/<id>` | KlassEdit | 編輯班級 | # 文件夾化 對項目文件進行重構最簡單有效的方法便是劃分文件夾，比如我們把教師管理的文件全部放到`app/teacher`文件夾下，把班級管理的文件全部放到`app/klass`文件夾下:  然后借助于`webstorm`來完成遷移：  > **注意：** 不能批量選中遷移否則`webstorm`無法為我們自動處理引用路徑的問題。 遷移后目錄如下： ``` . ├── app-routing.module.ts ├── app.component.html ├── app.component.sass ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts └── teacher ├── teacher-add.component.html ├── teacher-add.component.ts ├── teacher-edit.component.html └── teacher-edit.component.ts ``` ## 新建TeacherIndex組件 新建TeacherIndex組件，并復制原App組件中相關的代碼至： teacher/teacher-index.component.ts ``` import {Component, OnInit} from '@angular/core'; import {HttpClient} from '@angular/common/http'; @Component({ templateUrl: './teacher-index.component.html', }) export class TeacherIndexComponent implements OnInit { // 定義教師數組 teachers = new Array(); constructor(private httpClient: HttpClient) { } /** * 該方法將在組件準備完畢后被調用 */ ngOnInit() { /* 后臺數據的請求地址，如果變量定義后不再重新賦值，則應該使用const來定義 */ const url = 'http://localhost:8080/Teacher/'; /* 使用get方法請求url，請求一旦成功后，將調用傳入的第一個方法；如果請求失敗，將調用傳入的第二個方法 */ this.httpClient.get(url) .subscribe((response: any) => { console.log(response); this.teachers = response; }, (response) => { console.log(response); console.error('請求出錯'); }); } /** * 點擊刪除按鈕時刪除對應的教師 * @param teacher 要刪除的教師 */ onDelete(teacher: { id: string }): void { const url = 'http://localhost:8080/Teacher/' + teacher.id; this.httpClient.delete(url) .subscribe(() => { console.log('刪除成功'); this.ngOnInit(); }, () => { console.log('刪除失敗'); }); } } ``` 將app組件的V層轉移至teacher/teacher-index.component.html ``` <router-outlet></router-outlet> <table> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>注冊時間</th> <th>操作</th> </tr> <tr *ngFor="let teacher of teachers"> <td>{{teacher.id}}</td> <td>{{teacher.name}}</td> <td>{{teacher.username}}</td> <td>{{teacher.email}}</td> <td> <span *ngIf="teacher.sex">女</span> <span *ngIf="!teacher.sex">男</span> </td> <td>{{teacher.createTime | date: 'yyyy-MM-dd'}}</td> <td><a [routerLink]="['/edit', teacher.id]">編輯</a> &nbsp;&nbsp;<button (click)="onDelete(teacher)">刪除</button></td> </tr> </table> ``` ## 去冗余代碼 此時教師列表已經被我們轉到了新的TeacherIndex組件中，我們恢復下App組件的代碼： app.component.html ``` <h2>歡迎使用河北工業大學教務管理系統</h2> <router-outlet></router-outlet> ``` app.component ``` import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.sass'] }) export class AppComponent implements OnInit{ ngOnInit(): void { } } ``` ## 新組件添加至模塊 app.module ``` import {TeacherIndexComponent} from './teacher/teacher-index.component'; ① @NgModule({ declarations: [ AppComponent, TeacherAddComponent, TeacherEditComponent, TeacherIndexComponent ② ], ``` ## 測試  測試我們發現，教師列表沒有了。 這是由于在重構前我們使用了`App`組件來顯示教師列表；重構以后`App`組件僅顯示歡迎信息，當然教師列表就隨著不存在了。下面使用定義空路由路徑的方法來默認顯示教師列表組件。 ## 重新定義路由 app-routing.module ``` import {TeacherIndexComponent} from './teacher/teacher-index.component'; const routes: Routes = [ { path: '', ? component: TeacherIndexComponent ? }, { path: 'add', component: TeacherAddComponent }, { path: 'edit/:id', component: TeacherEditComponent } ]; ``` * ?路徑為空時，匹配?TeacherIndexComponent組件 此時當訪問[http://localhost:4200/](http://localhost:4200/)時，則默認匹配上了空路徑，進而將顯示教師列表組件。 # 測試 打開[http://localhost:4200](http://localhost:4200)及控制臺。查看功能是否正常。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.1) | - |