1. 組件化
組件化編程是web 發展的一個趨勢，Angular2提供高效簡單的組件開發方式，使程序開發更加關注業務邏輯的實現，而不用關心如何加載組件和模塊，如何引用及依賴注入的實現等。
如下代碼所示，Angular2提供注解來開發組件，使組件開發變得簡單方便，不需要對現行代碼進行重大重構或者改寫，就可以使用新的功能。Angular2關注與組件的開發，通過組件間的組合來實現業務邏輯，代碼關注點更加集中，從而使得組件編程變得異常簡單。
| import {Component} from '@angular/core'; import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({ selector: 'my-app', template: `<h1>My First Angular 2 App</h1>` }) export class AppComponent { --business logic here }
bootstrap(AppComponent); |
2. 純粹的JS
通過上面的示例，可以發現 Angular2使用純粹的javascript代碼編寫，調用的方式采用原生的window api，沒有其他額外的代碼特性。使用原生的javascript代碼即可編寫，減少了Angular1里面$scope，$timeout等非原生API，這使得開發，測試等環節都變得簡單，降低了學習成本。因為采用的都是原生API的方式，Angular2 不僅能夠自己寫代碼片段，而且可以方便的引用他人所寫的代碼。
3. 類型編程
Angular2不一定要使用TypeScript來編寫，然而為什么我們要使用一種瀏覽器無法識別的語言，然后編譯成另外一種語言去使用呢？答案就是：類型檢查，文檔化，便於共享。
舉個簡單的例子，這個例子十分簡單，簡單的計算兩個數字的和，並將結構返回。看上去木有什么問題，但是我們傳遞的參數有可能來自於某個對象或者json數據，當我們將非數字傳遞進去的時候，得到的結果卻不盡人意。
| function plus(a, b) { return a + b; }
let a = plus(2+3); // a = 5 let b = plus(‘2’+’3’); // a = ‘23’ |
當我們使用TypeScript進行編寫這段代碼的時候，傳入非數字類型的參數時在解析的過程中就會提示類型錯誤。
| function plus(a:number, b:number):number { return a + b; }
let a = plus('2'+'3'); // error |
4. 性能提升
在Angular1中，絕大多數場景下性能都不是問題，不過因為其代碼中存在的一個用來實現臟檢查的三重循環而飽受抨擊。於是，在Angular 2中，通過重新設計和引入新技術，從原理上對速度進行了提升，據官方說是把“變更檢測”的效率提升了500%，在“變更檢測”算法上做了兩項主要的改進：
(1). 在設計上，將以前的“多輪檢查、直到穩定”策略直接轉變為“一輪檢查、直接穩定”策略。
(2). 在實現上，把“變更檢測”算法移入了由WebWorker創建的輔助線程中執行，從JavaScript主線程隔離開來，執行完“變更檢測”，再通知主線程。
舉一個對比的例子，數據量是30*500：
ng1核心代碼
| <html ng-app="app"> <head> <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', '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']; $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> </head> <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> </html> |
ng2 核心代碼
| 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); } } |
在chrome查看性能分別是：ng1的平均時長是360ms左右，ng2的平均時長是260ms左右，性能提升100ms，雖然木有達到500%，但是提升還是有較大的優化。
ng1性能：
ng2性能：