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

 

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页