Angular 初学者如何快速上手？

你可能会问：Angular 的文章到处有，网上一大片，我为什么要来读你这个系列文章？这是非常好的一个问题，说明你对阅读内容有质量要求。如果是我，我也会问这个问题。整体上说，这个系列的文章有以下特色：1）我会按照初学者一般的学习过程，用我自己的语言一步一步进行讲解。如你所知，最近的5年我一直在玩前端方面的东西，从 jQuery、SVG、ExtJS、Adobe Flex、Angular，这样一路玩过来。尤其是2016年，这一整年的时间我都代表 Angular 项目组在中国进行技术推广。在这5年，我在超过40家企业、开源组织、大学里面进行了大量演讲，在网络上发布了大量的视频和文章。在到处交流的过程中，认识了很多人，有经验丰富的后端开发者，也有新入行的初学者，他们跟我讲过很多自己的困惑。所以，这个系列文章里面的内容我至少反复讲过20遍以上，我会把常见的一些疑问融入在内容里面。2）我会帮你扫平日常开发中常见的坑，这些坑大部分都是开发者们反馈给我的，或者说到我这里吐槽过的。举几个典型的例子：很多开发者到我这里来抱怨说，在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西。node-sass 模块被墙的问题，强烈推荐使用 cnpm 进行安装，可以非常有效地避免撞墙。一些开发者来抱怨说 @angular/cli 在打包的时候加上 --prod 参数会报错，无法编译。这是一个很常见的问题，因为 @angular/cli 最新的版本经常会有 bug，只要在你项目的 package.json 里面降低一个小版本号就OK。@angular/cli 默认生成的 karma.conf.js 配置文件里面采用了一个有 bug 的 html 报告生成器，导致 ng test 运行报错，我们需要把这个 reporter 改成 mocha（摩卡）。有一些朋友说，本地开发的时候运行得很好，上线之后所有请求404。这也是一个常见的坑，因为你需要给 Web 容器配置一下处理 http 请求的规则，把前端路由扔回去交给 Angular 处理，请参考这份文档。诸如此类的坑还有不少，我都是一个坑一个坑踩过来的。当然，我相信你自己也能踩过来，但是从节约时间的角度看，还是跟着我的思路走一遍更快不是吗？3）这个系列的文章全部聚焦使用层面的话题，覆盖日常开发中使用频最高的特性。除非迫不得已，尽量不扯原理。长期以来，我发现有很多朋友的学习方式存在误区。比如：有一些人上来就去研究“变更检测”的原理，还有 RxJS 的原理，这种方式除了打击你自己的自信心之外并不能得到任何好处。因为你迟早会发现，在计算机领域，任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。而就我所知，很多朋友并不具备研究这些内容的基础知识，不过是白白浪费自己的时间而已。所以，我推荐采用更加务实一点的方案，首先学会如何使用，等用熟了，有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难，但是学会开车并不难，对吧？所以我写这个系列的目标很简单，就是带你学会开车，而不是教你设计发动机。4）这个系列的文章非常看重“概念模型”（ Mental Model ）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西；当别人提到 Hibernate 或者 Mybatis 的时候，你的大脑里面立即会浮现出 ORM 的概念；当别人提到 React 的时候，你想到的应该是 VDom、JSX；当别人提到 jQuery 的时候，你首先想到的应该是$对吧？所以，你可以看到，任何一个成功的框架都有自己独创的“概念模型”，或者叫“核心价值”也可以。这是框架本身存在的价值，也是你掌握这门框架应该紧扣的主线，而不是上来就陷入到茫茫多的技术细节里面去。5）文章里面所涉及到例子总数量大约 200 个左右，有少量例子来自官方文档，其它都是我自己一点一点手动敲出来的。我把这些例子分成了9个开源项目，它们互相独立，方便大家进行参考和练习。这些教学用的开源项目本身是免费的，列在这篇文章的尾部。Angular 的概念模型既然如此，问题就来了，新版本的 Angular 的核心概念是什么呢？非常简单，一切都是围绕着“组件”（ Component ）的概念展开的：Component（组件）是整个框架的核心，也是终极目标。“组件化”的意义有2个：第一是分治，因为有了组件之后，我们可以把各种逻辑封装在组件内部，避免混在一起；第二是复用，封装成组件之后不仅可以在项目内部复用，而且可以沉淀下来跨项目复用。NgModule（模块）是组织业务代码的利器，按照你自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。Router（路由）的角色也非常重要，它有3个重要的作用：第一是封装浏览器的 History 操作；第二是负责异步模块的加载；第三是管理组件的生命周期。所以，在这个系列的文章里面，Component、NgModule、Router 加起来会占据绝大部分篇幅，而一些琐碎的小特性会被忽略掉。我相信，你只要紧扣“组件化”这个主线，就能站在一个很高的角度统摄全局，从而掌握到这门框架的精髓。适合阅读的人群这个系列的文章适合以下人群阅读：Angular 新版本的初学者有 AngularJS 1.x 经验的开发者希望了解 Angular 新版本核心特性的开发者特别注意：这个系列的文章不是前端入门读物，你至少需要会一门编程语言，无论前端还是后端都可以，如果你曾经使用过一门前端框架，那就更好了。集中回答一些常见的问题浏览器兼容性关于 Angular 的浏览器兼容性，请看下图：有一些国内的开发者会来争论兼容 IE8 的问题，我想给你两个事实：第一个事实是：截至2017年7月底，Chrome 的全球市场份额已经接近60%，加上 Firefox 的 12.28%，真的没有那么多人用 IE 了。数据来源第二个事实是：天猫已经于2016年4月宣布放弃支持 IE6、7、8。而根据百度流量研究院的统计，IE8目前的整体市场份额已经下降到了9.31%：数据来源不值得为了这么少的市场份额付出那么多的研发和维护成本。你完全可以以上两点事实去说服你的客户。命名约定老版本使用 AngularJS 指代，所有新版本都叫做 Angular。原因很好理解，因为老版本是用 JS 开发的，所以带一个 JS 后缀，而新版本是基于 TypeScript 的，带 JS 后缀不合适。关于 TypeScript这个系列的文章不会单独讲 TypeScript，正如我一直强调的：TypeScript 不难，JavaScript 才难。你跟着我的思路，TypeScript 绝对不会成为你学习 Angular 的障碍。相反，一旦你写熟练了之后，TypeScript 可以非常有效地提升编码效率和程序可读性。关于版本号根据官方的解释，Angular 从 2.0 之后会保证向下兼容，每隔半年会升级一个大版本，只有升级大版本的时候才会做一些 breaking change。所以这个系列文章里面不再强调版本号，涉及到的所有实例代码都基于目前（2017-10）最新的 4.x 版本。