Angular2.0我爱编程

Angular2修仙之路

2018-05-10  本文已影响26人  杀个程序猿祭天

原网址:https://www.tuicool.com/articles/2qieEfq

Angular 2 修仙之路

时间 2017-04-06 10:46:32  稀土掘金

原文  https://juejin.im/post/58e5a9c22f301e00622bf4f1

主题 AngularJS

相较于之前分享的修仙之路目录,增加了较多新的内容。

Angular 2 组件学习线路 (仅供参考)

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

Angular 2 Template Syntax & Common Directives

了解 Angular 2 模板语法和常用内建指令

Angular 2 Directive

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

Angular 2 Directive Lifecycle

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

Angualr 2 constructor & ngOnInit

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

Angular 2 ViewEncapsulation

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

Angular 2 Input

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

Angular 2 Output

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

Angular 2 ViewChild & ViewChildren

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

Angular 2 ContentChild & ContentChildren

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

Angular 2 HostListener & HostBinding

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

Angular 2 ElementRef

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

Angular 2 TemplateRef & ViewContainerRef

了解 TemplateRef 及 ViewContainerRef 的应用

Angular 2 Components Communicate

了解组件通信的常用方式

Angular 2 Component Inheritance

了解组件继承相关知识

Angular 2 Change Detection - 1 、 Angular 2 Change Detection - 2

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

Angular 2 vs Angular 1

Angular 2 NgModule vs Angular 1 module

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

Angular 2 Service vs Angular 1 Service

涉及 Angular 2 和 Angular 1 如何定义 service及使用方式

Angular 2 Pipe vs Angular 1 filter

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

Angular 2 ngFor vs Angular 1 ng-repeat

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

Provider

Angular 2 Provider

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

Angular 2 Multi Providers

涉及 multi provider 作用及 Angular 2 内部应用

Angular 2 Forward Reference

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

Angular 2 OpaqueToken & InjectionToken

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

Directive(指令)

Angular 2 Template Syntax & Common Directives

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

Angular 2 Directive

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

Angular 2 Directive Lifecycle

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

Angular 2 Components Communicate

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

Angular 2 Component Inheritance (开发中)

涉及组件继承相关知识

Decorator(装饰器)

Angular 2 Decorator - 1

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

Angualr 2 Decorator - 2

涉及 Angular 2 类装饰器、属性装饰器、方法装饰器、参数装饰器示例

Angular 2 Decorator - 3

涉及 Angular 2 Metadata 分类:annotations、design:paramtypes、propMetadata、parameters 及映射关系

Angular 2 Input

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

Angular 2 Output

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

Angular 2 Inject Decorator

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

Angular 2 ViewChild & ViewChildren

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

Angular 2 ContentChild & ContentChildren

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

Angular 2 HostListener & HostBinding

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

Pipe(管道)

Angular 2 Pipe

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

Angular 2 AsyncPipe

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

Dependency Injection(依赖注入)

Angular 2 DI - IoC & DI - 1

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

Angualr 2 DI - 2 (未完成)

Change Detection(变化检测)

Angular 2 Change Detection - 1

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

Angular 2 Change Detection - 2

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

Http

Angular 2 Http Module - HTTP

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

Angular 2 Http Module - XMLHttpRequest

涉及 AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解、XHR 上传、下载数据、XHR 流式传输、XHR 定时轮询和长轮询区别与优缺点、XMLHttpRequest 常用代码片段、常见问题等

Angular 2 Http Module - 3 (未完成)

Angular 2 Http Interceptor (未完成)

Form(表单)

Angular 2 Template Driven Forms (未完成)

Angular 2 Template Reactive Forms (未完成)

Angular 2 Custom Form Controls (未完成)

Angular 2 Custom Validators (未完成)

Compiler(编译器)

Angular 2 JIT vs AOT

涉及 Just-In-Time & Ahead-Of-Time、JIT vs AOT 、AOT 详解、AOT 实战等

Angular 2 Compiler (未完成)

Reference Object(引用对象)

Angular 2 ElementRef

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

Angular 2 TemplateRef & ViewContainerRef

涉及 HTML 5 template、TemplateRef 及 ViewContainerRef 的应用,此外介绍了 Angular 2 视图类型、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 2 RxJS Subject 应用、BehaviorSubject、ReplaySubject、AsyncSubject 等

Others(其他)

Angular 2 ViewEncapsulation

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

Angualr 2 constructor & ngOnInit

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

Angular 2 DomSanitizer

涉及 Cross-site scripting、Angular 2 XSS 防护、DomSanitizer、自定义 keepHtml 指令等

上一篇 下一篇

猜你喜欢

热点阅读