-
Notifications
You must be signed in to change notification settings - Fork 2
Angular 2.0 和 1.x比较
The Obsorne Effect
奥斯本效应
The Angular team faces a problem. How do you talk the great new features of Angular 2.0 under development without damaging use of the current 1.x? This effect is often called the Obsborne effect, named after a 1980s computer company whose marketing contributed to putting the company out of business. In short, the better 2.0 sounds, the less people will want to start or continue projects built with 1.x. But the secrets out. Angular 2.0 is available on github and you can play around with it using npm install [email protected]. Keep in mind, it is NOT ready for production and subject to (likely a lot of) change.
Angular团队面临着这样的问题：如何在不影响1.x版本使用的情况下谈论很多2.0的高级新功能。这就是奥斯本效应，上个世纪80年代的电脑公司，终因市场源于而歇业后命名。简而言之，2.0版本听起来越好，就越少有人去使用1.x版本。不同的是，Angular 2.0版本已经可以从github上通过npm install [email protected] 得到它了。但是，这个不能用于生产，它还在被大量的修改。
Angular 1.x vs. 2.0
Angular 1.x vs. 2.0
It's important to see why the Angular team are making such drastic changes. Angular isn't just trying to keep up, they're pushing forward a lot of standards, enhancements and better app architecture.
为什么Angular团队会做出如此大得变化的原因是什么呢。Angular不只是试图跟上，他们还推动了大量的标准，增强了现有的应用架构。
2-way data binding
双向数据绑定
2.0: 1-way data binding
2.0 单向数据绑定
In larger apps, 2-way binding can develop into spaghetti. Angular 2.0 will use a concept called Directed Acyclic Graph, a kind of unidirectional architecture.
在大型项目中，双向数据绑定会被使用的像意大利面条一样。Angular 2.0会使用无回路有向图的单向结构概念。
This sounds a lot like what React is doing right with Flux. This kind of architecture can be used with Angular as well. Read more.
这听起来很像React的Flux所做的工作。这种结构也可以被Angular来使用。
Though 2-way binding will disappear, Misko has stated that Angular 2.0 may function in a way that data bindings appear 2-way, though behind the scenes data flows 1-way.
虽然双向绑定会消失，Angular创始人Misko已经声明：2.0中会有方法实现双向绑定，虽然实现的背后数据是单向的。
watchers
观查器
2.0: Zone.js
2.0：Zone.js
$scope.$watch, $scope.$apply, $timeout. No more. Whew! Using these was part of the reason Angular 1.x had such a huge learning curve.
$scope.$watch, $scope.$apply, $timeout这些都不在需要了，这也是1.x版本有如此之大的学习曲线的原因。
Zone.js helps Angular to do change detection automatically. This sounds similar to React's reconciliation diffing algorithm.
Zone.js可以帮Angular实现变化的自动检测。这听起来很像React的差异比较算法。
The Angular team explained change detection is now faster, uses less memory and less power. Change detection may improve further with object.observe coming to other browsers (currently just Chrome).
Angular团队解释道，现在的变化检测更快了，同是内存更小了，同时也更加强大了。变化检测的性能可能随着将来的object.observe的到来而有更大的提升。
Zone.js also supports using immutable objects for even faster processing. This is because the compiler can assume the data objects won't change and optimize.
Zone.js同时支持不变对象，这样检测的速度上会有更大的提升。这是因为编译器会认为数据对象不会变化从而进行优化。
component communication
组件通信
2.0: Instead of $broadcast & $emit, 2.0 has a few differences: 1) You can emit messages in the DOM, rather than the scope.
2.0：除了$broadcast 和 $emit，2.0还有一些小得变化，1）你可以在DOM层发送消息，而不是在scope.
- You can put components inside eachother and link them directly. This may be similar to components using isolate scope now.
你可以组件嵌套，然后link他们，这看上去很像每个组件都使用它们独立的scope。
DOM
DOM
2.0: In many ways, Angular 2.0 seems to handle DOM style manipulation with something similar to React.js's virtual DOM, which they referred to in a recent presentation as the "view". In response to a recent question about 'Angular Native?', Misko mentioned that this View could be run on a web worker or even potentially on native.
2.0：从很多方面可以看出，Angular 2.0对于DOM样式的操作很像React的virtual DOM，它引用的是最近呈现的view层。关于Angular Native，Misko提到，这个view层可以运行于web worker，甚至是native。
scope
scope
Data will be organized in a tree like architecture.
数据将会被组织成数据结构
Angular 2.0 will also use Web Components standards. For example, the shadow DOM could be used to create an isolate scope. The Angular team explained that there is also a shadow DOM emulated mode (for browsers not support web component features yet.) This would allow additional options for isolating css styles as well. Cool!
Angular 2.0也会使用web组件标准。比如，shadow DOM可以用来创建独立的scope。Angular团队解释到，2.0会有一个shadow DOM模拟模块（当前浏览器还不支持web组件）。这将给独立css提供新的选择，很酷不是么！
Modules
模块
2.0: 2.0 is of course going to use ES6 module syntax. On top of that, Angular 2.0 is expected to have 'amazing' dependency injection with lazy-loading. Rather than using singletons, 2.0 will have a kind of hierchical data structure likely offers inheritance features. You will also be able to control the lifetime of modules such as services.
2.0：2.0将肯定使用ES6的模块语法。同时，2.0还希望通过懒加载来引入依赖注入。和以往通过单例方式管理不同的是，2.0希望使用一种层次化数据结构来提供继承特性。你将能够控制模块的生命周期，比如services。
Directives
指令
2.0: Now called "Components". In Angular 1.x, directives are available everywhere on instantiation, creating name-space overlap problems for large projects. In 2.0, you must import your components which avoids this problem. Although I'm not clear on how it works, Angular 2.0 will create a prototypical template of all potential bindings to optimize for compiler speed.
2.0：现在将被成为“组件”。在1.x版本中，指令在大型项目解决冲突中随处可见。但是在2.0中，你必须导入你的组件才能去解决初始化中得命名空间冲突问题。虽然我不明白它是如何工作的，但是2.0将会创建一个原型模板用于潜在的绑定以优化编译器速度。
Router 2.0: Check it out: 2.0 router. It should be back-ported to 1.x as well, though without the feature of lazy-loading which was deemed unstable for 1.x. [edit: March 8, 2015] Brian Ford gave a presentation about the new router @ng-conf that's worth a watch. In it he describes how the new router can use both Angular 1.x & 2.x modules, allowing teams to gradually change from one router to the other. He also proposed a possible migration path from the popular ui-router. Ui-router is great, but lacks some important features. For example, resolve can only pass data before a page is loaded. What if you want to check if a users current data is saved in a form before routing to the next page? Ui-router's resolve is a one-time trigger. Instead, the new router will provide 'Lifecycle Hooks' that let you specify exactly when you want an action to take place. HTML 2.0: Though the syntax looks very different, keep in mind that the differences have good reasons behind them. ng-directives Components in the HTML are broken up into two types: (events) & [properties]. They are wrapped in round or square brackets to help both humans and the computer differentiate and optimize for the two types. (events) (events) refer to user initiated actions. 1.x 2.0 ng-click (click) (dbl-click) ng-keyup (keyup) [properties] [properties] now link directly into the DOM properties. 1.x 2.0 ng-hide [class:hidden] ng-checked [checked] !foreach !foreach is the proposed replacement for ng-repeat.