Angular 学习思路

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

Angular 学习思路

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

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

了解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 技术组成的理解，后续打算挑一些 主题 或 项目实战 写一些详细的理解和体会。

 

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