Angular 4.x 修仙之路

阅读 Angular 6/RxJS 最新教程，请访问前端修仙之路

本人的前端修仙之路订阅号，会定期分享 Angular、RxJS、TypeScript 和 Node.js 相关文章，欢迎感兴趣的小伙伴订阅哈！

近期回答了 SF 上和 QQ 群里面的一些问题，发现一些问题对初学者来说，都可能会遇到。个人精力有限，建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路(1)群 - 153742079 (已满)，请加 Angular 修仙之路(2)群 - 648681235。此外该文章也会持续更新，希望有兴趣的读者多提建议哈，谢谢！

首先自我介绍一下：我不是"大神"，因为还在修仙中哈。下面是在学习 Angular 过程中整理的学习笔记，希望对大家能有所帮助，更详细和更权威的学习资源，请大家阅读官方文档。另外，本系列的出发点是从点到面的思路，把 Angular 中的知识点打散掉，然后逐一介绍，尽量会使用简单的示例，让大家基础掌握每个知识点，最后才会通过具体实例把知识点串起来。(不喜欢该方式的读者，请见谅哈)

Angular 6.x 新版教程

• 入门篇

  • Angular 6 快速入门
  • Angular 6 基础教程
  • Angular 6 管道快速入门
  • Angular 6 表单快速入门
  • Angular 6 指令快速入门
  • Angular 6 HttpClient 快速入门
  • Angular Library 快速入门

• 工具篇

  • Angular 工具篇之文档管理
  • Angular 工具篇之规范化Git版本管理
  • Angular 工具篇之VSCode调试
  • Angular 工具篇之Storybook
  • Angular 工具篇之国际化处理
  • Angular 工具篇之npx及angular-cli-ghpages
  • Angular 工具篇之分析包的大小

• 服务篇

  • Angular Meta Service 详解
  • Angular Title Service 详解

• Provider篇

  • Angular Multi Providers 和 APP_INITIALIZER

• Element篇

  • Angular ViewChild和ViewChildren
  • Angular ng-template vs ng-container
  • Angular 内容投影

• RxJS篇

  • RxJS Observable
  • 创建 Observable
  • RxJS mergeMap和switchMap
  • RxJS 处理多个Http请求

Angular 4.x 快速入门

• Angular 4 快速入门

  • 涉及 Angular 简介、环境搭建、插件表达式、自定义组件、表单模块、Http 模块等

• Angular 4 基础教程

  • 涉及 Angular CLI 使用、创建组件、事件、自定义服务、 ngFor 指令、Input、Output 装饰器等

• Angular 4 指令快速入门

  • 涉及如何创建指令、定义输入属性、事件处理、如何获取宿主元素属性值、如何创建结构指令等

• Angular 4 表单快速入门

  • 涉及如何创建表单、表单验证、表单控件状态、单选控件、多选控件的使用等

• Angular 表单简介

  • 涉及 Template-driven 表单与 Reactive 表单的特点、表单控件状态、Reactive 表单简介等

• Angular 4.x 路由快速入门

  • 涉及路由简介、如何配置路由、动态路由、子路由、路由指令及路由相关 API 等

• TypeScript 简介

  • 涉及 TypeScript 数据类型、复合类型、箭头函数、可选参数、默认参数、对象解构、数组解构等

Angular 4.x 组件学习线路 (仅供参考)

对于刚从 Angular 1.x 转到 Angular 4.x 的用户，建议先阅读一下 Angular 4.x vs Angular 1.x 章节 (目前还不够完善)。下面提供的学习线路仅供参考，读者可以自行选读。该学习线路基本包含 Angular 4.x 组件相关知识，如果有遗漏，欢迎大家指出。(友情提示：初学者不用完整了解每个部分的内容，特别是设计源码分析的部分，只需了解基本用法，然后多实践哈)

• Angular 4.x Template Syntax & Common Directives

  • 了解 Angular 4.x 模板语法和常用内建指令(更新ngIf...Else)

• Angular 4.x Directive

  • 了解指令与组件的区别及Metadata信息

• Angular 4.x Directive Lifecycle

  • 了解常用的 ngOnInit、ngOnChanges、ngAfterViewInit、ngAfterContentInit 声明周期钩子和触发顺序

• Angular 4.x constructor & ngOnInit

  • 了解 constructor 与 ngOnInit 钩子的应用场景

