共计 1709 个字符，预计需要花费 5 分钟才能阅读完成。
前言：因为项目需要学习了一下 Angular，按照官网的教程做了一个简单粗糙的小项目。大致的功能有博客的新建，删除，查看详情，列表展示。使用内存 Web API 模拟远程服务器，进行数据操作。临时安排的变动，可能没有太多的时间持续研究，所以现在这里记录一下。以下是我边学习边记的一些笔记，方便日后回来可以快速回忆起相关技术点。
路由
一个配置了路由的 Angular 应用有一个路由服务的单例。当浏览器的 url 改变的时候，路由就会去配置里找到相应的路由信息，根据该路由就可以决定展示哪一个组件。路由器会把类似 URL 的路径映射到视图而不是页面。浏览器本应该加载一个新页面，但是路由器拦截了这一行为。<router-outlet> 标签官网上说它起到了 placeholder 的作用，当路由根据 url 找到要展示的组件时，就会把这个组件填充到 <router-outlet> 中去。获取路由中的参数信息：+this.route.snapshot.paramMap.get(‘id’);route.snapshot 是一个路由信息的静态快照，抓取自组建刚刚创建完毕之后 paramMap 是一个从 URL 中提取的路由参数值的字典。javascript(+) 操作符会把字符串转为数字
数据绑定
用指令 [(ngModel)]=”data.content” 可实现遇到报错 在 app.module 中导入 import {FormsModule} from ‘@angular/forms’;
HTTP 获取资源
主要是使用了 common 包下的 HttpClientModule 这一个模块，使用它则需要把它先导入进 app.module 中，然后在需要用到的 service 中导入相应的模块，例如 HttpClient，HttpHeaders 等。HttpClient 提供了很丰富的 Http 协议的请求方法。实际使用时可参考源码。请求失败处理：catchError() 操作符会拦截失败的 Observable。它把错误对象传给错误处理器，错误处理器会处理这个错误。因此异常被处理后，浏览器的控制台不会报错。
状态管理 ngrx
与 Redux 的关系：ngrx/store 的灵感来源于 Redux，是一款集成 RxJS 的 Angular 状态管理库，由 Angular 的布道者 Rob Wormald 开发。它和 Redux 的核心思想相同，但使用 RxJS 实现观察者模式。它遵循 Redux 核心原则，但专门为 Angular 而设计。Actions（行为）是信息的载体，它发送数据到 reducer（归约器），然后 reducer 更新 store（存储）。Actions 是 store 能接受数据的唯一方式。
组件化思想
把所有特性都放在同一个组件中，将会使应用变得难以维护。因此需要把大型组件分成小一点的子组件，每个子组件都要集中经历处理某个特定的任务或者工作流。
依赖注入
DI，是一种重要的应用设计模式。实现方式：类从外部源中请求获取依赖，无需自己创建。DI 框架会在实例化该类时向其提供这个类所声明的依赖项。@Injectable() 装饰器是每个 Angular 服务定义中的基本要素，把当前类标志为可注入的服务。注入器：负责创建服务实例提供商：告诉注入器如何创建实例
服务
组件不直接获取或者保存数据，而是把这一块的功能放在 service 中，让组件专注于如何展示数据，如此开发使得项目的每个模块功能更加明确。service 里的方法应该都是异步的。Observable(可观察对象) 的版本可以实现。
ES6 相关
一个模块从另一个模块 import 进来，若是
一个值：直接取值取到的是一个会被缓存的结果（例如获取 WebStorage 中更新的值，必须要刷新页面）
函数，获取一个值的引用，会调用该函数，取到最新的值
控制台输出与 Debug
有时候会发现控制台输出的结果与直接在 js 文件里进行 debug 所显示的结果不一致，那是因为，console.log() 采用了懒加载的机制，它展示的是一个引用的值，当你点击三角箭头的时候，它会去加载当前变量的值。但 debug 的数据具有“实时性”。不一致的情况经常出现在一些异步代码中。
如果你看到这里，觉得内容有误或有可改进之处，欢迎你的提出~
