- 先从模块库中引入组件
- import {Component} from “angular2/core”;
- import {bootstrap} from “angular2/platform/browser”;
然后定义组件
@Component({
Selector:’my-app’,这里的my-app是html上自己写的节点
Selector:’[my-app]’,这里的my-app是节点属性<any my-app>…</any>
Selector:’[my-app=123]’,这里的my-app是节点属性值<any my-app=’123’>…</any>
Selector:’.my-app’,这里的my-app是节点css属性<any class=’ my-app’>…</any>
Styles:[‘h1{background:#fff;color:#ddd}’] 内联样式，作用是改变ui组件的外观
styleUrls:[‘ez-greeting.css’] 外部样式，作用改变ui组件的外观
properties:[‘name’,’country’] 为组件增加属性接口，中括号里面是成员变量，由外到内，调用者设置具体属性后才把具体属性值返回到被调用者自身属性中
directives:[xxApp],在模板中使用自定义指令(组件是一种指令),这个directives属性应该写在最上面，xxApp应该是依赖被调用组件的类名 class xxApp。如果使用多个指令，写法应该是directives:[[xxApp],[ccApp]]
events:[‘change’] 与properties属性作用方向相反，由内到外，事件触发后才反馈给调用者
pipes:[xxxPipe]用法跟directives一样，用于自定义管道，需要先@Pipe({name:”xxx”})
calss xxxPipe{
//管道类中必须实现的方法，input参数是指需要管道化的左边原始数据，args参数是指若干个可选参数。
transform(input,args){
}}
Template:’xxxxx’ 需要替换的内容
})
定义一个类 class EzApp{}
最后渲染组件 bootstrap(EzApp);
//EzCard
@Component({
properties:["name","country"]
})
调用EzCard组件以及使用内容，在模板中注意指令对象的写法
//EzApp
@Component({
directives : [EzCard],template : `<ez-card [name]="'雷锋'" [country]="'中国'"></ez-card>`
})
属性值绑定常量，两种写法(textContent不能改成其他随意的单词，如果要改样式的单词是style)：
//正确，Angular2识别出常量字符串表达式 'Hello,Angular2'
@Component({template:`<h1 [textContent]="'Hello,Angular2'"></h1>`})
//正确，Angular2识别出常量字符串作为属性textContent的值
@Component({template:`<h1 textContent="Hello,Angular2"></h1>`})
属性值绑定组件模型中的表达式，html属性已中括号形式绑定类中的构造函数的变量:
@Component({template:`<h1 [textContent]="title"></h1>`})
Class EzApp{
Constructor(){
This.title = “xxxxxx”
}
}
(event)事件绑定，相当于on-click
<button (click)="roulette()">ROULETTE</button>
(下面的ngIf不管哪种写法I一定是大写)
[ngIf]=”trial==true”这样的指令一定要写在<template [ngIf]=”trial==true”></template>才有效
*ngIf=”trial==true”跟template=”ngIf trial==true”指令可以随意写在html任何节点上。
NgFor的原始使用：
<template ngFor [ngForOf]="items" #item #i="index"> <li>[{{i+1}}] {{item}}</li> </template>
NgFor的语法糖使用，一般习惯用第二种写法:
//使用template attribute
<ANY template="ngFor #item of items;#i=index">...</ANY>
//使用*前缀
<ANY *ngFor="#item of items;#i=index">...</ANY>
自定义管道：
@Pipe({name:'ezp',pure:false})//pure为可选参数，用于判断在每个变化检查周期都执行管道的transform()方法，默认true，不检查
class EzPipe{
transform(input,args){
return input + " " +args.join(" ");
}
}
使用上面的管道：
<!--结果："call join mary linda"--> {{ "call " | ezp:'john':'mary':'linda' }}
ngControl=”xxx” //使用控件租获得输入值
[(ngModel)] = “xxx.ccc”// 实现模型与表单的双向绑定功能。
//在组件模板中使用
[ngFormControl]=”xxx”
//需要先在对应的类构造函数中创建control对象
This.xxx = new Control(“ccccccc”); //作用是初始化控件显示数据。
定义指令相关内容解释说明:
@Directive({
Selector:”[xxx-cc]”,//括号里面的内容用于在调用该指令的组件模板中作为dom元素
Inputs:[“bgColor:xxx-cc”]//将dom对象的属性映射到指令对象的属性，bgColor需要在类中定义，在调用者组件的模板中使用样板<I [xxx-cc]=”’red’”>good</i>
Host:{//用于监听指令所在dom元素的事件，下面是监听点击、鼠标事件
‘(click)’:’onXxx()’,‘(mouSEOver)’:’onCccc()’
}
})
Class xxx{ // xxx将作为调用者组件中directives:[xxx]的指向
Constructor(@Inject(ElementRef) er,@Inject(Renderer) renderer){//renderer用于代替直接的dom操作，然后在方法中使用
//执行指令操作
This.el = er.nativeElement;//获取指令所在的dom元素
This.renderer = renderer;
}
set bgColor(v){//这里的set作用是捕捉每个变化的时刻
this.el.style.color = v;
this.renderer.setElementStyle(this.el,”background”,v);//这里就使用renderer以及它自己的方法
}
onXxx(){};
onCccc(){};
}
服务的封装：
1.定义一个类，实现类里的方法。然后在需要用到的组件类中的构造器里new出来。(强耦合，不适合)
2.使用providers属性，
@Component({
providers : [EzAlgo] //声明依赖，EzAlgo是封装好的服务类
})
class EzApp{
//Angular2框架负责注入对象
constructor(@Inject(EzAlgo) algo){
//已经获得EzAlgo实例了！
}
}
路由
1需要import{LocationStrategy,Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS}from “angular2/router”;
2 在组件中配置
router.config([
{path:"/video",component:EzVideo,name:”Video”},{path:"/music",component:EzMusic,name:”Music”}
])
其中path值为请求路径，component值为组件类名，name值为这json对象用于作为点击跳转事件的实参。
3 在2组件中调用在构造函数中注入的(@Inject (Router) router)对象，调用router.navigate(ptah); //根据给定的url（path），选中组件并在outlet中激活，router对象其实是指向2中的router.config的配置信息，只不过这个指向处理是由框架去做。
4 在组件的@Component中的模板中使用<router-outlet></router-outlet>
作为组件内容替换展示的地方。另外还要使用属性directives:[ROUTER_DIRECTIVES],进行指令声明。
5 在启动时还要声明下依赖bootstrap(EzApp,[ROUTER_PROVIDERS]);