• Angular 4.x ViewEncapsulation

  • 了解 ViewEncapsulation 三种封装模式的区别

• Angular 4.x Input

  • 了解 @Input() 装饰器的用法，掌握如何实现父 -> 子组件通信

• Angular 4.x Output

  • 了解 @Output() 装饰器的用法，掌握如何实现子 -> 父组件通信

• Angular 4.x ViewChild & ViewChildren

  • 了解 @ViewChild()、@ViewChildren() 装饰器用法，掌握如何获取子组件

• Angular 4.x ContentChild & ContentChildren

  • 了解 @ContentChild()、@ContentChildren() 装饰器用法及与@ViewChild()、@ViewChildren() 装饰器的区别

• Angular 4.x HostListener & HostBinding

  • 了解宿主元素的概念及 @HostListener()、@HostBinding() 装饰器的作用

• Angular 4.x ElementRef

  • 了解 ElementRef 的作用、定义及应用、Renderer API 常用方法

• Angular 4.x TemplateRef & ViewContainerRef

  • 了解 TemplateRef 及 ViewContainerRef 的应用

• Angular 4.x Components Communicate

  • 了解组件通信的常用方式

• Angular 4.x Component Inheritance

  • 了解面向对象中类和继承的概念及Angular 4.x 组件继承的应用

• Angular 4.x Change Detection - 1、Angular 4.x Change Detection - 2

  • 了解 Angular 4.x 变化检测、组件变化检测器及OnPush 策略、Mutable & Immutable、ChangeDetectorRef、Observables 等内容

Angular 4.x vs Angular 1.x

• Angular 4.x NgModule vs Angular 1 module

  • 涉及 Angular 1.x 根模块、子模块及 Angular 4.x 根模块、根组件、子组件的定义使用

• Angular 4.x Service vs Angular 1 Service

  • 涉及 Angular 4.x 和 Angular 1 如何定义 service及使用方式

• Angular 4.x Pipe vs Angular 1 filter

  • 涉及 Angular 自定义管道(过滤器)、管道(过滤器)传参、管道对象($filter) 服务的使用

• Angular 4.x ngFor vs Angular 1 ng-repeat

  • 涉及 Angular *ngFor(ng-repeat) 指令使用、index($index)、trackBy(track by ) 的应用的区别

Provider

• Angular 4.x Provider

  • 涉及 useClass、useValue、useExisting、useFactory 及 Provider 使用方式

• Angular 4.x Multi Providers

  • 涉及 multi provider 作用及 Angular 4.x 内部应用

• Angular 4.x Forward Reference

  • 涉及 forwardRef 的作用及内部工作原理，同时解释 JavaScript 解释器不能自动提升 Class

• Angular 4.x OpaqueToken & InjectionToken

  • 涉及使用字符串作为 Token存在问题，详细介绍如何使用 OpaqueToken、InjectionToken 解决问题

Directive(指令)

• Angular 4.x Template Syntax & Common Directives

  • 涉及模板语法、常用指令简介及 NgStyle 指令解析、*ngFor trackBy 应用等

• Angular 4.x Directive

  • 涉及指令分类、Angular 4.x 内置属性指令、结构指令、*directive 结构指令语法糖、自定义属性指令、结构指令等

• Angular 2.x 结构指令

  • 涉及结构指令定义、* 号语法及具体应用示例

• Angular 4.x Directive Lifecycle

  • 涉及指令与组件的区别、指令生命周期钩子的作用及调用顺序、生命周期钩子详解、Angular 4.x LifecycleHooks、SimpleChanges 相关接口等

• Angular 4.x NgIf

  • 涉及 NgIf 指令作用、语法、基础用法及 NgIf 指令源码分析

• Angular 4.x NgForOf

  • 涉及 NgForOf 指令作用、语法、基础用法及 NgForOf 指令源码分析

• Angular 4.x NgTemplateOutlet

  • 涉及 NgTemplateOutlet 指令作用、语法、基础用法及 NgTemplateOutlet 指令源码分析

• Angular 中自定义 Debounce Click 指令

  • 涉及 Directive API 来创建自定义 debounce click 指令，用于处理指定时间内多次点击事件

• Angular 4.x Components Communicate

  • 涉及组件通信的常用方式：@Input、@Output、@ViewChild、模板变量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $on、$broadcast ) 和 Pub - Sub 模式、RxJS Subject 存在的问题

