《angular2使用培训》由会员分享，可在线阅读，更多相关《angular2使用培训（53页珍藏版）》请在金锄头文库上搜索。
1、Angular2使用培训目录结构关于angular的两个为什么ES6新特性angular2八大核心构造60分钟构造一个angular2应用恒拓富豪榜ionic简介关于angular2的两个为什么为什么angular2重写？javascript框架跟类库一直是百花齐放的状态，特别是最近几年。回顾这几年，有些框架非常的引入注目，其中一个就是Angular。Angular最火的时间是2013年中到2014年末，但是在14年末的时候，官方突然宣布了一个重大消息，要完全重写Angular2.0。这个事情让很多想要使用Angular的人止步不前，也给人带来了很多的困惑，为什么Angular2.0要重写？首
2、先，性能。Angular这货刚创建出来的时候，并不是给开发人员用的。它是给那些需要快速创建持久化HTML表单的设计人员使用的一种工具。随着时间推移，它作了改变以适应各种场景，开发人员也用它建造更多、更复杂的应用程序。也正因如此，绑定与模板基础架构的性能问题凸显，问题根源在于原始设计，为了解决问题，需要新的策略。第二，变化的web。这几年，web发生了很多变化，五六年前吧，没有jQuery这种类库的帮助，是基本不可能建立一个跨浏览器的网站的，但是现在浏览器的DOM实现更加一致也更加快了，加上ES6规范的定稿，Web Components即web应用组件化标准或者说概念的完善，这些变化统统要求An
3、gular作出相应的变化以拥抱未来。第三，移动端。现在满大街都是智能手机和平板，虽说Angular1也可以用来构建移动应用，但是它并非为移动端而生，这里就产生了很多问题，包括提过的性能，它的路由的能力缺失，以及不能缓存预编译视图，甚至是过于普通的触摸支持，这些都需要根本的变更来修复。第四，易用性。网上大把大把的开发者吐槽，Angularjs的学习曲线太他妈陡峭啦！甚至还有人非常直观的图表现了自己学习使用AngularJS的心态变化。这跌宕起伏的心态，看着就糟心啊！这些原因逼迫着angular2进行重写。为什么选择angular2？可能大家都知道，无限极大平台2.0打算选用angular2+io
4、nic2作为开发框架，为什么是angular2呢？从前端的角度看，Vue有一万个好，Angular有一万种令人不满的地方，但企业领域的人偏爱集成解决方案，哪怕这个方案的语法是粗陋的，配置是繁琐的，连Java都用了，还怕这些？是的，angular2就像一台已经装配好的电脑，而react之流就像一个个零件，需要组装。而且angular2拥抱web component，这跟用户想要做一个轻应用的需求不谋而合，在这点上angular2就狠狠甩了react十几条街，react根本不支持对html的拓展。而且angular2更加稳定、可扩展和更加完善。再说了，angular2还具有下面几个鲜明的特性 跨平
5、台（渐进式web应用，原生，桌面） 面向未来（以es6为基础加入了类型和注解。Es6能让angular有更出色的表现，让代码变得更加清洁，易读性更强） 开发灵活（可以自由决定对开发语言的选择，ES6,typescript等） 速度与性能（代码生成、统一，代码拆分） 生产率（模板，angular命令行工具，各种ide） 完整的开发故事（测试，动画，可访问性）ES6新特性1.let 和 const1.let命令let命令，用来声明变量。用法类似于var，但是所生命的变量，只在let命令所在的代码块内有效。例子： let a = 10; var b = 1;a / ReferenceError: a
6、 is not defined.b / 12.let命令的特点 只在所在代码块内有效 不存在变量提升，变量一定要在声明后使用，否则会报错 暂时性死区（只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响） 不允许重复声明暂时性死区例子：if (true) / TDZ(暂时性死区）开始 tmp = abc; / ReferenceError console.log(tmp); / ReferenceError let tmp; / TDZ(暂时性死区）结束 console.log(tmp); / undefined tmp = 123; conso
7、le.log(tmp); / 1233.let带来了什么众所周知，ES5只有全局作用域和函数作用域，没有块级作用域，这导致了很多不合理的场景，一内层变量可能会覆盖外层变量，二用来计数的循环变量泄露为全局变量。而let实际上为javascript新增了块级作用域。4.const命令const声明一个可读的常量。一旦声明，就必须立即初始化，不能留到以后赋值，且常量的值不能改变。与let命令相同（具有相同的特点），只在声明所在的块级作用域内有效。（对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址）箭头函数1.箭头函数的语法ES6允许用“箭头”（=）定义函数。箭头左边是参数，右边是函数的具
8、体内容。例子：var f = v = v;/ 等同于var f = function(v) return v;如果箭头函数不需要参数或者需要多个参数，就使用一个圆括号代表参数部分。var f = () = 5;/等同于var f = function () return 5;var sum = (num1, num2) = num1 + num2;/ 等同于var sum = function(num1, num2) return num1 + num2;如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。var sum = (num1, num2)
9、 = return num1 + num2; 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。var getTempItem = id = ( id: id, name: Temp );2.箭头函数使用注意点 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象（尤其值得注意）。 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。 不可以使用yield命令，因此箭头函数不能用作Generator函数。在es5中，this对象的指
10、向是可变的，但是在箭头函数中，它是固定的。箭头函数this代码示例箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。this指向的固定化，是因为箭头函数本身没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。箭头函数转化成ES5的代码如下：/ ES6function foo() setTimeout() = console.log(id:, this.id); , 100);/ ES5function foo() var _this = this; setTimeout(function () console.log(
11、id:, _this.id); , 100);由于箭头函数没有自己的this，所以我们就不能用call()、apply()、bind()这些方法去改变this的指向。长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数”绑定”this，很大程度上解决了这个困扰。但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。函数绑定运算符是并排的两个双冒号（:），双冒号左边是一个对象，
12、右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。Promise1.Promise的含义Promise是一部编程的一种解决方案，比传统的解决方案回调函数和事件更加合理更加强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一愕对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点： 对象
13、的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任务其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英文意思是“承诺”，表示其他手段无法改变。 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只有这两种情况发送，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发送了，你再对Promise对象添加
14、回调函数，也会立即得到这个结果。这跟事件是完成不同的，事件的特点是，如果你错过了它，再去监听，是得不到结果的。 有了Promise对象，就可以用同步操作的流程表达异步操作，避免了层次嵌套的回调函数。此外，Promise对象提供统一的接口，使控制异步操作更加容易。Promise的优点很明显，同样的，它的缺点也是很明显的： 无法取消Promise，一旦新建它就会立即执行，无法中途取消； 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部； 当处于Pending状态时，无法得知目前进展到哪一个阶段（比如，是刚刚开始还是即将完成）2.Promise基本用法ES6规定，Promise对象是
15、一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。var promise = new Promise(function(resolve, reject) / . some code if (/* 异步操作成功 */) resolve(value); else reject(error); );Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。Promise实例生成以后，可以用
