本小节，我们一起来实现增加数据的功能。与开发其它的功能模块相同，本小节的开发我们同样按以下的开发步骤： * ① 开发前台原型 * ② 完成前台的逻辑处理 * ③ 按前台的功能需求开发后台 * ④ 前后台对接 * ⑤ 测试、发现问题、分析问题、解决问题、总结问题 **本节目标：** 使用浏览器打开[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 |