• Angular 4.x Pass Async Data

  • 涉及父子组件通信时，处理异步输入属性的方案

• Angular 4.x Component Inheritance

  • 涉及面向对象中类和继承的概念及Angular 4.x 组件继承的应用及注意事项

• Angular 4.x Dynamically Creating Components

  • 涉及 Angular 中如何动态创建组件及介绍 指令的作用

Decorator(装饰器)

• Angular 4.x Decorator - 1

  • 涉及装饰器定义和分类、TypeScript 类装饰器、属性装饰器、方法装饰器、参数装饰器等

• Angualr 4.x Decorator - 2

  • 涉及 Angular 4.x 类装饰器、属性装饰器、方法装饰器、参数装饰器示例

• Angular 4.x Decorator - 3

  • 涉及 Angular 4.x Metadata 分类：annotations、design:paramtypes、propMetadata、parameters 及映射关系

• Angular 4.x Input

  • 涉及 @Input、@Input('bindingPropertyName')、@Component() - inputs、setter & getter 、ngOnChanges 等

• Angular 4.x Output

  • 涉及 @Output、@Output('bindingPropertyName')、@Component() - outputs、Two-Way Data Binding、[()] 语法示例、ngModel 等

• Angular 4.x Inject Decorator

  • 涉及 @Inject 装饰器的作用、实际应用及内部实现，并解释了非 Type 类型的参数只能用 @Inject(Something) 的方式注入的原因，此外还介绍了 @Injectable、Reflect API 等

• Angular 4.x ViewChild & ViewChildren

  • 涉及 @ViewChild、@ViewChildren 装饰器使用及 @ViewChild 装饰器原理详解

• Angular 4.x ContentChild & ContentChildren

  • 涉及 @ContentChild、@ContentChildren 装饰器使用及 @ContentChild 接口及装饰器，同时介绍了 Content Projection (内容投影) 的概念及 @ContentChild 与 @ViewChild 装饰器的区别等

• Angular 4.x HostListener & HostBinding

  • 涉及 Host Element、HostListener 装饰器定义及应用、Host Event Listener、HostBinding 装饰器定义及应用、Host Property Bindings 等

Pipe(管道)

• Angular 4.x Pipe

  • Angular 4.x 内建管道分类及使用示例、管道参数、管道链、自定义管道、管道分类、管道探秘等

• Angular 4.x AsyncPipe

  • 涉及 AsyncPipe with Promise、AsyncPipe with Observables、使用 AsyncPipe 重复发送请求的解决方案及 AsyncPipe 内部执行流程 (源码解析)

Dependency Injection(依赖注入)

• Angular 4 依赖注入教程之一 依赖注入简介

  • 涉及依赖注入的基础知识及在 Angular 中的应用

• Angular 4 依赖注入教程之二 组件服务注入

  • 涉及 Angular 服务的定义及组件中服务的注入方式

• Angular 4 依赖注入教程之三 ClassProvider的使用

  • 涉及 Angular 中 ClassProvider 的基础知识及使用

• Angular 4 依赖注入教程之四 FactoryProvider的使用

  • 涉及 Angular 中 FactoryProvider 的基础知识及使用

• Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象

  • 涉及 Angular 中 FactoryProvider 如何配置依赖对象

• Angular 4 依赖注入教程之六 Injectable 装饰器

  • 涉及 Angular 中 Injectable 装饰器的作用

• Angular 4 依赖注入教程之七 ValueProvider的使用

  • 涉及 Angular 中 ValueProvider 的基础知识及使用

• Angular 4 依赖注入教程之八 InjectToken的使用

  • 涉及 Angular 中 InjectToken 的基础知识及作用

• Angular 4.x IoC & DI

  • 涉及 IoC 和 DI、DI 在 AngularJS 1.x 中的应用、内部工作原理及存在的问题等

• Angular 4.x Injector

  • 涉及依赖注入的概念及Angular 4.x 注入器的内部实现

Change Detection(变化检测)

• Angular 4.x Change Detection - 1

  • 涉及变化和变化触发源、Zones、NgZone 及如何访问 Zone 打补丁前的方法，如 setTimeout、clearTimeout 等

