文｜章小飞(Aaron Zhang) 谷歌 Angular 技术推广工程师

1. 背景介绍：Angular1.x与Angular2

近年来，Web 开发技术的发展日新月异，各种框架层出不穷。在这样的大背景之下，2010年10月，Google 首次发布了自己的 Web 开发框架，名为 AngularJS，也叫 Angular，或者简称为 ng。

Angular 刚一发布就引起了强烈的关注，它首次提出的“双向数据绑定”的概念受到了众多开发者的喜爱。当然，也有很多人对此持有保留意见。但是无论如何，Angular 所提出来的众多独创性的概念深深影响了 Web 技术的发展进程。例如，当前市面上相当多的 Web 框架都已经支持“数据绑定”的概念，有一些支持单向绑定，有一些支持双向绑定，Angular 的影响力之强大可见一斑。

在 Google 内部有非常多的产品都在使用 Angular，在国内，也有非常多的企业正在使用 Angular1.x 开发自己的应用，包括移动 APP，其中有很多行业巨头。

查看图片

2014年9月，Angular 团队在 ng-europe 会议上公开宣布了第二个大版本的开发计划，也就是大家熟知的 Angular2，与此对应，之前的版本就称为 Angular 1.x了。

目前，Angular2 已经处于正式发布之前的最后准备阶段，按照既定的时间表，本月底（2016-09）Angular2 将会发布第一个正式版本。Angular2 依然保持了最初的核心设计理念，但是与 Angular 1.x 相比，在各种语法细节上发生了大幅度的修改。

查看图片

详细的情况在后面的第三小节“ Angular2 有哪些重要变化？”中解释。从整体上看，Angular2 变得更加简洁，因为它的核心概念只有一个，那就是追求彻底的“组件化（Component）”。

2. 每一门框架都有一个核心灵魂

查看图片

当我们谈论 Spring 的时候，你脑海里一定会自动跳出 IOC、DI 这样的概念。显然，“控制反转”、“依赖注入”就是 Spring 的核心灵魂。

当我们谈论 Hibernate 或者 Mybatis 的时候，你首先想到的一定是 ORM（实体关系映射），它解决了关系模型和 OO 模型之间的数据结构映射问题。

当我们谈论 jQuery 的时候，你想到的一定是 DOM 操作以及网络上无数的开源控件。很显然，DOM 操作就是 jQuery 的核心灵魂，它帮我们屏蔽了浏览器兼容性问题，并且提供了业务开发过程中所需要的各种UI控件。

当我们谈论 Angular 1.x 的时候，你想到了什么？呃，等一等，想到的东西有点多，有时候什么都想不起来。概念庞杂而无法把握，这就是 Angular 1.x 存在的最大问题。

每一个成功的框架都会有一个核心灵魂，这个核心灵魂必须能解决实际开发中的一个痛点。既然是核心灵魂，最好有且只有一个，否则就会给使用者带来很大的学习压力。在这一方面，Angular1.x 是一个反面教材。

因为它的特性比较多，其中最核心的4大特性分别是：

模块化
MVC
双向数据绑定
指令

如果再加上一些琐碎的细节，如 $scope、脏值检测、依赖注入、路由、表单校验等等，整体上给人的感觉就是过于琐碎，没有一个核心灵魂能统摄一切。

Angular 团队也意识到了这一点，因此，Angular2 在设计之初就简化了整体的概念模型。Angular2 的核心灵魂只有一个，那就是组件化（Component），而其它那些细碎的东西，比如 Service、Route、Pipe，都是 utils 而已。因此，在使用 Angular2 的时候，开发者只要学会使用 Coponent 就解决了一大半问题。

大道至简，LESS is MORE。

3. Angular2 有哪些重要变化？

有了 Component 这个统摄全局的概念之后，我们来看看与 Angular 1.x 相比 Angular2 发生了什么变化。

第一点：Angular2 删掉了 $scope 的概念

在 Angular 1.x 里面，$scope 是一个相当强大又相当可怕的东西，由于在很多需要回调的场景之下，脏值检测机制无法感知到 $scope 上发生的变化，因此经常需要开发者自己手动调用 $apply() 方法。典型的场景有：事件回调、setTimeout 回调、Ajax 回调等等。Angular2 响应社区的强烈呼吁，删除（或者说隐藏）了 $scope 的概念，开发者不再需要感知到它的存在。另外，Angular2 在底层引入了 zone.js，所以即使在各种回调函数中修改数据模型也不需要手动调用 $apply() 方法了。

第二点：删掉了 ng-controller 指令

这就意味着 Controller 不再是一个独立的组件，它合并到了 Component 内部。这是一个非常大的演进，因为从大量的实战经验来看，在复杂的业务逻辑中复用 Controller 几乎是不可能的。在其它同类的前端框架里面也有类似的处理手法，例如 Backbone 虽然也强调 MVC 的概念，但是它也没有定义单独的 Controller 类，Controller 也是合并在 View 里面编写的。

第三点：大幅度演进了脏值检测机制

