Angular1 與 Angular2的區別

現在在用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的改版升級是非常給力的；