Angular 1與 Angular 2之間的一些差異

　　如今在用ng1.5.8作一個項目，ng的優勢和特性我就不用多說了，ng1在陸續更新到1.5/1.6後就沒再推出新版本了，ng2已經面世測試好久了，如同不少系統和框架同樣，每一個大的版本更新都會有新特性加入進來，雖然尚未用ng2作過企業級項目，平時也瞭解了不少ng2的改進的地方，下面就來梳理一下ng1和ng2之間一些差別；

• Angular2不是從Angular1升級過來的，Angular2是重寫的，因此他們之間的差異比較大，不是你用過1就能直接上手2的，計劃能夠認爲是一個新的框架；
• Angular2使用了javascript的超集‘Typescript’，因此angular1和angular2從設定之初就是不同的；
• Angular1.x在設計之初主要是針對pc端的，對移動端支持較少（固然也有其餘一些衍生框架如ionic），而Angular2是設計包含移動端的；
• Angular 1的核心概念是$scope，可是angular2中沒有$scope，angular2使用zone.js來記錄監測變化；
• Angular 1 中的控制器在angular2中再也不使用，也能夠說控制器在angular2中被‘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: `
 <h3>{{techncalDiary}}</h3> `
})
export class ProductComponent {
 prods = { name: ‘Prod1’, quantity: 1 };
}

• Angular 2中, 指令的結構、用法做了一些調整，好比1中的ng-repeat被*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>

• Angular 2中, 自帶原始指令在使用的時候要加上哈希(#)前綴

<div *ngFor="#technicalDiary of technicalDiries">

• 雙向數據綁定: [(ngModel)]的寫法替換了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主要的性能優化改進是使用了分層依賴注入系統。 Angular 2實現了基於單向樹的變化檢測，這再次提升了性能；這些優化改進是的angular2的速度比angular1的速度提升不少；
• Angular 2的大小是20kb左右，相對於angular1體積減小不少，在移動端的應用中，流量方便更佔優點；
• 支持影子 DOM；
• 支持 Android 和 iOS 的原生移動渲染；
• 支持服務端渲染

總結：

　　不少人以爲從angular1轉向angular2的時候學習曲線陡峭，因此在進軍angular2的時候仍是先作點預習功課比較好，也是由於改動較大，對angular2的設計思想、原生組件寫法和工做原理有必定的瞭解，學習使用的過程當中也更好跨階。

　　儘管angular2還在應用測試階段，可是新版本相對於angular1有了長足的優化改進，相信它會愈來愈多的被應用到各個應用開發中，而且angular2只會load應用所需的組件(components)，這也是個很好的改進，一些統計網站上的數據顯示angular的速度比angular1快五倍，不得不說此次angular2的改版升級是很是給力的；本篇列舉了一些本人針對angular2新特性的理解，不少point沒有寫出來(有些還不很瞭解熟悉)，開發正式項目後或者瞭解更多新特性後再慢慢填補更新；

 

　　原文地址：Angular 1與 Angular 2之間的一些差異，薛陳磊 | Share the world