AngularJS AngularJS 2.0 正在路上..

saiga · 2014年11月09日 · 最后由 luikore 回复于 2016年05月19日 · 51417 次阅读
本帖已被管理员设置为精华贴

AngularJS 作为最前沿的 JavaScript 框架之一,版本号的改变肯定不是简单的 1 + 1,所以 2.0 不负众望地带来了非常大的改变:

从模板到代码都有改动,完全不向下兼容 1.x...

变成一个叫 angularjs2 的新框架...

是的,你在 1.x 所学的大部分知识都要过时了。

模板语法改变

新的模板语法将更严格区分 property 和 attribute,不再采用指令统一语法,而使用 []() 来区分数据和事件行为:

<div>
  <input type="text" [value]="newTodoTitle">
  <button (click)="addTodo()">+</button>

  <ul>
    <li [ng-repeat|todo]="todosof('goods')">{{todo.title}}</li>
  </ul>
<div>

从代码可以看到,ng-model 将被中括号替代,ng-click 则变成小括号。

controllers 和 $scope 没了

新版本更强调组件化,不再使用 controllers 控制 view,而是使用 component directvie 声明组件,在组件内管理状态,这有点类似 reactjs 的写法:

@ComponentDirective
class TodoApp {
  constructor() {
    this.newTodoTitle = '';
  }
  addTodo: function() { ... }
  todosof: function(filter) { ... }
}

Directive 还在,但概念上更复杂,而 DDO (Directive Defined Object) 则被取消了

2.0 中 Directive 还在,但在视频中我们可以看到 Directive 暂时被分为了三种:

  • Component Directive

  • Template Directive

  • Decorator Directive

代码示例:

@ComponentDirective({...})
class Todo {}

@TemplateDirective({ ... })
class NgRepeat { ... }

@DecoratorDirective({ ... })
class NgClass { ... }

其中组件指令应该对应被砍掉的 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 的方式:

import {TodoService} form './todo_service';

1.3 是否还会维护

根据 Brad Green 的回答,距离 2.0 发布大约还需要一年半到两年的时间,在这段时间内还会为 1.3 提供补丁....

最后

目前 2.0 还在快速迭代中,很多东西并没有最终定下来。不过我认为后面会为平滑升级做文章应该不太可能了,因为 2.0 弱化了 MVVM 而强调了组件化的概念,这个概念在 polymer 和 react 中已经得到了证明: 前端组件化是趋势

相关文章:AngularJS 2.0 细节披露

相关视频:油管

直接用纯 js 得了

Ember.js 用户路过

1.3 用户被无情抛弃,还跟着上 2.0 就是真爱。

#4 楼 @Rei 为何叫抛弃,1.3 还是可以继续用啊

#4 楼 @Rei angular 好像使用范围好像还不广,你是在 web 项目中用它么?

#6 楼 @lawrence 没用上,以前读过 angular 和 ember 还有 backbone 的文档,觉得这种开发方法都不是很适合我,所以还是默认的 Rails Stack。现在庆幸没用 angular,也可以从选项中除名了。

Angular 2 的模板类似这样:

<input type="text" [value]="firstName">
<button (click)="addPerson()">Add</button>

polymer 的模板(其实就是 HTML 标记)类似这样:

<my-counter counter="10">Points</my-counter>

不过实际上模板是隐藏在内部,类似一般的模板:

<template>
  <style> /*...*/ </style>
  <div id="label"><content></content></div>
  Value: <span id="counterVal">{{counter}}</span><br>
  <button on-tap="{{increment}}">Increment</button>
</template>

同样基于 Components,不见得要用 Angular。

#7 楼 @Rei 呵呵,看来 angular 是个玩具,国内用 angular 的产品很少吧?

#5 楼 @Numbcoder

在一次问答讲座上,开发者们问道 Angular 1.3 还将获得多长时间的支持。Brad Green 是这样回答的:

比较合理的期望是,我们大约还需要 1 年半至 2 年时间以发布 2.0 的最终版本,这段时间内我们还会为 1.3 提供缺陷修复及安全补丁。

我没找到原文,不过按照上面的说法,目前不确定 2.0 出来之后是否会维护两个版本。

