【读书笔记】Angular 初次接触

日期：2018年9月29日 09点23分 - 18点00分看，2018年9月30日 复习 Route、HTTP，2018年10月2日 23点55分 补写笔记，2018年10月8日 09点36分 补路由部分

地点：玉泉慧谷，家

参考：

• Angular 官网 - Getting Started（https://angular.io/guide/quickstart）
• Angular 官网 - Tutorial（https://angular.io/tutorial）

---

目录

一、记录

二、快速起步 - 内容

三、项目文件概览

四、教程 - 内容

（一）概览

（二）应用壳子

（三）Hero 编辑器

（四）显示列表

（五）主/从组件

（六）服务

（七）路由

---

---

---

 

一、记录

有点时间，看下 Angular。之前简单看了下 Vue.js，感觉需要自己做选择的地方比较多。相较之下，Angular 更像是一揽子解决方案。

09点23分 - 09点56分 QuickStart 前半部分

09点56分 - 10点11分 QuickStart 回顾项目文件

10点12分-10点29分 Tutorial 简介

二、快速起步 - 内容

• 设置开发环境
• 创建新的项目
• 启动应用
• 编辑你的第一个 Angular 组件

三、项目文件概览

略

四、教程 - 内容

• 概览
• 应用壳子
• Hero 编辑器
• 显示列表
• 主/从组件
• 服务（Services）
• 路由（Routing）
• HTTP

（一）概览

将要构建的应用：

• 2 个列表视图，支持添加、删除 item（单向数据绑定、HTTP服务）
• 1 个详情页，支持编辑 item（双向数据绑定、HTTP服务）
• 在 3 个视图间切换（路由）

（二）应用壳子

操作步骤：

• 安装 Angular CLI
• 新建 Angular 应用
• 启动应用
• Angular 组件
• 修改应用的 title
• 添加应用样式 styles

（三）Hero 编辑器

操作步骤：

• 新建 heroes 组件（添加 hero 属性，展示 hero）（类的属性，插值）
• 展示 HeroesComponent 视图
• 新建 Hero 类（实体类 Entity Class），在 HeroesComponent 组件中新建一个 hero 对象
• 展示 hero 对象
• 用 Uppercase pipe 格式化数据
• 编辑 hero（双向数据绑定[(ngModel)]、缺失的 FormsModule）
• 根模块 AppModule（导入 FormsModule、声明 HeroesComponent[使用命令行创建时，已自动声明]）

（四）显示列表

操作步骤：

• 新建模拟 heroes 数据
• 展示 heroes（使用 *ngFor 展示列表、为 heroes 添加样式）
• 主/从（添加 click 事件绑定、添加 click 事件处理器、更新 detail 模板、用 *ngIf 隐藏空的 detail 模板、为被选中的 item 添加样式）

（五）主/从组件

操作步骤：

• 新建 HeroDetailComponent 组件（添加模板、添加 @Input 注解[用于从父组件获取数据]）
• 展示 HeroDetail Component 组件（更新 HeroesComponent 模板）
• 有什么变化（组件减少职责，简化 HeroesComponent 组件；可以继续丰富 Detail 组件的功能，而不需要改动 Heroes 组件；可以继续丰富 Heroes 组件的功能，而不需要改动 Detail 组件；可以重用 Detail 组件）

（六）服务

操作步骤：

• 为什么使用服务（组件不应直接获取、保存数据，组件也不需要知道呈现的是真实或模拟的数据，组件应专注于展示数据，把数据访问委托给服务）
• 新建 HeroService 服务（@Injectable 注解，获取数据）
• 提供 HeroService
• 更新 HeroesComponent 组件（注入 Hero 服务；添加 getHeroes() 方法；生命周期钩子中调用 getHeroes() 方法；运行）
• Observable 数据（Observable Hero 服务；在 Heroes 组件中订阅数据）（异步数据访问）
• 展示消息（新建 Messages 组件；新建 Message 服务；注入 Hero 服务；在 Hero 服务中发送消息；在 Hero 服务中展示消息；绑定 MessageService 服务）

（七）路由

操作步骤：

• 添加 AppRoutingModule（添加 routes、RouterModule.forRoot()）
• 添加 RouterOutlet
• 添加导航链接（routerLink）
• 添加 dashboard 视图（添加 dashboard 路由、添加默认路由、把 dashboard 链接添加到框架中）
• 导航到 hero 详情（从 HeroesComponent 中删除 hero 详情、添加 hero 详情路由、Dashboard hero 链接、HeroesComponent hero 链接）
• 可以导航的 HeroDetailComponent（获取 id 路由参数、添加 HeroService.getHero() 方法、添加返回链接）

（八）HTTP【TODO】