目录结构

关于angular的两个为什么ES6新特性

angular2八大核心构造

60分钟构造一个angular2应用——恒拓富豪榜ionic简介

关于angular2的两个为什么为什么angular2重写？

javascript框架跟类库一直是百花齐放的状态，特别是最近几年。回顾这几年，有些框架非常的引入注目，其中一个就是Angular。Angular最火的时间是2013年中到2014年末，但是在14年末的时候，官方突然宣布了一个重大消息，要完全重写Angular2.0。这个事情让很多想要使用Angular的人止步不前，也给人带来了很多的困惑，为什么Angular2.0要重写？

首先，性能。Angular这货刚创建出来的时候，并不是给开发人员用的。它是给那些需要快速创建持久化HTML表单的设计人员使用的一种工具。随着时间推移，它作了改变以适应各种场景，开发人员也用它建造更多、更复杂的应用程序。也正因如此，绑定与模板基础架构的性能问题凸显，问题根源在于原始设计，为了解决问题，需要新的策略。

第二，变化的web。这几年，web发生了很多变化，五六年前吧，没有jQuery这种类库的帮助，是基本不可能建立一个跨浏览器的网站的，但是现在浏览器的DOM实现

更加一致也更加快了，加上ES6规范的定稿，WebComponents即web应用组件化标准或者说概念的完善，这些变化统统要求Angular作出相应的变化以拥抱未来。第三，移动端。现在满大街都是智能手机和平板，虽说Angular1也可以用来构建移动应用，但是它并非为移动端而生，这里就产生了很多问题，包括提过的性能，它的路由的能力缺失，以及不能缓存预编译视图，甚至是过于普通的触摸支持，这些都需要根本的变更来修复。

第四，易用性。网上大把大把的开发者吐槽，Angularjs的学习曲线太他妈陡峭啦！甚至还有人非常直观的图表现了自己学习使用AngularJS的心态变化。

。

这跌宕起伏的心态，看着就糟心啊！这些原因逼迫着angular2进行重写。

为什么选择angular2？

可能大家都知道，无限极大平台2.0打算选用angular2+ionic2作为开发框架，为什么是angular2呢？

从前端的角度看，Vue有一万个好，Angular有一万种令人不满的地方，但企业领域的人偏爱集成解决方案，哪怕这个方案的语法是粗陋的，配置是繁琐的，连Java都用了，还怕这些？是的，angular2就像一台已经装配好的电脑，而react之流就像一个个零件，需要组装。而且angular2拥抱webcomponent，这跟用户想要做一个轻应用的需求不谋而合，在这点上angular2就狠狠甩了react十几条街，react根本不angular2支持对html的拓展。而且angular2更加稳定、可扩展和更加完善。再说了，还具有下面几个鲜明的特性

跨平台（渐进式web应用，原生，桌面）面向未来（以es6为基础加入了类型和注解。Es6能让angular有更出色的表现，让代码变得更加清洁，易读性更强）开发灵活（可以自由决定对开发语言的选择，ES6,typescript等）速度与性能（代码生成、统一，代码拆分）生产率（模板，angular命令行工具，各种ide）完整的开发故事（测试，动画，可访问性）ES6新特性1.let和const

1.let命令

let命令，用来声明变量。用法类似于var，但是所生命的变量，只在let命令所在的代

码块内有效。例子：

{leta=10;varb=1;}a//ReferenceError:aisnotdefined.b//12.let命令的特点

只在所在代码块内有效不存在变量提升，变量一定要在声明后使用，否则会报错暂时性死区（只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响）不允许重复声明暂时性死区例子：