• Angular 4.x Change Detection - 2

  • 涉及组件和变化检测器、OnChanges、变化检测性能优化、OnPush 策略、Mutable & Immutable、ChangeDetectorRef、Observables 等

Http

• Angular 4.x Http Module - HTTP

  • 涉及 B/S、URI、MIME、HTTP请求和响应报文、HTTP 请求方法和状态码，并收录了 HTTP 经典教程和相关工具，如 Cookie 与 Session、HTTP 缓存、CORS、HTTP/2、HTTPS及常用的HTTP抓包工具、Chrome相关插件、各平台HTTP包、压力测试工具等

• Angular 4.x Http Module - XMLHttpRequest

  • 涉及 AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解、XHR 上传、下载数据、XHR 流式传输、XHR 定时轮询和长轮询区别与优缺点、XMLHttpRequest 常用代码片段、常见问题等
• Angular 4.x HttpModule 脑图(思维导图)

• Angular 4.x HttpModule Reveal(源码揭秘)

  • 涉及 HTTP 协议、HTTP 请求报文、HTTP 响应报文、HttpModule Request、Response、RequestOptions、ResponseOptions、XHRBackend 对象等

• 使用 RxJS 处理多个 Http 请求

  • 涉及使用 RxJS mergeMap 和 forkJoin 操作符处理多个 Http 请求

• 激动人心的 Angular HttpClient

  • 涉及 Angular 4.3 版本中 HttpClient 的主要特性，如默认 JOSN 解析、支持拦截器和进度事件等

• Angular HTTP Client 快速入门

  • 涉及 Angular 4.3 版本中 HttpClient 的使用示例，如发送 Get 请求、设置查询参数、设置请求头、发送其它 Http 请求、并行发送多个请求、顺序发送 Http 请求、异常处理、拦截器和进度事件等

Form(表单)

• Angular 表单控件示例

  • 涉及 Template-driven 表单常用控件，如 text、radio、select (基本类型、对象)、multi select、cascading select (级联)、multi checkbox 等控件的使用

• Angular 4.x Template Driven Forms

  • 涉及 ngModel、[ngModel]、[(ngModel)]、ngModelGroup、Template-Driven error validation

• Angular 4.x Reactive Forms

  • 涉及 FormControl、FormGroup、Reactive Submit、Reactive Forms error validation、FormBuilder

• Angular 4.x Reactive Form 表单验证

  • 涉及 Reactive 表单内建验证规则、动态调整验证规则、自定义验证器、跨字段验证等

• Angular 4.x 基于AbstractControl自定义表单验证

  • 涉及 FormGroup、FormBuilder与FormGroup源码、AbstractControl、自定义验证规则等

• Angular 4.x Custom Form Control

  • 涉及 ControlValueAccessor、自定义验证规则等

• Angular 4.x Custom Validator Directive

  • 涉及 required、email、minlength 等内建 validators、自定义验证指令

• Angular 4.x Forms patchValue and setValue

  • 涉及 FormControl 和 FormGroup 类 patchValue() 和 setValue() 方法的使用和区别

• Angular 4.x ngModel 双向绑定原理揭秘

  • 涉及 ngModel 使用示例(单向绑定、双向绑定、ngModelOptions、disabled等)及ngModel 双向绑定实现原理

• Angular 4.x Creating Dynamic Form

  • 涉及动态创建表单的相关内容

Router

• Angular 4.x 路由快速入门

  • 涉及路由配置、动态路由、子路由、routerLink、routerLinkActive 指令及 Router API。

• Angular 4.x LocationStrategy

  • 涉及 History 对象、Hash 模式和 HTML 5模式及 Angular 中的HashLocationStrategy 和 PathLocationStrategy 策略。

• Angular 4.x Router Link Directives

  • 涉及 Angular 4.x Router 中 RouterLink、RouterLinkWithHref 及 RouterLinkActive 指令的相关内容

Events

• Angular 4.x Events Bubbling

  • 涉及 Angular 4.x 中事件冒泡机制及介绍如何基于 Angular 指令系统，实现阻止冒泡指令

• Angular 4.x EventManager & Custom EventManagerPlugin

  • 涉及 Angular 4.x 中 EventManager (事件管理器) 工作原理及介绍如何自定义 EventManagerPlugin 插件

Compiler(编译器)

• Angular 4.x JIT vs AOT

  • 涉及 Just-In-Time & Ahead-Of-Time、JIT vs AOT 、AOT 详解、AOT 实战等
