【CuteJavaScript】Angular6入门项目（1.构建项目和建立路由）

本文目录

• 1、项目起步
• 2、编写路由组件
• 3、编写页面组件
  • 1.编写单一组件
  • 2.模拟数据
  • 3.编写主从组件
• 4、编写服务
  • 1.为何须要服务
  • 2.编写服务
• 5、引入RxJS
  • 1.关于RxJS
  • 2.引入RxJS
  • 3.改造数据获取方式
• 6、改造组件
  • 1.添加历史记录组件
  • 2.添加和删除历史记录
• 7、HTTP改造
  • 1.引入HTTP
  • 2.经过HTTP请求数据
  • 3.经过HTTP修改数据
  • 4.经过HTTP增长数据
  • 5.经过HTTP删除数据
  • 6.经过HTTP查找数据
• 8、结语

这个入门项目是我学习完Angular 英雄指南教程后，本身手写的一个练习项目，一步一步来，最终的项目源码能够这里查看，大佬们请指点啦。

推荐两个Angular学习网站：

1. Angular 中文网
2. Angular 修仙之路

还有呢，我没怎么关注到样式，因此样式会有点丑，主要都放在核心逻辑中了。
最终实现：

• 首页书本列表数据展现
• 各个页面静态/动态路由跳转
• 本地模拟数据服务
• 书本数据的增删改查
• 父子组件通讯
• 经常使用指令使用和介绍

后面我将把这个系列的文章，收录到个人【CuteJavaScript】中，里面有整理了ES6/7/8/9知识点和重温JS基础系列文章。

那么，快跟我一步步来完成这个入门项目吧。

零、Angular安装

Angular 须要 Node.js 的 8.x 或 10.x 版本。
检查你的Node.js版本，请在终端/控制台窗口中运行 node -v 命令。
要想安装Node.js，请访问 nodejs.org。

1. 安装Angular CLI

npm install -g @angular/cli
复制代码

2. 经常使用命令

后续用到会详细介绍这些命令。

• 启动服务，并打开新窗口

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还有不少的命令提供，详细能够查阅官方文档 Angular CLI 命令。

最后搭建完是这样：

1、项目起步

1. 建立项目

ng new books
cd books
复制代码

2. 建立所需的两个页面组件

ng g component index
ng g component detail
复制代码

g是generate的简写。

2、编写路由组件

这里为了项目结构先起来，因此先简单配置一下路由，后面路由会调整，若是遇到什么不懂，能够查看Angular 路由与导航。

1. 安装路由模块

ng g module app-routing --flat --module=app
复制代码

知识点：
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

2. 引入路由模块

// app-routing.module.ts 
import { RouterModule, Routes } from '@angular/router';
复制代码

3. 导出路由模块的指令

这里须要添加一个 @NgModule.exports 数组，并传入RouterModule，导出 RouterModule 让路由器的相关指令能够在 AppModule 中的组件中使用。

// app-routing.module.ts 
@NgModule({
  imports: [CommonModule],
  declarations: [],
  exports: [RouterModule]
})
复制代码

4. 添加定义路由

这里添加路由的时候，记得将所须要指向的组件也引入进来，这里咱们须要引入两个页面的组件：

// 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' } },
复制代码

5. 添加路由监视

配置好路由还不能使用，须要一个监视路由变化的工具，这时候须要把RouterModule添加到 @NgModule.imports 数组中，并用 routes 来配置它。
这里只须要调用imports数组中的 RouterModule.forRoot() 函数就好了，就像这样：

// app-routing.module.ts 
imports: [ RouterModule.forRoot(routes) ],
复制代码

6. 添加路由出口

所谓的路由出口，就是路由所对应的组件展现的地方，接下来咱们在app.component.html内容中，添加<router-outlet></router-outlet>：

<!-- app.component.html -->
<div>
  <h1> 欢迎来到个人我的书屋! </h1>
  <router-outlet></router-outlet>
</div>
复制代码

这里的<router-outlet></router-outlet>就是咱们路由输出的地方，也是组件展现的地方，简单理解就是，它会告诉路由器要在哪里显示路由的视图。

7. 添加路由连接

所谓的路由连接，就是出发路由跳转事件的地方，好比一个按钮，一张图片等，咱们仍是在app.component.html中，使用<a routerLink="/path"></a>添加3个按钮：

<!-- app.component.html -->
<div>
  <h1> 欢迎来到个人我的书屋! </h1>
  <a routerLink="">重定向</a> | 
  <a routerLink="/index">打开首页</a> | 
  <a routerLink="/detail/1">打开书本详情</a>
  <router-outlet></router-outlet>
</div>
复制代码

这边3个按钮的路由，咱们将上面定义的3种路由，传入到routerLink参数中，如今就项目就能够实现页面跳转了。

另外，这里还能够传入一个可选参数routerLinkActive="className"，表示当这个<a>标签激活的时候显示的样式，值是一个字符串，为样式的类名：

<a routerLink="/index" routerLinkActive="activeClass">打开首页</a> | 
复制代码

8. 获取带参数路由的参数

在第7步中，咱们点击 打开书本详情 按钮中，在路由中带了参数，这时候咱们须要这么来获取这个参数：

• 先导出模块ActivatedRoute和Location：

// detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
复制代码

• 再注入到构造函数中，并将值做为私有变量：

// detail.component.ts
export class DetailComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private location: Location
  ) { }
  ngOnInit() {}
}
复制代码

知识点：
ActivatedRoute 保存该 DetailComponent 实例的路由信息。能够从这个组件获取URL中的路由参数和其余数据。
Location 是一个 Angular 的服务，用来与浏览器打交道。后续会使用它来导航回上一个视图。

• 提取路由参数：

这里声明getDetail方法，提取路由参数，并ngOnInit生命周期钩子方法在中执行。

// detail.component.ts
ngOnInit() {
    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	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推荐	https://github.com/pingan8787/Leo_Reading/issues
JS小册	js.pingan8787.com
微信公众号	前端自习课