本小節，我們一起來實現增加數據的功能。與開發其它的功能模塊相同，本小節的開發我們同樣按以下的開發步驟： * ① 開發前臺原型 * ② 完成前臺的邏輯處理 * ③ 按前臺的功能需求開發后臺 * ④ 前后臺對接 * ⑤ 測試、發現問題、分析問題、解決問題、總結問題 **本節目標：** 使用瀏覽器打開[http://localhost:4200/add](http://localhost:4200/add)地址，顯示教師添加表單后添加教師數據，并成功保存到數據庫。 # 效果展示  # 系統啟動組件 在前面讀取數據的章節中，我們使用了項目初始化自動生的`AppComponent`組件來展示教師列表。使用了默認的地址[http://localhost:4200/](http://localhost:4200/)來觸發該組件，之所以能達到首頁自動顯示`AppComponent`組件，是由于我們在`app.module.ts`這個負責處理模塊的類中，將系統啟動時加載的組件定義成了`AppComponent`。 app.module.ts ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] ? }) export class AppModule { } ``` * ?定義項目啟動時加載的組件為AppComponent > `bootstrap` = `boot strap` = `啟動`的`帶子` = `啟動組件`。其實有些時候，不必太關注這個單詞的具體的中文釋義，我們只要知道它在此處的功能就可以了。一門語言正確的學習過程也正是如此。 # 小議路由 我們基本上找不到任何一個商用的系統，是可以靠一個組件（界面）來解決問題的。比如本小節中，我們需要增加教師新增組件（界面）來完成新增教師的功能。加載其它的組件需要`angular`的路由功能，定義路由的文件是`app-routing.module.ts`。 ```js import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; ? @NgModule({ imports: [RouterModule.forRoot(routes)], ? exports: [RouterModule] }) export class AppRoutingModule { } ``` * ? 定義一個數組。 * ? 用定義的數組來配置路由（由于數組為空，所以實質上未定義任何的路由信息）。 路由來自于`router`。在英文中以`er`結尾的往往表示某某功能的提供者，所以`router`的本意是`route`的提供者。`route`的本意是`路、路線`，那么`router`的本意則理所應該為`規劃路線的(人或物)`。除此以外，我們的生活中接觸最多的與路由相關的詞匯便是`路由器`了，按前面我們的解釋它應該稱為`規劃路線的電器`。這時候相信有的同學應該有疑問了：不對呀，`路由器`不是上網用的嗎，怎么成了`規劃路線的電器`了？原因是這樣：上網的本質是將數據由用戶的計算機通過網絡發送給服務者的計算機，而在錯綜復雜的網絡結構中，數據就是按照`規劃路線的電器`的規劃路線進行傳遞的。現在生活中，路由器就好像是一個個郵局，或是快遞點，它負責的功能便是將數據進行轉發。同樣，無論是`angular`的路由，還是`spring boot`的路由，基本的功能都是進行數據的轉發。而數據轉發的規則需要由我們來定義，這就是`路由規則`，或稱為`路由表`。程序在運行時，會按我們定義好的`路由表`來進行數據的轉發。 # 本節小測 由`bootstrap: [AppComponent]`我們看到，該`bootstrap`屬性接收的值是一個數組，那么是不是可以同時啟動多個組件呢？如果你想到了答案，那么如何驗證自己的答案正確與否。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 入口組件 | [https://www.angular.cn/guide/entry-components](https://www.angular.cn/guide/entry-components) | 10 | | 啟動過程 | [https://www.angular.cn/guide/bootstrapping](https://www.angular.cn/guide/bootstrapping) | 15 | | 路由概覽 | [https://www.angular.cn/guide/router#overview](https://www.angular.cn/guide/router#overview) | 5 |