Angular2 入门.docx
- 文档编号:2921824
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:36
- 大小:633.71KB
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属性中声明组件的成员变量就可以
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Angular2 入门