AngularJS 2.0来袭 - Hold!
分类:Javascript| 发布:佚名| 查看:853 | 发表时间:2014/11/11
AngularJS 作为最前沿的 JavaScript 框架之一,版本号的改变肯定不是简单的 1 + 1,所以 2.0 不负众望地带来了非常大的改变:
从模板到代码都有改动,完全不向下兼容 1.x...
变成一个叫 angularjs2 的新框架...
是的,你在 1.x 所学的大部分知识都要过时了。
模板语法改变
新的模板语法将更严格区分 property 和 attribute,不再采用指令统一语法,而使用 []
和 ()
来区分数据和事件行为:
2 | < input type = "text" [value]="newTodoTitle"> |
3 | < button (click)="addTodo()">+</ button > |
6 | < li [ng-repeat|todo]="todosof('goods')">{{todo.title}}</ li > |
从代码可以看到,ng-model 将被中括号替代,ng-click 则变成小括号。
controllers 和 $scope 没了
新版本更强调组件化,不再使用 controllers 控制 view,而是使用 component directvie 声明组件,在组件内管理状态,这有点类似 reactjs 的写法:
4 | this .newTodoTitle = '' ; |
6 | addTodo: function () { ... } |
7 | todosof: function (filter) { ... } |
Directive 还在,但概念上更复杂,而 DDO (Directive Defined Object) 则被取消了
2.0 中 Directive 还在,但在视频中我们可以看到 Directive 暂时被分为了三种:
Component Directive
Template Directive
Decorator Directive
代码示例:
1 | @ComponentDirective({...}) |
4 | @TemplateDirective({ ... }) |
7 | @DecoratorDirective({ ... }) |
其中组件指令应该对应被砍掉的 contollers
,而关注 dom 变化的被归类为模板指令,装饰指令则对应样式变化和动画。
参考以上的代码你可以看到,由于采用了面向对象的写法,以前写的 directive 将不能在 2.0 中使用...
去掉 jqLite
2.0 追求更现代的浏览器和 ECMAScript6 规范,鼓励直接使用原生api操作,也就没有必要使用 jQuery 来兼容各浏览器差异。
至于 IE 能兼容到什么版本,我个人猜测 IE10 应该是没问题的。
框架本身采用了 AtScript 开发
AtScript 是 TypeScript 的超集,除了拥有类型之外,她还在 TypeScript 的基础上加入了注解。
虽然框架并不一定需要搭配 AtScript 进行开发,但 AtScript 并不像 CoffeeScript,而且目前还没看到使用原生 JavaScript 的示例。
不再采用 angular.module
或许是因为 AtScript 提供了更好的模块管理功能,2.0 将不再支持 angular.module 方式管理模块,而是采用类似 python 的方式:
1 | import {TodoService} form './todo_service' ; |
1.3 是否还会维护
根据 Brad Green 的回答,距离 2.0 发布大约还需要一年半到两年的时间,在这段时间内还会为 1.3 提供补丁....
最后
目前 2.0 还在快速迭代中,很多东西并没有最终定下来。不过我认为后面会为平滑升级做文章应该不太可能了,因为2.0弱化了MVVM而强调了组件化的概念,这个概念在 polymer 和 react 中已经得到了证明: 前端组件化是趋势