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

bergwhite 发布于2019-08-23 15:25 / 2537人阅读

摘要：启动服务，并打开新窗口可简写创建新组件可简写创建新服务创建路由模块其他另外还有很多的命令提供，详细可以查阅官方文档命令。引入路由模块导出路由模块的指令这里需要添加一个数组，并传入，导出让路由器的相关指令可以在中的组件中使用。

本文目录

一、项目起步

二、编写路由组件

三、编写页面组件

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 英雄指南教程后，自己手写的一个练习项目，一步一步来，最终的项目源码可以这里查看，大佬们请指点啦。

推荐两个Angular学习网站：

Angular 中文网

Angular 修仙之路

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

首页书本列表数据展示

各个页面静态/动态路由跳转

本地模拟数据服务

书本数据的增删改查

父子组件通信

常用指令使用和介绍

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

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

零、Angular安装

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

安装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还有很多的命令提供，详细可以查阅官方文档 Angular CLI 命令。

最后搭建完是这样：

一、项目起步

创建项目

ng new books
cd books

创建所需的两个页面组件

ng g component index
ng g component detail

g是generate的简写。

二、编写路由组件

这里为了项目结构先起来，所以先简单配置一下路由，后面路由会调整，如果遇到什么不懂，可以查看Angular 路由与导航。

安装路由模块

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内容中，添加：



   欢迎来到我的个人书屋!

这里的就是我们路由输出的地方，也是组件展示的地方，简单理解就是，它会告诉路由器要在哪里显示路由的视图。

添加路由链接

所谓的路由链接，就是出发路由跳转事件的地方，比如一个按钮，一张图片等，我们还是在app.component.html中，使用添加3个按钮：



   欢迎来到我的个人书屋! 
  重定向 | 
  打开首页 | 
  打开书本详情

这边3个按钮的路由，我们将上面定义的3种路由，传入到routerLink参数中，现在就项目就可以实现页面跳转了。

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

打开首页 |

获取带参数路由的参数

在第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...
JS小册	js.pingan8787.com
微信公众号	前端自习课

云服务器 GPU云服务器如何构建java项目 VS2013项目创建 pycharm创建python项目宝之云idc四期1号太保数据中心项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102028.html

【CuteJavaScript】Angular6入门项目（2.构建项目页面和组件）

摘要：编写单一组件我们首先写一个书本信息的组件，代码如下单个课本像火焰像灰烬程姬知识点是一个的复写器指令，就像中的和中的。写到这里，看看我们项目，还是一样正常在运行，只是现在项目中组件分工更加明确了。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2.编写服务五、...

Lemon_95 2019-08-23 15:25 评论0 收藏0
【CuteJavaScript】Angular6入门项目（3.编写服务和引入RxJS）

摘要：发布通过回调方法向发布事件。观察者一个回调函数的集合，它知道如何去监听由提供的值。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2.编写服务五、引入RxJS 1.关于RxJS 2.引入RxJS 3.改造数据获取方式六、改造组件 1.添...

RebeccaZhong 2019-08-23 15:25 评论0 收藏0
【CuteJavaScript】Angular6入门项目（4.改造组件和添加HTTP服务）

摘要：然后我们在父组件上添加事件监听，并传入本地的在对应的中添加方法再来，我们在子组件上多导入和，并添加修饰器和调用这样就实现了我们父子组件之间的事件传递啦，现在我们的页面还是正常运行，并且删除一条数据后，页面数据会更新。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 ...

BDEEFE 2019-08-23 15:25 评论0 收藏0
【CuteJavaScript】GraphQL真香入门教程

摘要：最终代码省略其他输入类型用标识查询类型需要至少定义一个不要会不显示查询这里需要转成数组因为前面定义了返回值是类型相当于数据库的添加操作相当于数据库的更新操作省略其他现在我们可以启动服务器，在上测试下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完复联四，我整理了这份 Gr...

bingo 2019-08-26 13:44 评论0 收藏0
angular6入门之安装angular-cli

摘要：由于之前安装的是的版本，需要卸载了，安装最新的版本。清除缓存，确保卸载干净具体参考安装最新版本安装成功后提示意思是版的需要版本最低，我之前的是的版本。先安装，去下载安装。在命令行输入检查是否安装成功。最近听了大漠老师分享的angular6的讲解（附个链接大漠老师课程：http://www.ngfans.net/topic/2...），像是沙漠中发现了绿洲一样，决定好好学习一番，于是准...

loonggg 2019-08-22 18:34 评论0 收藏0