Angular 4.x 修仙之路

头像
阿宝哥
    阅读 11 分钟
    427
    阅读更多关于 Angular、TypeScript、Node.js/Java 、Spring 等技术文章，欢迎访问我的个人博客 —— 全栈修仙之路

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

    abao-qrcode.png

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

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

    Spring 技术栈

    Java 进阶

    工具篇

    Spring boot 2.x

    Spring Security 5.2.x

    Angular 6.x 新版教程

    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 vs Angular 1.x

    Provider

    Directive(指令)

    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(依赖注入)

    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(表单)

    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 等

    • RxJS - Observables, observers 和 operators 简介

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

    • 自定义 toJSON 操作符

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

    Others(其他)

    PWA

    Node.js

    深入学习 Node.js

    Sequelize 系列教程

    TypeScript Design Patterns

    Creational（创建型模式）

    Structural Patterns（结构型模式）

    Behavioral Patterns（行为型模式）

    pwaangularjsangular4
    阿宝哥
    15.8k 声望10.2k 粉丝

    聚焦全栈，专注分享 Angular、TypeScript、Node.js/Java 、Spring 技术栈等全栈干货

    « 上一篇
    Angular 2 Change Detection - 2
    下一篇 »
    Angular 2 AsyncPipe

    引用和评论

    被 14 篇内容引用
    推荐阅读
    头像
    8.9W 播放量的 TS 动画版进阶教程合集来了！

    阿宝哥赞 36阅读 6.3k评论 2

    头像
    PWA离线优先策略：提升用户体验的关键步骤

    天涯学馆阅读 229

    0 条评论
    得票最新