Angular2 入门讲义.docx

Angular2 入门?快速上手Why Angular2Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？性能的限制AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的提升已经非常困难了。快速变化的WEB在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。在开发模式方面，Web组件也将很快实现。然而现有的框架，包括Angular1.x对WEB组件的支持都不够好。移动化想想5年前......现在的计算模式已经发生了显著地变化，到处都是手机和平板。Angular1.x没有针对移动应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等。简单易用说实话，Angular1.x太复杂了，学习曲线太陡峭了，这让人望而生畏。Angular团队希望在Angular2中将复杂性封装地更好一些，让暴露出来的概念和开发接口更简单。?Rob Eisenberg?/ Angular 2.0 TeamES6工具链要让Angular2应用跑起来不是件轻松的事，因为它用了太多还不被当前主流浏览器支持的技术。所以，我们需要一个工具链：Angular2是面向未来的科技，要求浏览器支持ES6+，我们现在要尝试的话，需要加一些?垫片来抹平当前浏览器与ES6的差异：angular2 polyfills?- 为ES5浏览器提供ES6特性支持，比如Promise等。systemjs?- 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载typescript?- TypeScript转码器，将TypeScript代码转换为当前浏览器支持的ES5 代码。在本教程中，systemjs被配置为使用TypeScript转码器。reactive extension?- javascript版本的反应式编程/Reactive Programming实现库，被打包为systemjs的包格式，以便systemjs动态加载。angular2?- Angular2框架，被打包为systemjs的包格式，以便systemjs动态加载模块。处于方便代码书写的考虑，我们将这些基本依赖打包到一个压缩文件中：angular2.beta.stack.min.js源代码及说明参见：?/hubwiz/angular2-beta-stack。初识Angular2写一个Angular2的Hello World应用相当简单，分三步走：1. 引入Angular2预定义类型import{Component}fromangular2/core;import{bootstrap}fromangular2/platform/browser;import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了两个类型： Component类和bootstrap函数。2. 实现一个Angular2组件实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：@Component({ selector:ez-app,template:h1Hello,Angular2/h1})classEzApp{}class也是ES6的关键字，用来定义一个类。@Component是给类EzApp附加的元信息，被称为注解/Annotation。@Component最重要的作用是：通过selector属性（值为CSS选择符），告诉Angular2框架，这个组件渲染到哪个DOM对象上。通过template属性，告诉Angular2框架，使用什么模板进行渲染。在alpha版本中的注解@View依然存在并可以使用，比如，这样的写法也是支持的：@Component({selector:ez-app}@View({template:h1Hello,Angular2/h1}classEzApp{}不过在beta版本中，Component注解类（间接）继承自View注解类，因此，现在只用?Component注解就可以了。3. 渲染组件到DOM将组件渲染到DOM上，需要使用自举/bootstrap函数：bootstrap(EzApp);这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。简单吗？我知道你一定还有疑问，别着急，我们慢慢把缺失的知识点补上！注解/Annotation你一定好奇@Component和@View到底是怎么回事。看起来像其他语