课程先容
本课程是一个系列根本教程，目标是带领读者上手实战，课程以新版本 Angular 的 3 个核心观点作为主线：组件、路由、模块，加上业务开拓过程中必须用到的特性：工具、指令、表单、RxJS、i18n、测试，一共分为 9 部分，34 篇文章。
除了组件、路由、模块这 3 个核心小节具有很强的关联性之外，其它内容都是完备独立的，您可以在用到的时候再翻阅。
负责读完这个系列文章之后，您会深入理解新版本 Angular 的观点模型，具备利用 Angular 上手进行开拓的基本能力。
整体上说，这个系列的文章有以下特色：
我会按照初学者一样平常的学习过程，用我自己的措辞一步一步进行讲解。如你所知，最近的5年我一贯在玩前端方面的东西，从 jQuery、SVG、ExtJS、Adobe Flex、Angular，这样一起玩过来。尤其是2016年，这一整年的韶光我都代表 Angular 项目组在中国进行技能推广。在这5年，我在超过40家企业、开源组织、大学里面进行了大量演讲，在网络上发布了大量的视频和文章。在到处互换的过程中，认识了很多人，有履历丰富的后端开拓者，也有新入行的初学者，他们跟我讲过很多自己的困惑。以是，这个系列文章里面的内容我至少反复讲过20遍以上，我会把常见的一些疑问融入在内容里面。
我会帮你扫平日常开拓中常见的坑，这些坑大部分都是开拓者们反馈给我的，或者说到我这里吐槽过的。举几个范例的例子：
诸如此类的坑还有不少，我都是一个坑一个坑踩过来的。当然，我相信你自己也能踩过来，但是从节约韶光的角度看，还是随着我的思路走一遍更快不是吗？
很多开拓者到我这里来抱怨说，在 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 处理，请参考这份文档。
这个系列的文章全部聚焦利用层面的话题，覆盖日常开拓中利用频最高的特性。除非迫不得已，只管即便不扯事理。长期以来，我创造有很多朋友的学习办法存在误区。比如：有一些人上来就去研究“变更检测”的事理，还有 RxJS 的事理，这种办法除了打击你自己的自傲心之外并不能得到任何好处。由于你迟早会创造，在打算机领域，任何东西研究到最底层都和“算法”、“数据构造”、“设计模式”有关。而就我所知，很多朋友并不具备研究这些内容的根本知识，不过是白白摧残浪费蹂躏自己的韶光而已。以是，我推举采取更加务实一点的方案，首先学会如何利用，等用熟了，有韶光、有闲情的时候再去研究那些底层的事理。设计发动机很难，但是学会开车并不难，对吧？以是我写这个系列的目标很大略，便是带你学会开车，而不是教你设计发动机。
这个系列的文章非常看重“观点模型”（ Mental Model ）的构建。我创造，很多开拓者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会创造他并没有节制这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西；当别人提到 Hibernate 或者 Mybatis 的时候，你的大脑里面立即会浮现出 ORM 的观点；当别人提到 React 的时候，你想到的该当是 VDom、JSX；当别人提到 jQuery 的时候，你首先想到的该当是$对吧？以是，你可以看到，任何一个成功的框架都有自己独创的“观点模型”，或者叫“核心代价”也可以。这是框架本身存在的代价，也是你节制这门框架该当紧扣的主线，而不是上来就陷入到茫茫多的技能细节里面去。
文章里面所涉及到例子总数量大约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版本。
内容列表
这个系列文章一共分11章，34个小节。
1 搭建开拓环境
2-1 组件概述
2-2 把 CSS 预编译器改成 SASS
2-3 模板
2-4 组件间通讯
2-5 生命周期钩子
2-6 动效
2-7 动态组件
2-8 ShadowDOM
2-9 内容投影
2-10 @ContentChild@ContentChildren
2-11 @ViewChild 与 @ViewChildren
2-12 与 Polymer 封装组件的办法大略比拟
2-13 封装并发布你自己的组件库
3-1 指令简介
3-2 自定义指令
3-3 直接在组件里面操作 DOM
4 模块 @NgModule
5-1 路由概述
5-2 路由基本用法
5-3 模块预加载
5-4 路由守卫
5-5 多重出口
6-1 表单快速上手
6-2 双向数据绑定
6-3 表单校验
6-4 模型驱动型表单
6-5 动态表单
7 做事
8 RxJS 快速上手教程
9 国际化
10 自动化测试
11 参考资源
本系列课程对应的所有示例项目列表：
https://gitee.com/mumu-osc/learn-component
https://gitee.com/mumu-osc/learn-directive
https://gitee.com/mumu-osc/learn-router
https://gitee.com/mumu-osc/learn-module
https://gitee.com/mumu-osc/learn-form
https://gitee.com/mumu-osc/learn-service
https://gitee.com/mumu-osc/learn-test
https://gitee.com/mumu-osc/learn-webpack
https://github.com/damoqiongqiu/angular-seo
末了是那一句套话：水平有限，错漏难免，欢迎示正。可以在我的读者圈里跟我沟通互换。
前端互换群:139357161
地址：http://gitbook.cn/m/mazi/comp/column?columnId=59dae2081e6d652a5a9c3603&from=timeline&isappinstalled=0