#9 楼 @lawrence 现在在使用 angularjs 的人已经有很多,而且很多公司也开始考虑,比如 coding 就是基于 angularjs 构建的

#8 楼 @Rei 其实我觉得 angular2 和 react 这种基于组件来管理数据和状态是正确的做法,我个人非常喜欢 2.0,就是 angularjs 升级的跨度太大有点蛋疼。

#10 楼 @saiga 2.0 不兼容 1.3 不是很正常嘛,要不然就叫 1.4 了而不是 2.0 1.3 只要维护到比较稳定的状态,对老用户没任何影响把

过分强调向后兼容,只会阻碍自身的发展!

让我想起了 python2 跟 python3 是两个东西

What about Migrating from 1.3 to 2.0?

Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs. Once we have an initial version of Angular 2, we'll start to work on a migration path for Angular 1 apps.

We know that you have invested a lot of time learning how to build web apps with Angular. Since we are preserving most of the core concepts, this knowledge will help you be proficient in Angular 2 much faster.

官博不去翻译,倒去翻译二道贩子,然后就让实际上完全没接用的人误会用户被抛弃了,233 2.x 不直接兼容 1.x 不是完全正常的事情么,rails3 也不可能直升 rails4 啊…… 而且对于用 rails 写模板的人,迁移应该简单多了,不就是改几个 helper 的事情么……

#11 楼 @saiga coding 是用 ruby 开发么?

#16 楼 @aptx4869 感谢分享。不过他的意思还是迁移到 2.0 上,而 angular 1.3 核心的几个部分不是删了就是面目前非,整个架构从 MVVM 转到 component 了。 我觉得不抛弃用户的最好的做法就是同时维护两个版本...

...连语言设施都换了。。。确实完全是一个新东西了。。。

#18 楼 @saiga 等实际出来再看吧,至少 3 年呢,程序员“估计”所需的时间不是通常为实际所需时间时间的 1/pi 么,给予 es6,等 es6 实际出来都猴年马月了,233

想了了下,影响其实没粗看中的大,controller 没了对我影响不大,我这 contorller 实际只有几个,干的事只是去访问对应的 route 加上 json 后缀的 api 然后将结果合并到 scope 里面而已,估计以后这种东西是应该放在 route 里面的,jquery-lite 去掉没啥关系,无非是将elm.on改成elm.addEventListener而已,关键是 directive 重写,不过具体实现不知道,也就不知道要改多少

其实用 Object.observe()是方向,不过这升级也升得够坑的 :)

谷歌的技术千万别跟,谁跟谁傻蛋。谷歌向来管生不管养。

让我想起了,play framework 1.x 升到 2.0 的样子。

#9 楼 @lawrence coding.net 的是红果果的已经用于生产环节的使用 angular 的案例……

#24 楼 @cassiuschen coding 是论坛哪位开发的?

#25 楼 @lawrence 我怎么感觉它是 java 开发的…………

google 某些程序员光有技术没有智商。

在邪路上越走越远了

#9 楼 @lawrence 所有技术都是程序员的玩具,顺便用来解决生产问题。

这叫 update 么?这不明明是 new 么

多学一种 js 框架又能咋样,还是把学了的先精通吧...很多框架,库背后都带有很强的目的性。

#27 楼 @lawrence 完全放弃的:GWT、Wave 接近放弃时不时拿出来博眼球的:chrome os 走在放弃的路上的:golang、dart 押对了宝拼命往里砸钱的:Android

谷歌是个赚快钱的公司,不会在一个看不到多少利润的项目上投入太多

#34 楼 @ddyy 为何要放弃 GWT,EXT 这货现在不是很赚钱么:)

#34 楼 @ddyy golang 本身就不是 google 官方的,何来放弃

#38 楼 @yukihiro_matz 媒体长年累月铺天盖地的宣传,没有大公司在背后推?傻子才认为是社区自发的。

#17 楼 @lawrence 我是 coding 的,简单介绍下:coding 后端主要是 java,部分组件和服务也使用了其它语言:Ruby、Go、C++ 我们也在用 😄

#34 楼 @ddyy

谷歌技术里已死或者快死的还有

  • RE2 -- 脱胎自 Rob Pike 的编辑器的正则引擎
  • Code Search -- 基于三元语法的代码搜索
  • UnladenSparrow -- LLVM 上的 Python
  • Native Client -- Chrome 版 ActiveX ...

