本文目录
- 一、项目起步
- 二、编写路由组件
- 三、编写页面组件
- 1.编写单一组件
- 2.模拟数据
- 3.编写主从组件
- 四、编写服务
- 1.为什么需要服务
- 2.编写服务
- 五、引入RxJS
- 1.关于RxJS
- 2.引入RxJS
- 3.改造数据获取方式
- 六、改造组件
- 1.添加历史记录组件
- 2.添加和删除历史记录
- 七、HTTP改造
- 1.引入HTTP
- 2.通过HTTP请求数据
- 3.通过HTTP修改数据
- 4.通过HTTP增加数据
- 5.通过HTTP删除数据
- 6.通过HTTP查找数据
- 八、结语
这个入门项目是我学习完后，自己手写的一个练习项目，一步一步来，最终的，大佬们请指点啦。
推荐两个Angular学习网站：
还有呢，我没怎么关注到样式，所以样式会有点丑，主要都放在核心逻辑中了。
最终实现：- 首页书本列表数据展示
- 各个页面静态/动态路由跳转
- 本地模拟数据服务
- 书本数据的增删改查
- 父子组件通信
- 常用指令使用和介绍
后面我将把这个系列的文章，收录到我的中，里面有整理了ES6/7/8/9知识点和重温JS基础系列文章。
那么，快跟我一步步来完成这个入门项目吧。
零、Angular安装
Angular 需要 Node.js 的 8.x 或 10.x 版本。
Node.js版本，请在终端/控制台窗口中运行 node -v 命令。 要想安装Node.js，请访问 。 - 安装Angular CLI
npm install -g @angular/cli复制代码
- 常用命令
后续用到会详细介绍这些命令。
- 启动服务，并打开新窗口
ng serve --open# --open 可简写 -o复制代码
- 创建新组件
ng generate component books# generate 可简写 g复制代码
- 创建新服务
ng generate service books复制代码
- 创建路由模块
ng generate module app-routing --flat --module=app复制代码
- 其他 另外Angular CLI还有很多的命令提供，详细可以查阅官方文档 。
最后搭建完是这样：
一、项目起步
- 创建项目
ng new bookscd books复制代码
- 创建所需的两个页面组件
ng g component indexng g component detail复制代码
g是generate的简写。
二、编写路由组件
这里为了项目结构先起来，所以先简单配置一下路由，后面路由会调整，如果遇到什么不懂，可以查看。
- 安装路由模块
ng g module app-routing --flat --module=app复制代码
知识点：
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。 - 引入路由模块
// app-routing.module.ts import { RouterModule, Routes } from '@angular/router';复制代码 - 导出路由模块的指令
这里需要添加一个 @NgModule.exports 数组，并传入RouterModule，导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。
// app-routing.module.ts @NgModule({ imports: [CommonModule], declarations: [], exports: [RouterModule]})复制代码 - 添加定义路由
这里添加路由的时候，记得将所需要指向的组件也引入进来，这里我们需要引入两个页面的组件：
// app-routing.module.ts import { IndexComponent } from './index/index.component';import { DetailComponent } from './detail/detail.component';复制代码 然后将我们所需要的路由定义在routes变量中，类型是我们引入的Routes：
// app-routing.module.ts const routes: Routes = [ { path: '', redirectTo:'/index', pathMatch:'full' }, // 1 { path: 'index', component: IndexComponent}, // 2 { path: 'detail/:id', component: DetailComponent}, // 3 ]复制代码 知识点：
angular的路由接收两个参数： path：用于匹配浏览器地址栏中URL的字符串。component：当导航到此路由时，路由器展示的组件名称。
第1行代码：
作为路由系统的默认路由，当所有路由都不匹配的话，就会重定向到这个路由，并展示对应的组件。第2行代码： 正常情况下的路由配置。第3行代码： 配置的是携带参数的路由，在路由/后，用 : 拼接参数名来实现，获取这个参数的值的方法后面会介绍。 另外，我们还可以这么传递参数，直接将数据通过路由传入，后面还会介绍：
{ path: 'pathname', component: DemoComponent, data: { title: 'pingan8787' } },复制代码 - 添加路由监视
配置好路由还不能使用，需要一个监视路由变化的工具，这时候需要把RouterModule添加到 @NgModule.imports 数组中，并用 routes 来配置它。
imports数组中的 RouterModule.forRoot() 函数就行了，就像这样： // app-routing.module.ts imports: [ RouterModule.forRoot(routes) ],复制代码
- 添加路由出口
所谓的路由出口，就是路由所对应的组件展示的地方，接下来我们在app.component.html内容中，添加<router-outlet></router-outlet>：
复制代码欢迎来到我的个人书屋!
这里的<router-outlet></router-outlet>就是我们路由输出的地方，也是组件展示的地方，简单理解就是，它会告诉路由器要在哪里显示路由的视图。
- 添加路由链接
所谓的路由链接，就是出发路由跳转事件的地方，比如一个按钮，一张图片等，我们还是在app.component.html中，使用<a routerLink="/path"></a>添加3个按钮：
复制代码
这边3个按钮的路由，我们将上面定义的3种路由，传入到routerLink参数中，现在就项目就可以实现页面跳转了。
另外，这里还可以传入一个可选参数routerLinkActive="className"，表示当这个<a>标签激活的时候显示的样式，值是一个字符串，为样式的类名：
打开首页 | 复制代码
- 获取带参数路由的参数
在第7步中，我们点击 打开书本详情 按钮中，在路由中带了参数，这时候我们需要这么来获取这个参数：
- 先导出模块
ActivatedRoute和Location：
// detail.component.tsimport { ActivatedRoute } from '@angular/router';import { Location } from '@angular/common';复制代码 - 再注入到构造函数中，并将值作为私有变量：
// detail.component.tsexport class DetailComponent implements OnInit { constructor( private route: ActivatedRoute, private location: Location ) { } ngOnInit() {}}复制代码 知识点：
ActivatedRoute 保存该 DetailComponent 实例的路由信息。可以从这个组件获取URL中的路由参数和其他数据。Location 是一个 Angular 的服务，用来与浏览器打交道。后续会使用它来导航回上一个视图。 - 提取路由参数：
这里声明getDetail方法，提取路由参数，并ngOnInit生命周期钩子方法在中执行。
// detail.component.tsngOnInit() { this.getDetail()}getDetail(): void{ const id = +this.route.snapshot.paramMap.get('id'); console.log(`此课本的id是${id}`)}复制代码 知识点：
route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。paramMap 是一个URL中路由所携带的参数值的对象。"id"对应的值就是要获取的书本的 id。注意： 路由参数总会是字符串。这里我们使用 (+) 操作符，将字符串转换成数字。 现在在浏览器上刷新下页面，再点击 打开书本详情 按钮，可以看到控制台输出了此课本的id是1的结果。
本部分内容到这结束
| Author | 王平安 |
|---|---|
| 博 客 | |
| 微 信 | pingan8787 |
| 每日文章推荐 | |
| JS小册 | |
| 微信公众号 | 前端自习课 |