Angular 4.x 修仙之路

5,796 阅读8分钟

查看新版教程,请访问前端修仙之路

近期回答了 SF 上和 QQ 群里面的一些问题,发现一些问题对初学者来说,都可能会遇到。个人时间有限,希望建个群,借助大家的力量,记录汇总每个遇到的问题,然后整理成 Angular FAQ! 有兴趣的朋友可以加一下 QQ 群:Angular 修仙之路 - 153742079 (群名称规则:城市 + 昵称)

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

工作需要我们撸起了 Ionic 2,为了方便的记录学习资料,我整理了一份 Angular 2 和 Ionic 2 的学习资料,放到了 GitHub 上,有兴趣的童鞋,可以了解一下(有好的学习资源,帮忙推荐哈)。

更新时间 - 2017-05-05

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

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

Angular 4.x vs Angular 1.x

Provider

Directive(指令)

Decorator(装饰器)

  • Angular 4.x Decorator - 1
    • 涉及装饰器定义和分类、TypeScript 类装饰器、属性装饰器、方法装饰器、参数装饰器等
  • Angular 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.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 对象等
  • Angular 4.x Http Interceptor (未完成)

Form(表单)

Router

Events

Compiler(编译器)

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

Reference Object(引用对象)

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 等

Others(其他)