前端之Angular2实战：Angular2语法清单
2024-05-13 17:29:30
原文出处：https://segmentfault.com/a/1190000004071388
- angular2
王下邀月熊_Chevalier 2015年11月30日发布
- 推荐 3 推荐
- 收藏 27 收藏，5.2k 浏览
| Bootstrapping |
import {bootstrap} from 'angular2/angular2';
|
|---|---|
bootstrap(MyAppComponent, [MyService, provide(...)]);
|
将MyAppComponent作为根组价来初始化整个应用，并且配置依赖注入的容器 |
| Template syntax | |
|---|---|
<input [value]="firstName">
|
将value属性绑定到firstName表达式的计算结果 |
<div [attr.role]="myAriaRole">
|
将属性 role 绑定到表达式 myAriaRole的值
|
<div [class.extra-sparkle]="isDelightful">
|
将CSS类 extra-sparkle 是否有效绑定到表达式 isDelightful的结果
|
<div [style.width.px]="mySize">
|
将样式属性 width 绑定到表达式 mySize ，默认的是PX，也可以使用单位
|
<button (click)="readRainbow($event)">
|
当该组件或者其子元素被点击时调用readRainbow方法，并且传递一个event对象
|
<div title="Hello {{ponyName}}">
|
将属性绑定到某个内插值字符串，等价于<div [title]="'Hello' + ponyName">
|
Hello {{ponyName}}
|
将文本内容绑定到某个内插值字符串，譬如. "Hello Seabiscuit". |
<my-cmp [(title)]="name">
|
建立一个双向绑定，等价于: <my-cmp [title]="name" (title-change)="name=$event">
|
<video **#movieplayer** ...></video><button (click)="movieplayer.play()">
|
创建一个本地变量 movie player 可以被后续用来操作该 video 元素实例在数据绑定与事件绑定中，注意，该变量的作用域限于当前模板。
|
<p *my-unless="myExpression">...</p>
|
这个 * 符号意味着当前的元素会被转化到一个内置的模板中，譬如: <template [myless]="myExpression"><p>...</p></template>
|
| `Card No.: {{cardNumber \ | myCreditCardNumberFormatter}}` |
Employer:{{employer?.companyName}}
|
有点类似于可选项(?) 意思是如果 employer 域没有被定义，即是undefined时, 余下的部分会直接被忽略
|
| Built-in directives |
import {NgIf, ...} from 'angular2/angular2';
|
|---|---|
<section *ng-if="showSection">
|
根据showSection表达式的结果，移除或者重新创建一个DOM树 |
<li *ng-for="#item of list">
|
遍历列表，并且为每一项根据内在创建一个元素 |
<div [ng-switch]="conditionExpression"><template [ng-switch-when]="case1Exp">...</template><template ng-switch-when="case2LiteralString">...</template><template ng-switch-default>...</template></div>
|
根据条件选择展示合适的元素项目 |
<div [ng-class]="{active: isActive, disabled: isDisabled}">
|
将CSS类绑定到关联的映射的值中。 右边的表达式应该返回 {class-name: true/false} 这种格式的map |
| Forms |
import {FORM_DIRECTIVES} from 'angular2/angular2';
|
|---|---|
<input [(ng-model)]="userName">
|
提供了双向绑定，解析以及数据验证 |
| Class decorators |
import {Directive, ...} from 'angular2/angular2';
|
|---|---|
@Component({...})class MyComponent() {}
|
将某个类声明为组件，并且提供合适的元数据声明 |
@Pipe({...})class MyPipe() {}
|
声明某个类为管道，并且提供一些关于该管道的元数据 |
@Injectable()class MyService() {}
|
声明某个类的依赖，并且在构造函数中自动注入 |
| Directive configuration |
@Directive({ property1: value1, ... }) )
|
|---|---|
selector: '.cool-button:not(a)'
|
这是一个特定的CSS选择器，支持: element, [attribute], .class, 以及 :not()，不支持父子关系的选择器
|
providers: [MyService, provide(...)]
|
一组依赖注入的提供者 |
| Component configuration |
@Component extends @Directive, so the @Directiveconfiguration applies to components as well
|
|---|---|
viewProviders:[MyService, provide(...)]
|
将一系列的依赖注入的对象的作用域合并到该类中 |
template: 'Hello {{name}}'templateUrl: 'my-component.html'
|
内置或者外链的视图 |
styles: ['.primary {color: red}']styleUrls: ['my-component.css']
|
一系列内置或者外连的CSS样式 |
directives:[MyDirective, MyComponent]
|
一系列用于本模板中的指令 |
pipes: [MyPipe, OtherPipe]
|
一系列用于本模板中的管道 |
| Class field decorators for directives and components |
import {Input, ...} from 'angular2/angular2';
|
|---|---|
@Input() myProperty;
|
声明一个输入属性，并且绑定到模板，譬如： <my-cmp [my-property]="someExpression">
|
@Output() myEvent = new EventEmitter();
|
声明一个输出口属性，绑定到某个可以绑定的事件： <my-cmp (my-event)="doSomething()">
|
@HostBinding('[class.valid]') isValid;
|
将某个元素属性绑定到某个指令或者组件的属性 |
@HostListener('click', ['$event']) onClick(e) {...}
|
将某个事件绑定到组件 |
@ContentChild(myPredicate) myChildComponent;
|
将第一个可以查到的组件内容对象绑定到当前属性 |
@ContentChildren(myPredicate) myChildComponents;
|
将组件内容查询的结果绑定到当前元素 |
@ViewChild(myPredicate) myChildComponent;
|
将第一个组件视图查询得到的子组件绑定到当前元素 |
@ViewChildren(myPredicate) myChildComponents;
|
将当前根据视图查询到的子组件的列表绑定到当前元素 |
| Directive and component change detection and lifecycle hooks | (implemented as class methods) |
|---|---|
constructor(myService: MyService, ...) { ... }
|
类的构造器会在其他的生命周期函数前调用。主要是在该方法中完成依赖注入，注意要避免将复杂的工作放在这里。 |
onChanges(changeRecord) { ... }
|
会在任何输入属性的变化前被调用，在内容处理与子视图处理之前 |
onInit() { ... }
|
会在构造函数之后调用，在该方法中完成输入属性的处理，以及第一次对onChanges方法的调用 |
doCheck() { ... }
|
在任何一个组件或者指令的输入属性被检查前调用，主要用于在进行自定义的检查前扩展变化的检查 |
afterContentInit() { ... }
|
在onInit方法之后被调用，主要是当组件或者指令的内容被初始化完成后 |
afterContentChecked() { ... }
|
在对于组件或者指令的内容检查之后被调用 |
afterViewInit() { ... }
|
在 afterContentInit方法被调用之后调用，仅仅适用于组件 |
afterViewChecked() { ... }
|
每次进行组件的视图检查之后被调用，仅仅适用于组件 |
onDestroy() { ... }
|
仅仅会被调用一次，主要在实例被摧毁前调用 |
| Dependency injection configuration |
import {provide} from 'angular2/angular2';
|
|---|---|
provide(MyService, {useClass: MyMockService})
|
provide\
|
provide(MyService, {useFactory: myFactory})
|
provide\
|
provide(MyValue, {useValue: 41})
|
provide\
|
| Routing and navigation |
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';
|
|---|---|
@RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...}])class MyComponent() {}
|
设置完整的路由表 |
<router-outlet></router-outlet>
|
将这个位置设置作为激活组件的注入位置 |
<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">
|
构造一个链接用于跳转到其他的视图，主要依赖于上面路由配置中的路由名称以及可选参数。添加'/'前缀可以匹配根路由，添加'./'前缀可以用于匹配子路由 |
@CanActivate(() => { ... })class MyComponent() {}
|
利用组件的修饰器定义了一个方程，路由器会在是否要激活该组件前进行调用。该方程应该返回true或者false或者一个promise结果 |
onActivate(nextInstruction, prevInstruction) { ... }
|
在导航到一个组件之后，路由会首先调用组件的onActicate方法 |
canReuse(nextInstruction, prevInstruction) { ... }
|
路由会根据组件的canReuse方法来决定是直接重用该组件还是先销毁再重新创建一个新的实例 |
onReuse(nextInstruction, prevInstruction) { ... }
|
路由会在重用一个组件的实例的时候调用该onReuse方法 |
canDeactivate(nextInstruction, prevInstruction) { ... }
|
路由通过调用canDeactivate方法来判断是否应该在一次导航之后移除该组件，该方法应该返回一个true或者false或者promise对象 |
onDeactivate(nextInstruction, prevInstruction) { ... }
|
前端之Angular2实战：Angular2语法清单相关推荐
- html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作 现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
- html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动 我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
- 前端系列之实战(城市医院预约挂号平台2.基本样式编写)
伤情最是晚凉天,憔悴厮人不堪言,吆酒催肠三杯醉,寻香惊梦五更寒, 钗头凤斜倾有泪,徒迷花寥我无缘,小楼寂寞心与月,也难如钩也难圆! 书接上文:前端系列之实战(城市医院预约挂号平台1.框架搭建) 基本样 ...
- Web前端开发工程师实战培训教程
Web前端开发工程师实战培训教程 现在Web前端开发的工作需求量很大,很多企业都专门去招聘Web前端的开发人员,待遇都是轻松过万的 我推荐给你们一套系统性学习Web前端开发的课程,可以完整的学习Web ...
- 前端系列之实战(城市医院预约挂号平台3.UI组件)
大将生来胆气豪,腰横秋水雁翎刀,风吹橐鼓山河动,电闪旌旗日月高, 天上麒麟原有种,穴中蝼蚁岂能逃,太平待到归来日,朕与将军解战袍. 书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写) ...
- angular2的模板语法
Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经 ...
- ABP前端使用阿里云angular2 UI框架NG-ZORRO分享
一.前言 前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Ne ...
最新文章
- 相对湿度计算软件_冷却塔填料的用量要怎么计算？
- 为Tueri.io构建React图像优化组件
- NetBeans 6.9 发布后选版 1 已经可用
- 网站测试自动化系统—在测试代码中硬编码测试数据
- 【图像分割】基于matlab C-V模型水平集图像分割【含Matlab源码 1456期】
- SPSS26没有典型相关性分析怎么办
- 台湾Google云计算计划负责人叶平讲解云计算
- 友好的可视化工具——trelliscope
- 英特尔芯片组 年代表_英特尔：对不起，但我们的7纳米芯片将延迟到2022年，2023年
- Docker与Jib(maven插件版)实战
- 吕爱国倾心讲座：混合方法研究的类型与程序设计
- 苹果自带地图定位 经纬度
- 危化品化工企业双重预防机制五有标准是什么包括哪些内容
- microscan说明书_ALZET迷你渗透胶囊MODEL2002说明书中文
- mysql只能导出65535条_导出Excel超过65535条限制解决方案
- linux 快速找出上个命令,Linux 命令行快捷操作键
- 最新uboot的Kbuild系统 3 .config的生成
- 一万六千字的MySQL数据库操作详细教学，看完别说你不会
- 麦克斯韦方程组的物理意义是什么
- JavaScript二级联动