学习Angular从入门到放弃

Open jiayisheji opened this issue 7 years ago • 1 comments

学习Angular从入门到放弃

从刚接触Angular到现在，自己也是一路摸滚打爬过来的，虽不是什么高手，单对于如何学习Angular，还是有一些个人的见解，拿出来与大家共勉。

学习Angular从入门到放弃，大致有6个过程或者说是6个层次：

第一步了解

对于刚接触Angular的新手来说，第一步无非是打基础，也是最重要的一步，决定你要不要继续。（Angular学习门槛略高，不是有意吓你的）

在学习之前你要弄明白以下事情：

TypeScript的特性和语法。假如你对 TypeScript 还不熟悉的话，推荐以下途径快速上手：
Angular是什么？Angular与AngularJs的区别是什么？
Angular版本差异？如何选择合适的版本？
Angular适用场景？Angular不适用的场景？
Angular的基本语法。
- Angular的特性：
  - 双向数据绑定
  - 跨平台
  - 开发渐进式应用
  - 统一平台SSR支持
  - 代码拆分按需加载
  - 提高生产率 Angular CLI
  - 各种IDE支持推荐VS Code
  - 测试支持
  - 拥抱W3C标准（动画、组件，表单验证等）
  - 等等
- Angular的八个主要构造块：
  - 模块
  - 组件
  - 模板
  - 元数据
  - 数据绑定
  - 指令
  - 服务
  - 依赖注入
RxJs是什么？RxJs的基本使用，不一样编程方式
zone.js是什么？给Angular带来什么
flex-layout是什么？你在使用flex吗
ngRx又是个什么鬼，为什么没有听过
等等

其实上面的内容，大部分Angular的文档都有介绍。基本了解Angular后，我们可以参考文档的快速上手，写一个Hello world程序。

正确姿势安装Angular CLI，并愉快玩转
完成官网教程-英雄指南
等等

PS:

Angular重度依赖和推荐使用TypeScript，到今天为止，前端各大框架，后端NodeJs框架都提供了对TypeScript支持，剩下就自己想想吧。
Rx也是Angular重度依赖和推荐使用，Rx有多个语言版本，学习它核心思想和概念，可以无缝切换其他语言。

第二步入门

你也许会想，前端和UI界面打交道最多，需要有一整套完善的UI组件库，那Angular有吗？别担心，Github目前有很多UI组件库，官网的资源集合, 其中我所熟知UI组件有：

官方 Angular Material2
阿里 NG-ZORRO
bootstrap风格 ngx-bootstrap
Semantic UI风格 Semantic UI
PrimeNG风格 Prime Faces
七巧板 jigsaw

另外Github以ngx-开头或者(ng2，ng4等)的都是Angular相关的资源模块，可以挑选自己喜欢的，进行使用吧。

繁荣的生态，才是一个框架的活力所在。当你对 Angular 已经了解的差不多了，并且按耐不住跃跃欲试了。这个时候，我们不妨用 Angular 的第三方UI组件和其他依赖模块做些好玩的事情：

写一个TodoList （我学新的框架第一件事，就是写它，它是麻雀虽小五脏俱全，看起来简单，涉及很多知识点，也可以快速熟悉一个框架的简单应用）
搭建一个个人博客网站（使用表单验证系统完成登陆注册，搭配路由模块，Http模块等，做第一个的完整的SPA应用程序）
搭建一个完整的后台管理系统（后台管理系统涉及内容比较多，Ant Design Pro 是个不错高仿对象，它是目前预览版使用react写的，可以配合阿里的 NG-ZORRO 使用（虽然功能没有react版强大，但是够用了））
配合Universal，使用Angular SSR改写个人博客网站
调用一些网站的API做PWA开发
等等

Angular并不是只能做以上的事情，几乎其他框架能做的事情Angular都能做，而且有些情况下能做的更好。

第三步掌握

当前，学习Js框架不能只会简单的用，这个时候，我们需要回头深入了解下Angular核心API用法。说白了，就是好好看 Angular 官网的 API文档。看文档是必备技能。

第四步熟练

多实践。不管是用核心模块还是外部模块，尝试用Angular解决问题替换以前用其他框架写过的代码。
读源码。这里说的读源码不是去读Angular核心代码。这个时候，挑一些UI框架的源码来读，选择一些特定的功能，这种模块代码通常都不多，职责分明，你也可以通过学习源码，更好组织你代码结构，涨不少姿势。比如：
- CDK（Angular Material2 里面封装的一系列好用的功能，NG-ZORRO也依赖它，你也可以用它造属于自己的轮子）
- 对比我举例的几种UI框架某一个功能的实现，去对比他们实现的差别。（可以看到一些API实践应用）
- 等等

第五步玩转

坚持第四步。在使用Angular时，发现没有合适的模块选择或者选择的模块功能不尽人意，这个时候你可以尝试创建一个模块或者修改你认为不爽的模块，并且开源自己模块或者给该模块的 Github 上提 PR

第六步放弃

多实践。成功三步：坚持，不要脸，坚持不要脸。写代码也是坚持多实践。
读Angular核心代码，设计模式，面向对象，数据结构与算法，框架设计等在Angular的实际应用。提高必备
多关注下 Github 上牛人

写在最后

学习其他技术，前端框架也是类似步骤，了解 -> 入门 -> 掌握 -> 熟练 -> 玩转 -> 未知？放弃 : 精通

是放弃还是精通，只是取决你自己有多坚持，成功没有捷径。

少年加油！

Feb 03 '18 04:02 jiayisheji

issues主到那一步了?花多久时间?

Aug 11 '19 06:08 zsq2010

blog blog copied to clipboard