日期：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）
目录
一、记录
有点时间，看下 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】