不过有些基本 idea 是很有启发性

Angular 是个大杂烩,模板语言的设计整体性太差,ad-hoc 感很严重,重新造了一遍依赖管理和作用域等轮子,module 很多不过有很多也是为了解决自己创造的问题,别的框架用了 observable 好久以后它才引入... React without JSX 真的简单轻便很多...

准备转 Ember.JS。。

已经在用 Emberjs

看这情况只能转 Emberjs 了

早就用 avalon 了 IE6+ 无压力,基于 object.defineproperty 和 vbs 的双工绑定,写法比 angular 还简单。ember 1.8 也不支持 IE7-了。

#41 楼 @luikore jsx 我觉得真的好蠢。。

#46 楼 @xstmjh 是的,所以 atom 用 react 但不用 jsx

#46 楼 @xstmjh #47 楼 @luikore

我觉得 jsx 当模板还 ok。虽然 coffee 可以写成类似 jade 那种风格,但是不喜欢缩进代替标记语言...

Angular 2 的模块语法不是学的 Python,那是正规的 ES6 module 语法。还有 class 语法也是 ES 6 的。除了 AtScript 加入的 annotation 和 runtime type assertion 之外其余的代码都是 ES6 代码。

至于说等浏览器支持 ES6 的估计都不怎么写 JS,现在 transpiler 多得满地开花,虽说不至于支持 ES 6 全部特性,大部分支持还是没问题的。

#49 楼 @darkbaby123 谢谢 :) 虽然知道 atscript 是把代码编译成 es5,但我没想到是 es6 的规范..

我们的前端就是用 AngularJS 开发的:www.uclogs.com

#51 楼 @shaomq “你还在用 greg/sed/awk 等命令来分析和查找日志吗?”似乎應當是 grep

讨厌 google,讨厌他们老升级不照顾老用户。 讨厌 apple,每年更新一次,还不兼容老客户。 以前学的都白学了,做码农容易么。做码农是有成本的。

现在想想,最傻逼的还是 js

最近在看 Meteor,赶脚那才是未来😊

用 angularjs 的又遭了,多希望每个技术都像 linux shell 啊,学了用一辈子...

#57 楼 @saillee meteor 的确很酷炫,我只玩过 ruby 版的 volt。不过这两个框架都有共同的问题:dom rerender 还是在整个容器范围内,如果页面复杂将会是不可忽视的性能漏洞。

#58 楼 @debugger es6 出来又是一阵折腾,感觉现在前端开发还在试错阶段。要稳定的话 java 或许不错,加个特性都能给你拖几年 😄

@saiga 移动应用场景非常适宜使用 Meteor,这个场景下 dom rerender 的开销不会太大。

看看 http://vuejs.org/

,一个新的框架,每天 star 的人接近 10 人

码农的泪,不停滴学啊,学啊。什么时候才是头?

变得更简洁了,很稀饭,但是又要增加学习成本了,居然改变了 module 和 controller 的概念,这个应该肿么理解呢?

qnmd, 让我重新开始学就算了,还得比以前写更多的代码。。。

可以试试 Rails 的近亲 Batman.js

#66 楼 @Lucifer batman.js 已经死了...

@saiga 对哦 几天没去看 github,官方这么快不维护了....

看到了趋势是优化和加强 Directive,弱化 Controller,方向是不错。这样下去就越来越像 React 了。所以还是 React 大法好 😄

#51 楼 @shaomq 这个用 JQuery 也够吧?

#63 楼 @u1360749170 学完又没用了,该死的 Angular,学个蛋啊

1.3.0 使用中。。。

哎也不知道曾几何时,backward-comaptible 还是必要的要求。。。

#51 楼 @shaomq 刚刚试了一下,蛮好玩的..

正在选择前端框架,打算试试 AngularJs

公司的项目

#41 楼 @luikore --你没用个他的路由和模板的 ng-include 吧,我敢说 ag 解决当前 web 前端做的很好,对这种前端框架来说没有更好

#80 楼 @gaowenzhen 我都用过,一直在用,一直觉得不怎么样。像你这么说的一般都没怎么用过

需要 登录 后方可回复, 如果你还没有账号请 注册新账号