[WIP] 一个基于Angular最新版搭建的博客类小项目

前言：因为项目需要学习了一下Angular，按照 官网的教程做了一个 简单粗糙的小项目。大致的功能有博客的 新建，删除，查看详情，列表展示。使用内存Web API模拟远程服务器，进行数据操作。临时安排的变动，可能没有太多的时间持续研究，所以现在这里记录一下。 以下是我边学习边记的一些笔记，方便日后回来可以快速回忆起相关技术点。

路由

一个配置了路由的Angular应用有一个路由服务的单例。当浏览器的url改变的时候，路由就会去配置里
找到相应的路由信息，根据该路由就可以决定展示哪一个组件。
路由器会把类似URL的路径映射到视图而不是页面。浏览器本应该加载一个新页面，但是路由器拦截了这一行为。
标签官网上说它起到了placeholder的作用，当路由根据url找到要展示的组件时，就会把这个组件填充到中去。
获取路由中的参数信息： +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的数据具有“实时性”。不一致的情况经常出现在一些异步代码中。

如果你看到这里，觉得内容有误或有可改进之处，欢迎你的提出~