Angular 2.0 和 1.x比较

奥斯本效应

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/

时间: 2024-10-10 12:59:31

Angular 2.0 和 1.x比较的相关文章

Angular 1.0演变Angular 2.0的简单优势列举

首先,Angular最核心的4大特性分别是: 1.模块化 2.MVC 3.双向数据绑定 4.指令 Angular 1.0演变Angular 2.0的简单优势列举: 1.性能限制上的优化 说明:随着时间的推移,各种特性被加入进去以适应不同场景下的应用开发,在最初的架构受到了限制,而Angular 2.0很好的解决了这些问题. 2.仿照WEB后端的结构模式来编写前端 说明:支持模块.类.lambda表达式. generator等新的特性 3.支持移动端开发 说明:Angular1.x没有针对移动 应

Angular 2.0 从0到1 (六)

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到

Angular 2.0 从0到1 (四)

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八) 番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0

Angular 2.0 从0到1 (七)

第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2.x中利剑番外:Angular 2.0 从0到

All About Angular 2.0

angular All About Angular 2.0 Posted by Rob Eisenberg on  November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll explain the major feature areas of Angular 2.0 along with the motivation

Angular 2.0 的设计方法和原则

转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从而有助我们做出正确选择. Angular 2 是一个针对移动应用的框架.它同时也支持桌面环境,但是移动端是难点,我们把它放在第一位.你了解并且喜爱的Angular还在那里,数据绑定,可扩展的HTML,以及专注可测试开发. Angular 2 所有的设计文档都公开在Google Drive上.而这篇文

[转贴]有关Angular 2.0的一切

对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包括我认为仍然需要改进设计的重要部分. 注意:本文所反映是2014年11月6日的状态记录.如果你在较长时间之后读到此文,请检查一下我设计上是否有所变更. AngularJS 1.3 在开始讨论Angular的未来之前,我们先花点时间看看当前的版本.AngularJS 1.3是迄今为止最优的Angula

Angular 2.0 基础:服务

什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就可以实现更多的组件共享服务数据,服务能够使我们提高代码的利用率,方便组件之间共享数据和方法,方便测试和维护.在Angualr 文档中我们能看到这样的描述: Multiple components will need access to hero data and we don't want to c

Angular从0到1:function(上)

1.前言 Angular作为最流行的前端MV*框架,在WEB开发中占据了重要的地位.接下来,我们就一步一步从官方api结合实践过程,来学习一下这个强大的框架吧. Note:每个function描述标题之后的★标明了该function的重要程度(1~5星). 2.function(上) Angular封装了一系列公共方法,帮助我们更简单的使用JS.这些就是Angular的function. 2.1.angular.bind(★) angular.bind类似于Function.prototype.