Angular 初学者如何快速上手？
来源：原创 时间：2017-11-16 浏览：0 次
你可能会问：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 版本。
