Angular 2.0 and 1.x comparison

Osborne effect

The angular team is faced with the question of how to talk about a lot of 2.0 of advanced new features without affecting the use of the 1.x version. This is the Osborne effect, a computer company in the 80 's, named after the market began to shut down. In short, the better the 2.0 version sounds, the fewer people are going to use the 1.x version. The difference is that the Angular 2.0 version is already available on GitHub by npm install [email protected]2.0.0-alpha.6 getting it out. However, this cannot be used for production, and it is still being extensively modified.

Angular 1.x vs. 2.0

Why does the angular team make such a big change? Angular not just trying to keep up, they also drive a lot of standard applications and enhance existing application architectures.

Bidirectional data binding

2.0 one-way data binding

In large projects, bidirectional data binding is used like spaghetti. Angular 2.0 introduces a unidirectional structure concept with no-loop directional graphs.

This sounds much like the work done by react flux. This structure can also be used by angular.

Although the two-way binding will disappear, angular founder Misko has declared: 2.0 will have methods to achieve two-way binding, although the data behind the implementation is one-way.

Observation device

2.0:zone.js

$scope. $watch, $scope. $apply, $timeout None of this is needed, which is why the 1.x version has such a large learning curve.

Zone.js can help angular realize the automatic detection of changes. This sounds much like react's difference comparison algorithm.

The angular team explained that the change detection is faster, the memory is smaller, and it is more powerful. The performance of change detection may increase with the advent of future object.observe.

The zone.js also supports invariant objects, which increases the speed of detection. This is because the compiler will assume that the data objects will not change to optimize.

Component communication

2.0: In addition to $broadcast and $emit, 2.0 have some minor changes, 1) you can send messages at the DOM layer, instead of scope;2, you can nest components and link them, which looks much like each component uses their own scope.

Dom

2.0: In many ways, it can be seen that Angular 2.0 is a DOM-style operation much like the react virtual DOM, which refers to the recently rendered view layer. About Angular Native,misko mentions that this view layer can be run on web worker, even Native.

Scope

The data will be organized into a tree-shaped structure

Angular 2.0 also uses the Web Component standard. For example, the shadow DOM can be used to create a separate scope. The angular team explained that 2.0 would have a shadow DOM simulation module (the current browser does not yet support Web Components), which would give a new choice to the standalone CSS, cool not!

Module

2:2 will definitely use ES6 's module syntax. At the same time, 2.0 also wants to introduce dependency injection by lazy loading. And in the past, with a single-instance management difference, 2.0 wants to use a hierarchical data structure to provide inheritance features. You will be able to control the life cycle of the module, such as services.

Instructions

2.0: will now be "component". In the 1.x release, directives are ubiquitous in large-scale project resolution conflicts. But in 2.0, you have to import your component to resolve the namespace conflict in the initialization. Although I don't understand how it works, 2.0 will create a prototype template for potential bindings to optimize the compiler speed.

Router

2.0: Although there is no unstable lazy loading feature in 1.x, it should look like it was ported from the 1.x version.

Brian Ford sent an introduction to the new route that deserves our attention. He describes how a new route can work in both 1.x and 2.x versions, which allows the team to gradually overdo it into the new version. He also recommends using the current popular ui-router to migrate addresses. Ui-router is good, but lacks some important features. For example, parsing can only pass parameters after a page is loaded. But what if you want to check the current data in the form form before going to the next page? The parsing of the ui-routers is triggered at once. Instead, the new router will provide a hook that allows you to do some of the actions you want to make somewhere.

Html

2.0: Although the syntax seems a little different, but remember, there must be a good reason behind this.

ng-directive

Components in HTML are split between the two types: (event) and [properties]. They are wrapped in parentheses and brackets so that both the naked eye and the machine can be identified, thus optimizing both types.

Event

(event) is used to initialize an action.

1.x             2.0ng-click       (click) (dbl-click)ng-keyup (keyup)

Properties

[Properties] are directly linked to the DOM property.

1.x               2.0ng-hide        [class:hidden]ng-checked [checked]

!foreach

!foreach is used to replace Ng-repeat.

<ul>  <li !foreach="#item in itemService.items"></li> </ul> 

#item

The properties of the object plus # can be directly bound to the HTML.

<input type="text" #userName /> 

{{ }}

The double curly braces are still visible in 2.0. Look, not everything is changing.

Component Name

There is no longer a case of camel naming and snake naming confusion. Now you have to make the name of the directive in your own assembly. Because angular 2.0 conforms to the Web Component standard, it needs-to link the name.

{    selector: ‘myApp-component‘}

Summarize

The Angular 2.0 version looks a bit magical. Although not fully available for production, you can play with it. Can be downloaded on GitHub. There are also some examples, such as ng2do.

If you like to reduce the learning curve, then you can now do the following things:

• Try to see Rob Eisenbergs's new frame: Aurelia. There is no doubt that it is well worth seeing, from which you can learn a lot about Web Components and Shadow dom.

• Use es6-(now probably ES2015) in angular1.x. Here are a number of examples of ES6 and JSPM.

• Learn more about Facebook's react.js. Many of the great ideas are spread out here, like flux.

• Looking at it, ANGULAR1 and 22 versions have little in common. The 2.0 version seems to be a radical change. Therefore it is necessary to take some time to study the framework of the heart, so as to quickly become an expert.

Click here to see About 2.0 related videos

Original link: http://shmck.com/comparing-angular-1-x-2-0/

Angular 2.0 and 1.x comparison