Angular 2.0 和 1.x比较


在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

angularjs2.0

奥斯本效应

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/

 
广告位 点击查看投放指南
posted @ 2015-10-07 17:51  xiezhenzhong  阅读(258)  评论(0编辑  收藏  举报