Angular2 入门.docx

《Angular2 入门.docx》由会员分享，可在线阅读，更多相关《Angular2 入门.docx（36页珍藏版）》请在冰豆网上搜索。

Angular2入门

 快速上手

WhyAngular2

Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？

性能的限制

AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。

随着时间的推移，各种特性被加入进去以适应不同场景下的应用开发。

然而由于最初的架构限制（比如绑定和模板机制），性能的提升已经非常困难了。

快速变化的WEB

在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。

在开发模式方面，Web组件也将很快实现。

然而现有的框架，包括Angular1.x对WEB组件的支持都不够好。

移动化

想想5年前......现在的计算模式已经发生了显著地变化，到处都是手机和平板。

Angular1.x没有针对移动应用特别优化，并且缺少一些关键的特性，比如：

缓存预编译的视图、触控支持等。

简单易用

说实话，Angular1.x太复杂了，学习曲线太陡峭了，这让人望而生畏。

Angular团队希望在Angular2中将复杂性封装地更好一些，让暴露出来的概念和开发接口更简单。

 RobEisenberg /Angular2.0Team

ES6工具链

要让Angular2应用跑起来不是件轻松的事，因为它用了太多还不被当前主流浏览器支持的技术。

所以，我们需要一个工具链：

Angular2是面向未来的科技，要求浏览器支持ES6+，我们现在要尝试的话，需要加一些 垫片来抹平当前浏览器与ES6的差异：

∙angular2polyfills -为ES5浏览器提供ES6特性支持，比如Promise等。

∙systemjs -通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载

∙typescript -TypeScript转码器，将TypeScript代码转换为当前浏览器支持的ES5代码。

在本教程中，systemjs被配置为使用TypeScript转码器。

∙reactiveextension -javascript版本的反应式编程/ReactiveProgramming实现库，被打包为systemjs的包格式，以便systemjs动态加载。

∙angular2 -Angular2框架，被打包为systemjs的包格式，以便systemjs动态加载模块。

处于方便代码书写的考虑，我们将这些基本依赖打包到一个压缩文件中：

∙angular2.beta.stack.min.js

源代码及说明参见：

初识Angular2

写一个Angular2的HelloWorld应用相当简单，分三步走：

1.引入Angular2预定义类型

1.import{Component}from"angular2/core";

2.import{bootstrap}from"angular2/platform/browser";

import是ES6的关键字，用来从模块中引入类型定义。

在这里，我们从angular2模块库中引入了两个类型：

Component类和bootstrap函数。

2.实现一个Angular2组件

实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：

1.@Component（{

2.selector:

"ez-app",

3.template:

"

Hello,Angular2

4.}）

5.classEzApp{}

class也是ES6的关键字，用来定义一个类。

@Component是给类EzApp附加的元信息，被称为注解/Annotation。

@Component最重要的作用是：

1.通过selector属性（值为CSS选择符），告诉Angular2框架，这个组件渲染到哪个DOM对象上。

2.通过template属性，告诉Angular2框架，使用什么模板进行渲染。

在alpha版本中的注解@View依然存在并可以使用，比如，这样的写法也是支持的：

1.@Component（{selector:

"ez-app"}

