1. 先从模块库中引入组件
2. import {Component} from “angular2/core”;
3. import {bootstrap} from “angular2/platform/browser”;
   然后定义组件

@Component({ 
    Selector:’my-app’, 这里的my-app是html上自己写的节点
    Selector:’[my-app]’, 这里的my-app是节点属性…
Selector:’[my-app=123]’, 这里的my-app是节点属性值123’>…
    Selector:’.my-app’, 这里的my-app是节点css属性…
    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 : `[name]="'雷锋'" [country]="'中国'">`
})

属性值绑定常量，两种写法(textContent不能改成其他随意的单词，如果要改样式的单词是style)：

//正确，Angular2识别出常量字符串表达式 'Hello,Angular2'
@Component({template:`
`})
//正确，Angular2识别出常量字符串作为属性textContent的值
@Component({template:`
`})

属性值绑定组件模型中的表达式，html属性已中括号形式绑定类中的构造函数的变量:

@Component({template:`<h1 [textContent]="title">h1>`})
Class EzApp{
    Constructor(){
        This.title = “xxxxxx”
    }
}

(event)事件绑定，相当于on-click

<button (click)="roulette()">ROULETTEbutton>

(下面的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
"ngFor #item of items;#i=index">...
//使用*前缀
"#item of items;#i=index">...

自定义管道：

@Pipe({name:'ezp',pure:false})//pure为可选参数，用于判断在每个变化检查周期都执行管道的transform()方法，默认true，不检查
class EzPipe{
  transform(input,args){
  return input + " " +args.join(" ");
  }
}

使用上面的管道：

{{ "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需要在类中定义，在调用者组件的模板中使用样板good>
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(){};
}

@Component({        
    providers : [EzAlgo]  //声明依赖，EzAlgo是封装好的服务类
})
class EzApp{
    //Angular2框架负责注入对象
    constructor(@Inject(EzAlgo) algo){
        //已经获得EzAlgo实例了！
    }
}

router.config([
    {path:"/video", component:EzVideo,name:”Video”},
    {path:"/music", component:EzMusic,name:”Music”}
])