很少有项目是仅仅有一个模块组成的。我们当前的前台`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) | - |