The difference between ANGULAR1 and ANGULAR2

Now I'm doing a project with ng1.5.8, Ng's advantages and characteristics I do not have to say, ng1 after the update to 1.5/1.6 has not released a new version, NG2 has been on the test for a long time, as many systems and frameworks, each big version of the update will have new features to join in, Although has not used NG2 to do enterprise-level projects, usually also understand a lot of ng2 improvements, the following to comb a few ng1 and ng2 between some of the differences; ANGULAR2 is not upgraded from ANGULAR1, ANGULAR2 is rewritten, so the difference between them is relatively large, It's not like you used 1 to get started. 2, the plan can be considered a new framework; ANGULAR2 uses JavaScript's superset ' typescript ', so angular1 and Angular2 are different from the beginning of the setting; Angular1.x was designed primarily for the PC side, with fewer support for the mobile side (and, of course, some other derivative frameworks such as ionic), while the ANGULAR2 was designed to contain the mobile end; The core concept of angular 1 is $scope, but there is no $ in angular2 SCOPE,ANGULAR2 uses Zone.js to record monitoring changes; the controller in angular 1 is no longer used in ANGULAR2, or the controller is replaced by the ' angular2 ' component in Component:

Angular 1.x using Controller and $scope ...
var myApp = angular
 . Module ("MyModule", []) 
. Controller ("Productcontroller", function ($scope) {
var prods = {name: ' Prod1 ', quantity:1}; 
$scope. Products = prods;
});
 
Angular 2 components using typescript
... Import {Component} from ' Angular2/core ';
@Component ({
 selector: ' Prodsdata ',
 Template: '
 
In angular 2, the structure and usage of the instruction are adjusted, for example, the ng-repeat in 1 is replaced by *ngfor.
Angular 1.x structural directives: ...
<ul>
     <li ng-repeat= "item in Items" >
         {item.name}}
     </li>
</ul>
 
// /angular 2 Structural directives: ...
.... <ul>
     <li *ngfor= "#item of items" >
         {item.name}}
     </li>
</ul>
In angular 2, the original instruction is prefixed with a hash (#) prefix when used.
<div *ngfor= "#technicalDiary of Technicaldiries" >
Bidirectional data binding: [(Ngmodel)] is written to replace the Ng-model
Angular 1.x, two-way data binding using ' Ng-model '
... <input ng-model= "Technology.name" ></input>
 
/////in angular 2,two-way data binding using ' [(Ngmodel)] ' ..........
<input [(Ngmodel)]= "Http://technology.name" ></input>
Angular 2 main performance optimization improvements are the use of layered dependency injection systems. Angular 2 implements change detection based on one-way tree, which improves performance again; These optimizations are angular2 faster than angular1, and angular 2 is about 20kb in size, which is much less than the ANGULAR1 volume, In the mobile end of the application, the flow of convenience more advantages; Support Shadow DOM; native mobile rendering for Android and IOS; support for service-side rendering
Summarize:

Many people feel that from the angular1 to angular2 when learning curve steep, so in the angular2 when the first to do a bit of preparation for the homework is better, but also because of large changes in the design of ANGULAR2, the original components and working principles have a certain understanding, Learning to use the process is also better across the ladder.

 Although ANGULAR2 is still applying the test phase, the new version has made significant improvements to ANGULAR1 and believes it will be increasingly applied to various application developments, and ANGULAR2 will only load the required components (components) This is also a good improvement, some statistics on the site of the data show angular faster than angular1 five times times, have to say that this angular2 upgrade is very to the force;