-
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. Zone.js helps Angular to do change detection automatically. This sounds similar to React's reconciliation diffing algorithm. 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). 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. 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) You can put components inside eachother and link them directly. This may be similar to components using isolate scope now. 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. 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! 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. 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. 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.