if(true){//TDZ(暂时性死区）开始tmp='abc';//ReferenceErrorconsole.log(tmp);//ReferenceErrorlettmp;//TDZ(暂时性死区）结束console.log(tmp);//undefinedtmp=123;console.log(tmp);//123}3.let带来了什么

众所周知，ES5只有全局作用域和函数作用域，没有块级作用域，这导致了很多不合理的场景，一内层变量可能会覆盖外层变量，二用来计数的循环变量泄露为全局变量。而let实际上为javascript新增了块级作用域。4.const命令

const声明一个可读的常量。一旦声明，就必须立即初始化，不能留到以后赋值，且常量的值不能改变。与let命令相同（具有相同的特点），只在声明所在的块级作用域内有效。（对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址）

箭头函数

1.箭头函数的语法

ES6允许用“箭头”（=>）定义函数。箭头左边是参数，右边是函数的具体内容。例子：

varf=v=>v;//等同于varf=function(v){returnv;};如果箭头函数不需要参数或者需要多个参数，就使用一个圆括号代表参数部分。

varf=()=>5;//等同于varf=function(){return5};varsum=(num1,num2)=>num1+num2;//等同于varsum=function(num1,num2){returnnum1+num2;};如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

varsum=(num1,num2)=>{returnnum1+num2;}由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

vargetTempItem=id=>({id:id,name:\"Temp\"});2.箭头函数使用注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象（尤其值得注意）。不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。不可以使用yield命令，因此箭头函数不能用作Generator函数。在es5中，this对象的指向是可变的，但是在箭头函数中，它是固定的。箭头函数this代码示例

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。

this指向的固定化，是因为箭头函数本身没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。箭头函数转化成ES5的代码如下：

//ES6functionfoo(){setTimeout(()=>{console.log('id:',this.id);},100);}//ES5functionfoo(){var_this=this;setTimeout(function(){console.log('id:',_this.id);},100);}由于箭头函数没有自己的this，所以我们就不能用call()、apply()、bind()这些方法去改变this的指向。

长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数”绑定”this，很大程度上解决了这个困扰。

但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（functionbind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。

函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

Promise

1.Promise的含义

Promise是一部编程的一种解决方案，比传统的解决方案——回调函数和事件更加合理更加强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一愕对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点：

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任务其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英文意思是“承诺”，表示其他手段无法改变。一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只有这两种情况发送，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发送了，你再对Promise对象添加回调函数，也会立即得到这个结果。。这跟事件是完成不同的，事件的特点是，如果你错过了它，再去监听，是得不到结果的。有了Promise对象，就可以用同步操作的流程表达异步操作，避免了层次嵌套的回调函数。此外，Promise对象提供统一的接口，使控制异步操作更加容易。Promise的优点很明显，同样的，它的缺点也是很明显的：

无法取消Promise，一旦新建它就会立即执行，无法中途取消；如果不设置回调函数，Promise内部抛出的错误，不会反应到外部；当处于Pending状态时，无法得知目前进展到哪一个阶段（比如，是刚刚开始还是即将完成）2.Promise基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。

varpromise=newPromise(function(resolve,reject){//...somecodeif(/*异步操作成功*/){resolve(value);}else{reject(error);}});Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending

变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value){//success},function(error){//failure});then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

下面看一个Promise对象的简单例子

代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。Promise实例的状态变为Resolved，过了指定的时间（ms参数）以后，就会触发then方法绑定的回调函数。Promise新建后立即执行，所以首先输出的是“Promise”。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

class

1.class语法

javascript语言的传统方法是通过构造函数，定义并生成新对象。就像下面这个例子：

functionPoint(x,y){this.x=x;this.y=y;}Point.prototype.toString=function(){return'('+this.x+','+this.y+')';};varp=newPoint(1,2);这种写法跟传统的面向对象语言（如c++，java）差异很大，这让很多有传统面向对象语言背景的程序员感到非常的困惑。

因此，ES6提供了更接近传统语言的写法，引入了Class（类）的概念，作为对象的模板。通过class关键字，可以定义类。但是，从根本上说，ES6的class可以看作只是一饿语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面point的例子用ES6的“类”进行改写，就是下面这样。

//定义类classPoint{constructor(x,y){this.x=x;this.y=y;}toString(){return'('+this.x+','+this.y+')';}}它定义了一个“类”，里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。ES6的类，完全可以看作构造函数的另一种写法。下面，我们通过表格来看一下ES6的类跟ES5构造函数之间的异同点。2.class语法与ES5行为对比ES6Class使用new命令产生新的示例对象ES5构造函数是是具有prototype属性prototype对象的constructor属性，直接指向“类”的本身类的内部所有定义的方法，都是不可枚举的不使用new是没法调用是是是是是是否否Module

1.ES6模块产生从必然性及其设计思想

Module功能是为了解决模块化问题而提出的。历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。为此，开发者社区制定了一些模块加载方案，我们耳熟能详的就有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。2.严格模式

ES6的模块自动采用严格模式，不管你有没有在模块头部加上\"usestrict\";。严格模式主要有以下限制。

变量必须声明后再使用函数的参数不能有同名属性，否则报错不能使用with语句不能对只读属性赋值，否则报错不能使用前缀0表示八进制数，否则报错不能删除不可删除的属性，否则报错不能删除变量deleteprop，会报错，只能删除属性deleteglobal[prop]eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化不能使用arguments.callee不能使用arguments.caller禁止this指向全局对象不能使用fn.caller和fn.arguments获取函数调用的堆栈增加了保留字（比如protected、static和interface）3.export命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。export输出变量的写法有两种，

//写法一exportvarm=1;//写法二varm=1;export{m};//写法三重命名varn=1;export{nasm};//输出多个变量的推荐写法//profile.jsvarfirstName='Michael';varlastName='Jackson';varyear=1958;export{firstName,lastName,year};如果需要输出多个变量，我们推荐的写法是，在export命令后面，使用大括号制定要输出的一组变量，这种写法可以让我们一眼就看清楚输出了哪些变量。export命令除了输出变量，还可以输出函数或类（class）。

exportfunctionmultiply(x,y){returnx*y;};exportclassPoint{constructor(x,y){this.x=x;this.y=y;}toString(){return'('+this.x+','+this.y+')';}}4.import命令

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。语法如下：

//main.jsimport{firstName,lastName,year}from'./profile';functionsetName(element){element.textContent=firstName+''+lastName;}上面代码的import命令，就用于加载profile.js文件，并从中输入变量。import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。同样的，import命令可以使用as关键字对输入的变量重新命名。

import{lastNameassurname}from'./profile';需要注意的是，import命令具有提升效果，会提升到整个模块的头部，首先执行。因此，下面这段代码不会报错。

foo();import{foo}from'my_module';angular2八大核心Angular2是一个用HTML和Javascript或者一个编译成javascript的语言（如Typescript或者Dart），来构建客户端应用的框架。

这个框架包括一系列与之紧密合作的库，有些是核心库，有些的可选库。

我们在angular里面，是这样编写程序的，用directive（即指令，带angular扩展语法的html）来编写模板，用组件类管理这些模板，用服务添加应用逻辑，用根组件完成angular启动。

Angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

首先，我们先从宏观上了解angular架构，如下图：

架构图中展现了angular应用中的8个主要构造块：

模块(Modules)组件(Components)模板(Templates)元数据(Metadata)数据绑定(DataBinding)指令(Directives)服务(Services)依赖注入(DependencyInjection)模块

Angular应用是模块化的。应用程序通常都是由很多模块组装而成的。虽说完全可以使用ES5来开发Angular2应用，但是这并不是官方推荐的做法，官方强烈推荐使用模块化设计，推荐使用Typescript，Typescript对ES6的模块语法支持性很好。官网目前也只有typescript的教程。

大多数Angular应用都有一个AppComponent。它通常位于一个名叫app.component.ts的文件中，里面有这样一条export语句，

exportclassAppComponent{}它告诉Typescript：这是一个模块，其中AppComponent类是公开的，可以被应用程序中的其他模块访问。当需要引用AppComponent时，这样导入：

import{AppComponent}from'./app.component';这跟我们之前介绍的ES6的模块语法完全一样。（模块就暂时这样，后续可能还要增加一些内容）关键点：

Angular应用是由模块组成的。模块导出一些东西——类，函数，值，供其它模块导入。首选的写法是把应用写成一组模块，每个模块只导出一样东西。组件

组件控制屏幕中巴掌大的那么一小块地方，这块地方被称之为视图。我们在类中定义组件的应用逻辑(它被用来为视图提供支持)。组件通过一些由属性和方法组成的API与视图交互。

比如，在HeroListComponent组件中，可能有一个heroes属性，它返回一个英雄的数组，而这些数据是从服务中取得的。它可能还有一个selectHero()方法，当用户从列表中点击一个英雄时，用它来设置selectedHero属性。这个组件可能是像这样的一个类：

exportclassHeroListComponentimplementsOnInit{heroes:Hero[];selectedHero:Hero;constructor(privateservice:HeroService){}ngOnInit(){this.heroes=this.service.getHeroes();}selectHero(hero:Hero){this.selectedHero=hero;}}但是如果只是这样，这就仅仅是一个类，而不能称之为组件，它现在是万事俱备只欠东风，下面我们讲元数据的时候会说明这个问题。

当用户在这个应用中“移动”时,Angular会创建、更新和销毁组件。开发人员可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，比如上面声明的ngOnInit()。

模板

我们通过组件的自带的模板来定义视图。模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)。说白了，模板就是一个使用了Angular模板语法以及自定义元素标签的html。看起来可能想这样：

HeroList

Pickaherofromthelist

{{hero.name}}