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

使用Angular2理由的更多相关文章

  1. Angular2+URL中的 # 引发的思考

    1.先分析 # 的作用 1.1. # 的涵义 #代表网页中的位置.其右面的字符就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页inde ...

  2. Angular2、4入门基础知识（小的概念）

    1. 使用引用符来格式化HTML代码. @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', sty ...

  3. Ionic2优于Ionic1的6个理由

    经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进 ...

  4. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  5. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  6. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  7. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  8. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  9. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

随机推荐

  1. 【笔记3】用pandas实现矩阵数据格式的推荐算法 (基于用户的协同)

    原书作者使用字典dict实现推荐算法,并且惊叹于18行代码实现了向量的余弦夹角公式. 我用pandas实现相同的公式只要3行. 特别说明:本篇笔记是针对矩阵数据,下篇笔记是针对条目数据. ''' 基于 ...

  2. Qt——浅谈样式表

    优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...

  3. 让所有的浏览器都能识别HTML5标签样式的小插件

    如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的 ...

  4. 第一章，阿里的Dubbo完美初级搭建，待续。。。

    1.1 后台工程搭建分析 Web工程. Maven的常见打包方式:jar.war.pom Pom工程一般都是父工程,管理jar包的版本.maven插件的版本.统一的依赖管理.聚合工程. Taotao- ...

  5. Codeforces Round #380(div 2)

    A. 题意:给你一串字符串(<=100),将ogo ogogo ogogogo ogogogogo……这种全部缩成***,输出缩后的字符串 分析:第一遍扫对于那些go的位置,记录下next[i] ...

  6. 集合覆盖 顶点覆盖： set cover和vertex cover

    这里将讲解一下npc问题中set cover和vertex cover分别是什么. set cover: 问题定义: 实例:现在有一个集合A,其中包含了m个元素(注意,集合是无序的,并且包含的元素也是 ...

  7. Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

    注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...

  8. 美化radio和checkbox样式

    HTML部分 <div id="holder"> <div> <div class="tag">Checkbox Small ...

  9. 【BZOJ-1426】收集邮票 概率与期望DP

    1426: 收集邮票 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 261  Solved: 209[Submit][Status][Discuss] ...

  10. MapReduce实现手机上网流量分析（业务逻辑）

    一.问题背景 现在的移动刚一通话就可以在网站上看自己的通话记录,以前是本月只能看上一个月.不过流量仍然是只能看上一月的. 目的就是找到用户在一段时间内的上网流量. 本文并没有对时间分组.下一节进行分区 ...