奥斯本效应
Angular团队面临着这样的问题:如何在不影响1.x版本使用的情况下谈论很多2.0的高级新功能。这就是奥斯本效应,上个世纪80年代的电脑公司,终因市场源于而歇业后命名。简而言之,2.0版本听起来越好,就越少有人去使用1.x版本。不同的是,Angular 2.0版本已经可以从github上通过npm install [email protected]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/