众所周知，“双向数据绑定”之所以能运行，是因为 Angular 底层有“脏值检测”这么一个神奇的机制。而实际上 Angular 1.x 里面的脏值检测机制的运行效率非常差，这就是为什么大家一直在抱怨绑定的对象不能太多、太深的原因。Angular2 大幅度演进了这一机制，不仅引入了单向绑定，还增加了各种检测策略，例如：只检测一次、利用 JIT 动态生成脏值检测代码等等。毫无疑问，有了这些工具之后，数据绑定效率不再是问题。

第四点：嵌套路由

Angular 1.x 里面有一个非常讨厌的问题，框架内置的路由机制不支持嵌套使用，这就导致开发者在日常的开发过程中不得不依赖于第三方的 ui-router 库。Angular2 没有这个问题了，因为 Angular2 的路由是基于 Component 的，天然支持嵌套。

第五点：依赖注入机制演进

Angular2 中的依赖注入写法与 Java 中的注解（Annotation）非常类似，如果你熟悉 Spring 注解的用法，那么使用 Angular2 的依赖注入几乎没有学习成本。当然，概念上是有区别的，Angular2 中叫 Decorator（装饰器），更加贴近 Python 里面的 Decorator 的概念。

第六点：框架整体上基于 TypeScript 开发

这是最大的一个变更，有很多人担忧这样是否会带来比较大的学习成本，实际的情况并非如此。因为 TypeScript 的语法与 Java 或者 C# 非常类似，因此对于从后端转过来的开发者来说，学习这门语言几乎是没有难度的。

还有一个重要的方面需要大家注意：TypeScript 是 Microsoft 开发的一门语言，Google+Microsoft 这样的组合会产生多么强大的推动力，大家可以想象。Google 和 Microsoft 本身都是重要的浏览器厂商，Chrome 和 IE 加起来的市场份额占据了一大半的市场份额，未来如果两款浏览器内建 TypeScript 引擎，很显然 TypeScript 和 Angular 的前景将会一片光明。这一优势是大量的同类技术框架根本无法企及的，因此大家在做技术选型的过程中需要综合考虑这些情况作出理性的决策。

第七点：Angular 1.x 和 Angular2 都自带 UI 控件库

两个版本的 UI 控件库都实现了 Material Design 所提出来的设计风格，Material Design 是 Google 提出来的一种 UI 设计原则，终极的目标是：用一套 UI 设计规范来兼容各种各样的设备，例如桌面、平板、大屏幕的电视、车载系统、甚至 watch，从而保证用户体验的一致性。

针对 Angular 1.x 的 Material Design 实现请参考以下链接：

https://github.com/angular/material。

针对 Angular2 的 Material Design 库，目前已经处于 alpha 状态，预计在本月（2016－09）底发布第一个正式版本，更多详情请参考：

https://github.com/angular/material2。

在现代 Web 应用开发中，尤其企业应用场景下，UI控件库是必不可少的组成部分。无论框架的设计理念多么前卫，我们最终都必须面对真实的业务开发，这里最大的现实就是：不可能让每一个企业或者团队都维护一套自己 UI 组件库。

我们知道开发一套能完美兼容各种屏幕的 UI 组件库需要消耗大量的时间和金钱，而长期维护这样一套体系更是无比枯燥的任务。所以说，Angular 默认提供免费的UI组件库这一点是目前市面上很多同类的技术所无法比拟的。

4. 我从哪里开始学习 Angular2？

查看图片

Ok，Angular2 很强大，我很想上手实践一下，那么应该从哪里开始呢？

首先推荐 github 上的一系列新手项目，Angular 团队也编写了很多入门级的例子。在这些项目里面，由于运行环境的问题，有很多配置文件不太正确，导致很多开发者下载之后无法运行。我在原项目的基础之上整理并修改了一些配置错误，目的是降低国内开发者的学习成本，请参考以下链接：

1. 基于 angular.io上官方的 tutorial 实例修改而来：

https://github.com/damoqiongqiu/angular-tutorial-damoqiongqiu

2. Angular2 种子项目，修改并增加了一些内容：

https://github.com/damoqiongqiu/angular2-seed-cn

3. 从零开始学习 webpack

目前有非常多的前端项目都在使用 webpack 作为构建工具，包括 Angular2。这个项目分了6个 branch，从 lesson01 到 lesson06，难度从易到难，详情请参考以下链接：

https://github.com/damoqiongqiu/learn-webpack

5. 总结

Angular1.x 将会继续演进并长期维护，包括 AM1.x（Angular Material 1.x）；同时，Angular2，包括 AM2.0（Angular Material 2.0）即将正式发布，Angular2 将是又一个历史性的版本，敬请期待。

从本月开始，我们会定期在这里向大家作 Angular 的技术分享，每个月至少发布1篇详实的技术文章。

我作为谷歌“开发技术推广部”的 Angular 技术推广工程师，非常乐意和大家建立经常性的互动，也非常欢迎大家随时向我们提出对 Angular 的反馈和建议。大家有任何关于 Angular 的问题，可以直接在公众号下方留言，或者发送邮件至 DevRel-China-Contact@google.com，这是谷歌开发技术推广部专门收集中国开发者反馈的信箱。

查看 Angular2 的官方中文版文档请点击文末“阅读原文”或访问：

https://www.angular.cn

查看图片