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/