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性能：