Angular2 入门.docx

1、Angular2 入门快速上手Why Angular2Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？性能的限制AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的 提升已经非常困难了。快速变化的WEB在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。在开发模式方面，Web组件也将很快

2、实现。然而现有的框架，包括Angular1.x对WEB组件的支持都不够好。移动化想想5年前.现在的计算模式已经发生了显著地变化，到处都是手机和平板。Angular1.x没有针对移动 应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等。简单易用说实话，Angular1.x太复杂了，学习曲线太陡峭了，这让人望而生畏。Angular团队希望在Angular2中将复杂性 封装地更好一些，让暴露出来的概念和开发接口更简单。Rob Eisenberg/ Angular 2.0 TeamES6工具链要让Angular2应用跑起来不是件轻松的事，因为它用了太多还不被当前主流浏览器支持 的

3、技术。所以，我们需要一个工具链：Angular2是面向未来的科技，要求浏览器支持ES6+，我们现在要尝试的话，需要加一些垫片来抹平当前浏览器与ES6的差异：angular2 polyfills- 为ES5浏览器提供ES6特性支持，比如Promise等。systemjs- 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载typescript- TypeScript转码器，将TypeScript代码转换为当前浏览器支持的ES5 代码。在本教程中，systemjs被配置为使用TypeScript转码器。reactive extension- javascript版本的反应

4、式编程/Reactive Programming实 现库，被打包为systemjs的包格式，以便systemjs动态加载。angular2- Angular2框架，被打包为systemjs的包格式，以便systemjs动态加载模块。处于方便代码书写的考虑，我们将这些基本依赖打包到一个压缩文件中：angular2.beta.stack.min.js源代码及说明参见：初识Angular2写一个Angular2的Hello World应用相当简单，分三步走：1. 引入Angular2预定义类型1.import Component from angular2/core;2.import bootstr

5、ap from angular2/platform/browser;import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了两个类型： Component类和bootstrap函数。2. 实现一个Angular2组件实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：1.Component(2. selector:ez-app,3. template:Hello,Angular24.)5.class EzAppclass也是ES6的关键字，用来定义一个类。Component是给类EzApp附加的元信息， 被称为注解/Annotat

6、ion。Component最重要的作用是：1.通过selector属性（值为CSS选择符），告诉Angular2框架，这个组件渲染到哪个DOM对象上。2.通过template属性，告诉Angular2框架，使用什么模板进行渲染。在alpha版本中的注解View依然存在并可以使用，比如，这样的写法也是支持的：1.Component(selector:ez-app2.View(template:Hello,Angular23.class EzApp不过在beta版本中，Component注解类（间接）继承自View注解类，因此，现在只用Component注解就可以了。3. 渲染组件到DOM将组件渲

7、染到DOM上，需要使用自举/bootstrap函数：1.bootstrap(EzApp);这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。简单吗？我知道你一定还有疑问，别着急，我们慢慢把缺失的知识点补上！注解/Annotation你一定好奇Component和View到底是怎么回事。看起来像其他语言（比如python） 的装饰器，是这样吗？ES6规范里没有装饰器。这其实利用了转码器提供的一个特性：注解。给一个类 加注解，等同于设置这个类的annotations属性：1./注解写法2.Component(selector:ez-app)3.class EzApp.等同

8、于:1.class EzApp.2.EzApp.annotations = new Component(selector:ez-app);很显然，注解可以看做转码器（typescript/traceur/babel）层面的语法糖，但和python 的装饰器不同，注解在编译转码时仅仅被放在类对象的annotation属性里，编译器并不进 行解释展开 这个解释的工作是Angular2框架完成的：据称，注解/Annotation的功能就是Angular2团队向编译器开发团队提出的，因此这通常不是 编译器的默认选项，因此你看到， 我们配置systemjs在使用TypeScript转码时打开注解：1.S

9、ystem.config(2. transpiler: typescript, 3. typescriptOptions: emitDecoratorMetadata: true , 4.);小结如果你了解一点Angular1.x的bootstrap，可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。以组件为核心在Angular1.x中，bootstrap是围绕DOM元素展开的，无论你使用ng-app还是手动执行bootstrap()函数，自举过程是建立在DOM之上的。而在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，然

10、后启动它。如果没有一个组件， 你甚至都没有办法使用Angular2！支持多种渲染引擎以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在：上面的图中，DOM Render和WebWorker Render已经实现，Server Render正在测试，iOS Render和Android Render是可预料的特性，虽然我们看不到时间表。这有点像React了。组件开发 - 声明元数据selector - 声明选择符使用Component注解的selector属性来告诉Angular2框架，当编译、链接模板时，如果 看到这个选择符，就实

11、例化一个组件对象。selector属性应当被指定为一个CSS选择符，比如：标签名选择符1.Component(selector:ez-one,template:TAGNAME-SELECTOR)2.class EzOne将匹配：.CSS类选择符下面的组件示例将匹配：.1.Component(selector:.ez-two,template:CSSCLASS-SELECTOR)2.class EzTwo属性选择符下面的示例将匹配：.1.Component(selector:ez-three,template:ATTR-SELECTOR)2.class EzThree属性值选择符下面的示例将匹配

12、：.1.Component(selector:ez-four=123,template:ATTRVAL-SELECTOR)2.class EzFourtemplate/templateUrl - 声明模板组件的Component注解最重要的属性两个属性之一就是template- 模板。 Angular2的模板是兼容HTML语法的，这意味着你可以使用任何标准的HTML标签编写 组件模板。所以，在最简单的情况下，一个Angular2组件的模板由标准的HTML元素构成，看起来就是 一段HTML码流。Angular2将原封不同地渲染这段模板：有两种方法为组件指定渲染模板：1. 内联模板可以使用组件的V

13、iew注解中的template属性直接指定内联模板：1.Component(2. template : hello3. .4.)在ES6中，使用一对符号就可以定义多行字符串，这使得编写内联的模板轻松多了。2. 外部模板也可以将模板写入一个单独的文件：1.2.hello3.然后在定义组件时，使用templateUrl引用外部模板：1.Component(2. templateUrl : ezcomp-tpl.html3.)styles/styleUrls - 设置样式组件既然处于UI层，就应当好看些，好看是构造良好用户体验的一部分。Angular2的 组件模板基于HTML，那么显然，我们需要通过

14、样式表/CSS来调整组件的外观。和模板类似，我们有两种方法为组件设置CSS样式：1. 内联样式可以使用组件Component注解的styles属性来设置内联样式：1.Component(2. styles:3. h1background:#4dba6c;color:#fff 4. 5.)2. 外部样式也可以把样式定义在单独的文件中：1./*ez-greeting.css*/2.h1background:#4dba6c;color:#fff 然后使用Component注解的styleUrls属性来引入外部样式：1.Component(2. styleUrls:ez-greeting.css3.)properties - 声明属性属性是组件暴露给外部世界的调用接口，调用者通过设置不同的属性值来定制组件的行为与外观：在Angular2中为组件增加属性接口非常简单，只需要在Component注解的properties属性中声明组件的成员变量就可以