angular2使用培训

Angular2使用培训目录结构关于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根本不支持对html的拓展。而且angular2更加稳定、可扩展和更加完善。再说了，angular2还具有下面几个鲜明的特性跨平台（渐进式web应用，原生，桌面）面向未来（以es6为基础加入了类型和注解。Es6能让angular有更出色的表现，让代码变得更加清洁，易读性更强）开发灵活（可以自由决定对开发语言的选择，ES6,typescript等）速度与性能（代码生成、统一，代码拆分）生产率（模板，angular命令行工具，各种ide）完整的开发故事（测试，动画，可访问性）ES6新特性1.let和const1.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对象），绑定到右边的函数上面。Promise1.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实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。Promise新建后立即执行，所以首先输出的是“Promise”。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。class1.cl