大咖微课 | 直面Angular2系列课第二期开讲

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 依然保持了最初的核心设计理念，但是与 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 的前景将会一片光明。这一优势是大量的同类技术框架根本无法企及的，因此大家在做技术选型的过程中需要综合考虑这些情况作出理性的决策。

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

直面Angular2系列课第二期

“Hello，Angular 2”

开课时间：12-20 20:00　|　时长：1小时