Reasons to use ANGULAR2

1. Modular

Component-based programming is a trend in web development, and ANGULAR2 provides an efficient and simple way to develop components so that program development pays more attention to the implementation of business logic, without caring about how to load components and modules, how to reference and dependency injection implementations, and so on.

As shown in the following code, ANGULAR2 provides annotations to develop components that make component development easy, without the need for significant refactoring or rewriting of existing code, and the ability to use new functionality. ANGULAR2 focuses on the development of components and implements business logic through a combination of components, and the code focus is more focused, making component programming incredibly simple.

Import {Component} from ' @angular/core '; Import {bootstrap} from ' @angular/platform-browser-dynamic '; @Component ({ Selector: ' My-app ', Template: ' }) Export Class AppComponent { --business logic here } Bootstrap (AppComponent);

2. Pure JS

From the example above, you can see that ANGULAR2 is written using pure JavaScript code, called in the native window API, with no additional code features. The use of native JavaScript code can be written to reduce the Angular1 inside the $scope, $timeout and other non-native API, which makes development, testing and other links have become simple, reducing the cost of learning. Because of the way native APIs are used, Angular2 not only can write code snippets on its own, but also easily reference code written by others.

3. Type programming

ANGULAR2 does not have to be written using typescript, but why should we use a language that is not recognized by the browser and compile it into another language? The answer is: type checking, documentation, easy to share.

To give a simple example, this example is very simple, simply calculates the number of two numbers and returns the structure. It looks like there is something wrong with the wood, but the parameters we pass may come from an object or JSON data, and when we pass the non-numeric into it, the results are unsatisfactory.

Function Plus (A, b) { return a + B; } Let A = plus (2+3); A = 5 Let B = Plus (' 2 ' + ' 3 '); A = ' 23 '

When we use Typescript to write this code, passing arguments of a non-numeric type will prompt the type error during parsing.

Function Plus (A:number, B:number): number { return a + B; } Let A = Plus (' 2 ' + ' 3 '); Error

4. Performance improvement

In Angular1, performance is not a problem in most scenarios, but it has been criticized for having a triple loop in its code to implement dirty checking. Thus, in angular 2, by re-design and introduction of new technology, the principle of speed has been improved, according to the official said the "Change detection" efficiency increased by 500%, in the "Change Detection" algorithm has made two major improvements:

(1). In the design, the previous "multi-wheel check, until stable" strategy directly into the "round check, direct stability" strategy.

(2). On implementation, the "Change Detection" algorithm is moved into a worker thread created by Webworker, isolated from the main thread of JavaScript, executed "Change detection", and then notified to the main thread.

As an example of comparison, the amount of data is 30*500:

NG1 Core Code

<title>angular1 example</title> <script src= "Https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" ></script> <script> Angular . Module (' app ', []) . Controller (' Appctrl ', function ($scope, $interval) { var gridwidth = 30; var gridheight = 500; var interval = 50; var changeperinterval = 10000; var names = [' Joe ', ' Michael ', ' David ', ' Jones ', ' Phil ', ' Johnson ', ' Janes ', ' Anna ', ' Hugo ', ' Lina ', ' scotte ', ' Nam ', ' Tra N ', ' Bill ', ' Mark ', ' Rihanna ', ' Justin ', ' Bieber ', ' James ', ' Cameron ', ' Peter ', ' Anderson ', ' Ronaldo ', ' Scholes ', ' Giggs ', ' Lee ', ' Cedric ', ' Young ', ' Zim ', ' Hue ', ' Zac ', ' Jonas ', ' Miley ', ' Thomas ', ' September ', ' Green ', ' Red ', ' Rose ', ' Pink '; $scope. Grid = Creategrid (); Begindatachanges (); function Creategrid () { var grid = []; for (var row = 0; row < gridheight; row++) { Grid[row] = []; for (var column = 0; column < gridwidth; column++) { Grid[row].push (Getrandomname ()); } } return grid; } function GetRandomNumber (maxbound) { Return Math.floor (Math.random () * maxbound); } function Getrandomname () { var i = GetRandomNumber (names.length); return names[i]; } function Begindatachanges () { $interval (function () { $scope. Grid = Creategrid (); }, Interval); } }); </script> <body ng-controller= "Appctrl" > <table> <tr ng-repeat= "row in grid track by $index" > <TD ng-repeat= "name in row track by $index" > {{Name}} </td> </tr> </table> </body>

NG2 Core Code

Export Class APPCMP { Private Grid:any; Private gridwidth = 30; Private gridheight = 500; Private interval = 50; Private Changeperinterval = 10000; Private names = [' Joe ', ' Michael ', ' David ', ' Jones ', ' Phil ', ' Johnson ', ' Janes ', ' Anna ', ' Hugo ', ' Lina ', ' scotte ', ' Nam ', ' Tran ', ' Bill ', ' Mark ', ' Rihanna ', ' Justin ', ' Bieber ', ' James ', ' Cameron ', ' Peter ', ' Anderson ', ' Ronaldo ', ' Scholes ', ' Giggs ', ' Lee ', ' Cedric ', ' Young ', ' Zim ', ' Hue ', ' Zac ', ' Jonas ', ' Miley ', ' Thomas ', ' September ', ' Green ', ' Red ', ' Rose ', ' Pink '; Constructor () { This.grid = This.initializegrid (); This.begindatachanges (); } Initializegrid () { var grid = []; for (var row = 0; row < this.gridheight; row++) { Grid[row] = []; for (var column = 0; column < this.gridwidth; column++) { Grid[row].push (This.getrandomname ()); } } return grid; } GetRandomNumber (Maxbound) { Return Math.floor (Math.random () * maxbound); } Getrandomname () { var i = This.getrandomnumber (this.names.length); return this.names[i]; } Begindatachanges () { SetInterval (() = { This.grid = This.initializegrid (); }, This.interval); } }

In Chrome view performance is: Ng1 average time is about 360ms, ng2 average time is about 260ms, performance increased 100ms, although the wood has reached 500%, but the upgrade or has a larger optimization.

NG1 Performance:

NG2 Performance:

Reasons to use ANGULAR2