Angular 学习思路

近些年前端框架非常多，主流的有 Vue、React、Angular 等。我参与的项目中使用较多的是 Vue。因为 Vue 学习难度不大，上手很快，代码简洁，而且使用 Vue 全家桶（Vue + Vue-Router + Axios + Vuex + Vue-Bus等）、再配合 Element UI 等第三方UI组件库进行开发也是不错的选择。Vue 的作者是华人，故文档等各方面资料也非常齐全。但个人体会：如果前端项目庞大，在工程化方面，Angular 是最佳选择，最贴近 Java 后端开发的思想。不管怎么说，几大家族各有利弊，任何争辩都毫无意义，根据项目和喜好爱用啥就用啥。

Angular 学习思路

在 Angular 的学习过程中充满兴奋刺激与痛苦，在几个项目中也逐渐对 Angular 的学习有一些体会。我的学习过程大概是这样的：

了解 Angular 基本概念，配置开发环境；
学习官网教程，按照教程编写第一个应用；
系统全面掌握 TypeScript 语法；
系统掌握 Angular 的体系结构，学习官网每个知识点；
掌握 RxJS 以及如何在 Angular 中使用 RxJS；
学习 NGRX；
在项目中使用上面提到的技术。

了解Angular里面的基本概念

浏览官网文档，上网搜索入门教程，对 Angular 有一个模糊的认识；
以官网的Getting Start 为主，一步一步安装配置开发环境（NodeJS、Angular Cli等）；
创建第一个工程 Hello World，并运行，确保环境配置成功；
通过 Hello World 了解angular工程的目录结构及文件；
继续上网查资料，对组件、模块、指令等概念有个大概的印象（注意：只是大概的印象，并不是理解或掌握），知道组件是个什么玩意，模块又是怎样表示。

参考网站 Angular 官网： https://angular.io/guide/quickstart

动手编写第一个应用 Tour of Heroes

对 Angular 的基本概念有个大致的印象后，接下来按照官网的 Toutorial 教程（开发 Tour of Heroes 应用），一边阅读教程，一边跟着开发。该教程首先介绍了整个应用的功能和效果，接着从命令行创建工程开始，一步步实现并完善工程。整个教程涉及了 Angular 的很多知识，如组件的封装、依赖注入、路由、服务、HTTP 网络请求等；遇到不会的、不理解的，先忽略，照着把代码先敲下来，再回头去理解消化；跟着写完后，会对 Angular 的开发有一定的感觉。

参考网站 Angular 官网： https://angular.io/tutorial

学习TypeScript语法

Angular 支持 TS 和 ES6，官方推荐使用微软的 TypeScript 语言。通过 Tour of Heroes 应用编写的学习，会接触到一些 TS 的语法。此时可以回过头去系统掌握 TS。主要内容包括：数据类型、模块、函数、泛型、面向对象（类、对象、构造函数、继承）等。

参考网站 TypeScript 中文网： https://www.tslang.cn/docs/home.html

学习Angular的架构及概念

阅读 Angular 官网的语法 Fundamentals 部分，系统学习 Angular 的内容。主要包括：

架构（全局性的介绍）：站在高处纵览 Angular 的组成。Angular 的整体架构、Angular 的启动过程和执行流程、认识 Angular 模块和组件、认识服务和依赖注入；
组件和模板：组件是Angular 应用的最基础的单元。数据绑定、输入输出属性、组件样式、组件生命周期、组件间通信、指令、管道；
表单：表单应用场景广泛，主要学习模板驱动表单、响应式表单、表单校验、如何自己封装表单控件；
模块：如何创建一个 Angular 模块，模块的懒加载，共享模块等；
依赖注入：深入学习 Angular 对依赖注入的实现，如何定义 Service；
路由：单页应用中多个界面之间如何跳转，如何嵌套路由，路由如何传递参数；
网络请求：与后台交互是永恒的主题，如何发送 HTTP 请求，获取返回数据。

参考网站 Angular 官网： https://angular.io/guide/architecture

学习RxJS

RxJS 是 Angular 的重心，个人觉得如果在 Angular 项目开发过程中不使用 RxJS，则失去 Angular 很大一部分优势。 RxJS 加入了在时间线方面的思考，可以使很多复杂的问题简单化，强烈建议深入学习。

首先学习 RxJS 的几个核心对象 Observable、Observer、 Subjects、 Subscription，然后了解 RxJS 中常见的操作符，最后练习 RxJS 在 Angular 中的使用。

参考网站

RxJS 文档： https://rxjs-dev.firebaseapp.com/guide/observable Angular 官网： https://angular.io/guide/observables

学习NGRX

NGRX 是基于 Redux 开发的一套适合 Angular 的状态管理技术。应用中所有的数据、UI 都可以看做"状态"。当应用庞大时，如果数据需要在多个组件间复用，此时状态管理就可以发挥作用了。 NGRX 主要包含 Actions、 Reducers、 Effects 三个主要模块，此外还有 Entity, Router-Store等，按照官网很容易上手。

参考网站

NGRX 官网： https://ngrx.io/guide/store

项目实战

有了上面的基础后，就可以在项目里面大胆使用 Angular 了。如后台管理系统、App 开发、前台应用等。在项目实战中又会接触到其他一些技术。

PC 端中台系统的 UI 框架： Angular Material、 ZORRO、 PrimeNG 等；
移动端 UI 框架： Ionic Framework、 NG-ZORRO-ANTD-Mobile 等；
第三方简化开发的库： lodash、 date-fns、 iconfont 等；
Angular 动画；
Angular 项目打包、优化、测试等。

本文仅谈了我在 Angular 的学习过程中的思路，以及我对 Angular 技术组成的理解，后续打算挑一些主题或 项目实战 写一些详细的理解和体会。

有兴趣的伙伴欢迎关注微信公众号