[WIP] 一个基于Angular最新版搭建的博客类小项目
路由
一个配置了路由的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的数据具有“实时性”。不一致的情况经常出现在一些异步代码中。
如果你看到这里,觉得内容有误或有可改进之处,欢迎你的提出~