• Angular 4.x Compiler (未完成)

Reference Object(引用对象)

• Angular 4.x ElementRef

  • 涉及 ElementRef 的作用、定义及应用、Renderer API 常用方法

• Angular 4.x TemplateRef & ViewContainerRef

  • 涉及 HTML 5 template、TemplateRef 及 ViewContainerRef 的应用，此外介绍了 Angular 4.x 视图类型、ViewRef 与 EmbeddedViewRef 之间的关系等

RxJS

• Functional Programming

  • 涉及函数式编程概念、基础条件、重要特性、优势、常用方法等

• Observable

  • 涉及观察者、迭代器模式、Observable提案、自定义Observable、Create Operators、Observer、Pull vs Push、Observable vs Promise 等

• Operators

  • 涉及 Marble diagrams、Create Operators、Transformation Operators、Filtering Operators、Combination Operators、Utility Operators 等

• Subject

  • 涉及观察者模式定义、结构及实战、Observable subscribe、自定义 Subject、RxJS Subject、Angular 4.x RxJS Subject 应用、BehaviorSubject、ReplaySubject、AsyncSubject 等

• RxJS - Observables, observers 和 operators 简介

  • 涉及自定义 Observable、Operators 的相关知识

• 自定义 toJSON 操作符

  • 涉及 RxJS 中自定义操作符的相关知识

Others(其他)

• Angular 4.x ViewEncapsulation

  • 涉及 Web Components、Shadow DOM 及 ViewEncapsulation 三种封装模式的区别

• Angular 4.x constructor & ngOnInit

  • 涉及 constructor、ngOnInit、constructor & ngOnInit 应用场景等

• Angular 4.x DomSanitizer

  • 涉及 Cross-site scripting、Angular 4.x XSS 防护、DomSanitizer、自定义 keepHtml 指令等

• Angular NgModule 作用域相关问题

  • 涉及 Angular NgModule 作用域的相关问题

• Angular CLI 终极指南

  • 涉及 Angular CLI 简介及详细介绍了 Angular CLI 支持的功能，如新建项目、单元测试、项目构建等

• ng-conf-2017 - Angular Form Validation

  • 涉及表单验证概述、同步验证、异步验证及表单验证执行流程等

• Angular 中何时取消订阅

  • 涉及 Angular 需手动释放资源和无需手动释放资源的场景

• Angular 开发者常犯的错误

  • 涉及 Angular 开发过程中，常犯的错误，如 ngOnChanges vs ngDoCheck、未及时释放资源、额外取消订阅操作等内容

• ng-content 中隐藏的内容

  • 涉及 targeted projection、ngProjectAs 及 ng-content 使用过程中可能遇到的问题及解决方案。

• Angular Renderer (渲染器)

  • 涉及 Angular 中平台和渲染器的概念、Angular 渲染器工作原理、DefaultDomRenderer2 及 DomRendererFactory2 内部应用

• TypeScript 资源集

  • 涉及 TypeScript 技术选型、教程、项目实战、中英文视频教程和中英文书籍等

---

PWA

• PWA 学习笔记之 fetch API
• PWA 学习笔记之 CacheStorage API
• PWA 学习笔记之 Service Workers
• PWA 学习笔记之 Service Workers Cache Control
• PWA 学习笔记之 Web Notifications API
• PWA 学习笔记之 Push API

Node.js

深入学习 Node.js

• 深入学习 Node.js EventEmitter
• 深入学习 Node.js Buffer
• 深入学习 Node.js Module
• 深入学习 Node.js Module 进阶篇
• 深入学习 Node.js Http 基础篇
• 深入学习 Node.js Http
• 深入学习 Node.js Net

Sequelize 系列教程

• Sequelize系列教程之快速入门
• Sequelize 系列教程之一对一模型关系
• Sequelize 系列教程之一对多模型关系
• Sequelize 系列教程之多对多模型关系

TypeScript Design Patterns

Creational（创建型模式）

• Singleton
• Abstract Factory
• Factory Method
• Builder
• Prototype

Structural Patterns（结构型模式）

• Adapter
• Decorator
• Facade
• Flyweight
• Proxy

Behavioral Patterns（行为型模式）

• Chain of Responsibility
• Iterator
• Mediator
• Observer
• State
• Strategy
• Template Method