2.@View（{template:

"

Hello,Angular2

3.classEzApp{}

不过在beta版本中，Component注解类（间接）继承自View注解类，因此，现在只用 Component注解就可以了。

3.渲染组件到DOM

将组件渲染到DOM上，需要使用自举/bootstrap函数：

1.bootstrap（EzApp）;

这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。

简单吗？

我知道你一定还有疑问，别着急，我们慢慢把缺失的知识点补上！

注解/Annotation

你一定好奇@Component和@View到底是怎么回事。

看起来像其他语言（比如python）的装饰器，是这样吗？

ES6规范里没有装饰器。

这其实利用了转码器提供的一个特性：

注解。

给一个类加注解，等同于设置这个类的annotations属性：

1.//注解写法

2.@Component（{selector:

"ez-app"}）

3.classEzApp{...}

等同于:

1.classEzApp{...}

2.EzApp.annotations=[newComponent（{selector:

"ez-app"}）];

很显然，注解可以看做转码器（typescript/traceur/babel）层面的语法糖，但和python的装饰器不同，注解在编译转码时仅仅被放在类对象的annotation属性里，编译器并不进行解释展开——这个解释的工作是Angular2框架完成的：

据称，注解/Annotation的功能就是Angular2团队向编译器开发团队提出的，因此这通常不是编译器的默认选项，因此你 看到，我们配置systemjs在使用TypeScript转码时打开注解：

1.System.config（{

2.transpiler:

'typescript',

3.typescriptOptions:

{emitDecoratorMetadata:

true},

4.}）;

小结

如果你了解一点Angular1.x的bootstrap，可能隐约会感受到Angular2中bootstrap的一些变化-我指的并非代码形式上的变化。

以组件为核心

在Angular1.x中，bootstrap是围绕DOM元素展开的，无论你使用ng-app还是手动执行bootstrap（） 函数，自举过程是建立在DOM之上的。

而在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，然后启动它。

如果没有一个组件，你甚至都没有办法使用Angular2！

支持多种渲染引擎

以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖-DOM仅仅作为一种可选的渲染引擎存在：

上面的图中，DOMRender和WebWorkerRender已经实现，ServerRender正在测试，iOSRender和AndroidRender 是可预料的特性，虽然我们看不到时间表。

这有点像React了。

组件开发-声明元数据

selector-声明选择符

使用Component注解的selector属性来告诉Angular2框架，当编译、链接模板时，如果看到这个选择符，就实例化一个组件对象。

selector属性应当被指定为一个CSS选择符，比如：

标签名选择符

1.@Component（{selector:

"ez-one",template:

"TAGNAME-SELECTOR"}）

2.classEzOne{}

将匹配：

...

CSS类选择符

下面的组件示例将匹配：

 ...

1.@Component（{selector:

".ez-two",template:

"CSSCLASS-SELECTOR"}）

2.classEzTwo{}

属性选择符

下面的示例将匹配：

...

1.@Component（{selector:

"[ez-three]",template:

"ATTR-SELECTOR"}）

2.classEzThree{}

属性值选择符

下面的示例将匹配：

...

1.@Component（{selector:

"[ez-four=123]",template:

"ATTRVAL-SELECTOR"}）

2.classEzFour{}

template/templateUrl-声明模板

组件的Component注解最重要的属性两个属性之一就是template -模板。

Angular2的模板是兼容HTML语法的，这意味着你可以使用任何标准的HTML标签编写组件模板。

所以，在最简单的情况下，一个Angular2组件的模板由标准的HTML元素构成，看起来就是一段HTML码流。

Angular2将原封不同地渲染这段模板：

有两种方法为组件指定渲染模板：

1.内联模板

可以使用组件的View注解中的template属性直接指定内联模板：

1.@Component（{

2.template:

`

hello

3.

4.}）

在ES6中，使用一对`符号就可以定义多行字符串，这使得编写内联的模板轻松多了。

2.外部模板

也可以将模板写入一个单独的文件：

1.

--ezcomp-tpl.html-->

2.

hello

3.

然后在定义组件时，使用templateUrl引用外部模板：

1.@Component（{

2.templateUrl:

"ezcomp-tpl.html"

3.}）

styles/styleUrls-设置样式

组件既然处于UI层，就应当好看些，好看是构造良好用户体验的一部分。

Angular2的组件模板基于HTML，那么显然，我们需要通过样式表/CSS来调整组件的外观。

和模板类似，我们有两种方法为组件设置CSS样式：

1.内联样式

可以使用组件Component注解的styles属性来设置内联样式：

1.@Component（{

2.styles:

[`

3.h1{background:

#4dba6c;color:

#fff}

4.`]

5.}）

2.外部样式

也可以把样式定义在单独的文件中：

1./*ez-greeting.css*/

2.h1{background:

#4dba6c;color:

#fff}

然后使用Component注解的styleUrls属性来引入外部样式：

1.@Component（{

2.styleUrls:

["ez-greeting.css"]

3.}）

properties-声明属性

属性是组件暴露给外部世界的调用接口，调用者通过设置不同的属性值来定制 组件的行为与外观：

在Angular2中为组件增加属性接口非常简单，只需要在Component注解的properties属性中声明组件的成员变量就可以