在教師管理中，我們將教師列表、新增、編輯三個組件放到了App模塊中，雖說最后為其建立了單獨的文件夾來實現了模塊塊，但這種模塊化并不徹底。 # 模塊初始化 本節中，我們參考App模塊新Klass班級模塊。首先建立`klass`文件夾并于該文件夾中建立`klass.module.ts`文件，然后將班級的相關組件全部都放到班級模塊中，打造更加模塊化的應用程序。 klass.module.ts ``` import {NgModule} from '@angular/core'; z /** * 班級模塊 */ @NgModule({}) ? export class KlassModule { } ``` * ? 聲明KlassModule類為angular的一個模塊 # 組件初始化 與前面手動建立組件不同，我們在此使用前面安裝的`angular-cli`來自動完成組件的創建。打開shell(或webstorm的Terminal)并進入`app/klass`文件夾，執行`ng g c index`命令, 回顯信息如下： ``` panjiedeMac-Pro:klass panjie$ ng g c index CREATE src/app/klass/index/index.component.sass (0 bytes) ? CREATE src/app/klass/index/index.component.html (20 bytes) ? CREATE src/app/klass/index/index.component.spec.ts (621 bytes) ? CREATE src/app/klass/index/index.component.ts (266 bytes) ? UPDATE src/app/klass/klass.module.ts (200 bytes) ? ``` > `ng g c index`簡寫于:`ng generate component index`，也就是說我們剛剛運行`ng generate component index`命令也是可以的。直譯為：調用`ng` 命令生成index組件。 * ? 創建組件的樣式表文件 * ? 創建組件的V層文件 * ? 創建組件的單元測試文件 * ? 創建組件的C層，并與??所創建的文件進行關聯 * ? 將創建的組件自動添加到klass模塊 所以此時klass.module.ts文件的樣子已經自動變更為： ``` import {NgModule} from '@angular/core'; import { IndexComponent } from './index/index.component'; ① /** * 班級模塊 */ @NgModule({ declarations: [IndexComponent] ② }) export class KlassModule { } ``` 自動生成的4個文件，其中的V層的`index.component.html`中自動填充了`<p>index works</p>`標簽，C層的`index.component.ts`中自動進行了代碼的初始化并實現了OnInit接口，`index.component.sass`是樣式表文件，是以前我們以前使用的`css`的升級版，用法與`css`差不太多，`index.component.spec.ts`是個偉大的單元測試文件。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.1) | - |