【CuteJavaScript】Angular6入门项目(1.构建项目和创建路由)
本文目录
- 一、项目起步
- 二、编写路由组件
- 三、编写页面组件
- 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学习网站:
还有呢,我没怎么关注到样式,所以样式会有点丑,主要都放在核心逻辑中了。
最终实现:
- 首页书本列表数据展示
- 各个页面静态/动态路由跳转
- 本地模拟数据服务
- 书本数据的增删改查
- 父子组件通信
- 常用指令使用和介绍
后面我将把这个系列的文章,收录到我的【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
内容中,添加<router-outlet></router-outlet>
:
<!-- app.component.html -->
<div>
<h1> 欢迎来到我的个人书屋! </h1>
<router-outlet></router-outlet>
</div>
这里的<router-outlet></router-outlet>
就是我们路由输出的地方,也是组件展示的地方,简单理解就是,它会告诉路由器要在哪里显示路由的视图。
- 添加路由链接
所谓的路由链接,就是出发路由跳转事件的地方,比如一个按钮,一张图片等,我们还是在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> |
- 获取带参数路由的参数
在第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 | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
JS小册 | js.pingan8787.com |
微信公众号 | 前端自习课 |
【CuteJavaScript】Angular6入门项目(1.构建项目和创建路由)的更多相关文章
- SpringBoot学习入门之Hello项目的构建、单元测试和热部署等(配图文,配置信息详解,附案例源码)
前言: 本文章主要是个人在学习SpringBoot框架时做的一些准备,参考老师讲解进行完善对SpringBoot构建简单项目的学习汇集成本篇文章,作为自己对SpringBoot框架的总结与笔记. 你将 ...
- 160921、React入门教程第一课--从零开始构建项目
工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...
- 前端项目自动化构建工具——Webpack入门教程
参考资料:https://www.webpackjs.com/(中文文档) https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...
- MyBatis源码解析【2】构建项目
有了之前的准备,今天就要开始构建学习使用的项目了.废话不多说.开始吧. 首先我用IDEA构建了一个空的maven项目,然后加入了Mybatis的依赖. <dependencies> < ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- Hibernate入门2.简单的项目开发实例
Hibernate入门2.简单的项目开发实例 这一节通过一个简单的项目学习Hibernate项目的配置 代码下载 : 链接: http://pan.baidu.com/s/1zlgjl 密码: p34 ...
- Vue-cli入门(一)——项目搭建
Vue-cli入门(一)——项目搭建 前言: Vue-cli是一款基于vue的项目脚手架工具,其集成了webpack环境和主要的依赖,对于我们的项目搭建.开发.打包.维护管理等都是非常的方便. 主要内 ...
- vue2.0+webpack+vuerouter+vuex+axios构建项目基础
前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...
- vue 快速入门 系列 —— Vue(自身) 项目结构
其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...
- Taurus.MVC 微服务框架 入门开发教程:项目部署:1、微服务应用程序常规部署实现多开,节点扩容。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
随机推荐
- 通过ESP8266调节继电器时间
通过ESP8266调节继电器时间 1.继电器选择(可调节时间的继电器) 2.继电器与esp8266的接线[set --- D6,UP --- D5,DOWN --- D1] 3.Arduino 程序 ...
- Linux\CentOS 安装 vsftpd 服务器
安装 查看电脑是否存在 vsftpd 服务器 rmp -qa|grep vsftpd 如果有就删除,没有就使用yum 安装 vsftpd yum -y install vsftpd 配置 在根目录下创 ...
- JVM集训-----内存结构
一.程序计数器/PC寄存器 (Program Counter Registe) 用于保存当前正在执行的程序的内存地址(下一条jvm指令的执行地址),由于Java是支持多线程执行的,所以程序执行的轨迹不 ...
- 获取单列集合,双列集合,数组的Stream流对象以及简单操作
获取流对象 获取单列集合,双列集合,数组的流对象 单列集合获取流对象: 1.java.util.Collection接口中加入了default方法stream()获取流对象,因此其所有实现类均可通过此 ...
- Openlayers ol.interaction.Select传值问题
说明: 在使用ol.interaction.Select时,我定义的变量作用域作用不到其回调函数里,但我在select结果中,需要用到这些变量 解决方案: 虽想了个办法解决了,但不知道是不是合理:是否 ...
- C#面向对象--命名空间
一.在C#中,使用命名空间(Namespace)可以帮助控制自定义类型的作用范围,同时对大量的类型进行组织:使用namespace关键字声明命名空间,命名空间可以嵌套使用: namespace MyN ...
- vi指令详解
★ vi的模式(命令模式.插入模式.ex模式) 1)命令模式: 在我们刚刚通过vi新建或打开一个已经存在的文件时,首先默认被读取的模式就是“命令模式”,命令模式的特征就是,在编辑器窗口左下角的位置上没 ...
- PringData JPA一对多多对一多对多关联
一.一对多.多对一 1.Country实体类 2.City实体类 3.CountryDao层 4.CityDao层 5.Controller package com.zn.controller; im ...
- Objective-C (OC)
1.OC 运行效率比较高,仅次于c.开发过程时,效率也比较高,不会次于java和C++: :表示继承 “{}”之间写字段或声明 }和@end之间写函数 import 相当于include 作用于和j ...
- rsync工具、rsync常用选项、以及rsync通过ssh同步 使用介绍
第8周5月14日任务 课程内容: 10.28 rsync工具介绍10.29/10.30 rsync常用选项10.31 rsync通过ssh同步 10.28 rsync工具介绍 rsync是一个同步的工 ...