Angular 2.0 和 1.x比较

奥斯本效应

Angular团队面临着这样的问题：如何在不影响1.x版本使用的状况下谈论不少2.0的高级新功能。这就是奥斯本效应，上个世纪80年代的电脑公司，终因市场源于而歇业后命名。简而言之，2.0版本听起来越好，就越少有人去使用1.x版本。不一样的是，Angular 2.0版本已经能够从github上经过npm install angular@2.0.0-alpha.6 获得它了。可是，这个不能用于生产，它还在被大量的修改。

Angular 1.x vs. 2.0

为何Angular团队会作出如此大得变化的缘由是什么呢。Angular不仅是试图跟上，他们还推进了大量的标准的应用，加强了现有的应用架构。

双向数据绑定

2.0 单向数据绑定

在大型项目中，双向数据绑定会被使用的像意大利面条同样。Angular 2.0引入了无回路有向图的单向结构概念。

这听起来很像React的Flux所作的工做。这种结构也能够被Angular来使用。

虽然双向绑定会消失，Angular创始人Misko已经声明：2.0中会有方法实现双向绑定，虽然实现的背后数据是单向的。

观察器

2.0：Zone.js

$scope.$watch, $scope.$apply, $timeout这些都不在须要了，这也是1.x版本有如此之大的学习曲线的缘由。

Zone.js能够帮Angular实现变化的自动检测。这听起来很像React的差别比较算法。

Angular团队解释道，如今的变化检测更快了，内存更小了，同时也更增强大了。变化检测的性能可能随着未来的object.observe的到来而有更大的提高。

Zone.js同时支持不变对象，这样检测的速度上会有更大的提高。这是由于编译器会认为数据对象不会变化从而进行优化。

组件通讯

2.0：除了$broadcast 和 $emit，2.0还有一些小得变化，1）你能够在DOM层发送消息，而不是在scope；2）你能够组件嵌套，而后link他们，这看上去很像每一个组件都使用它们独立的scope。

DOM

2.0：从不少方面能够看出，Angular 2.0对于DOM样式的操做很像React的virtual DOM，它引用的是最近呈现的view层。关于Angular Native，Misko提到，这个view层能够运行于web worker，甚至是native。

scope

数据将会被组织成树形结构

Angular 2.0也会使用web组件标准。好比，shadow DOM能够用来建立独立的scope。Angular团队解释到，2.0会有一个shadow DOM模拟模块（当前浏览器还不支持web组件），这将给独立css提供新的选择，很酷不是么！

模块

2.0：2.0将确定使用ES6的模块语法。同时，2.0还但愿经过懒加载来引入依赖注入。和以往经过单例方式管理不一样的是，2.0但愿使用一种层次化数据结构来提供继承特性。你将可以控制模块的生命周期，好比services。

指令

2.0：如今将被成为“组件”。在1.x版本中，指令在大型项目解决冲突中随处可见。可是在2.0中，你必须导入你的组件才能去解决初始化中得命名空间冲突问题。虽然我不明白它是如何工做的，可是2.0将会建立一个原型模板用于潜在的绑定以优化编译器速度。

Router

2.0:虽然没有1.x里面不稳定的懒加载特性，但看上去应该是从1.x版本移植过来的。

Brian Ford发了一篇关于新路由的介绍，值得咱们关注下。他描述了一个新的路由如何可以同时工做于1.x和2.x版本，这就容许团队逐渐的过分到新的版本中。他同时建议使用当前流行的ui-router来迁移地址。Ui-router很不错，可是缺乏一些重要的特性。好比，解析只能在页面加载以后才能传递参数。可是若是你想在到下个页面以前去校验form表单中当前的数据咋办呢？Ui-routers的解析是一次性触发的。相反，新的router会提供一个钩子，容许你在制定地方作一些你想要的动做。

HTML

2.0：虽然语法看上去有些不同，可是记住，在这背后确定是有必定好的缘由的。

ng-指令

HTML中得组件被拆分魏两种类型：(事件)和[属性]。他们被包装在圆括号和中括号中，这样肉眼和机器都能识别了，从而能够优化这两种类型。

(事件)

(事件) 用于初始化动做.

1.x 2.0 ng-click (click) (dbl-click) ng-keyup (keyup) 

[属性]

[属性] 直接连接到DOM属性中.

1.x 2.0 ng-hide [class:hidden] ng-checked [checked] 

!foreach

!foreach 是用来取代 ng-repeat.

<ul> <li !foreach="#item in itemService.items"></li> </ul> 

#item

对象的属性加上 # 就能够直接绑定在html上。

<input type="text" #userName /> 

{{ }}

双大括号在2.0依然可见。看，不是啥都在变化。

组件名称

不会再出现骆驼命名和蛇命名混淆的状况了。如今你必须本身制定组件中得指令名称。因为Angular 2.0符合web组件标准，它须要-来连接名字。

@Component { selector: 'myApp-component' } 

总结

Angular 2.0版本看起来有点难以想象的。虽然尚未彻底可用于生产，可是你能够玩一玩了。能够在github上下载到。同时也有一些例子，好比ng2do。

若是你像下降学习曲线，那你如今能够作以下事情：

• 尝试看Rob Eisenbergs的新框架：Aurelia。毫无疑问，很是值得看，从中能够学到不少关于web组件和shadow DOM的事情。

• 在Angular1.x中使用ES6-(如今多是ES2015)。这里有不少例子关于ES6和JSPM。

• 多多学习Facebook的React.js。不少伟大的理念都是从这里传播出去的，好比Flux。

• 放眼一看，Angular1和2两个版本的共同点不多。2.0版本看起来是要作完全的改变。所以有必要抽点时间去研究下心的框架，从而能够快速的成为专家。

点击此处能够看关于2.0相关视频

原文连接：http://shmck.com/comparing-angular-1-x-2-0/