1  指令

@Directive({
    selector:'[tooltip]'
})
export class tooltip{
    private overlay:Overlay;
    @Input()
    private tooltip:string;
    constructor(private el:ElementRef,manager:OverlayManager){
        this.overlay=manager.get();
    }
    @HostListener('mouseenter')
    onMouseEnter(){
        this.overlay.open(this.el.nativeElement,this.tooltip);
    }
    @HostListener('mouseleave')
    onMouseLeave(){
        this.overlay.close();
    }
}
 

        以上是用typescript定義的指令，在模板中可利用以下標籤使用這一指令：

<div tooltip="42">Tell me the answer!</div>    

        當用戶滑鼠移動到標籤，angular將會呼叫定義在指令裝飾器@HostListener中的方法。最後，overlay上的open方法就會被執行。

2  元件

@Component({
    selector:'hello-world',
    template:'<h1>Hello,{{this.target}}!</h1>'
})
class HelloWorld{
    target:string;
    constructor(){
        this.target='world';
    }
}
 

        以上是用typescript定義的元件，如果要使用它，可以在檢視中嵌入以下標籤：

<hello-world></hello-world>

        當angular2應用啟動的時候，框架將會遍歷DOM樹中的所有元件並處理它們。一旦發現這個叫作hello-world的標籤，框架就會去呼叫元件定義中的邏輯，也就是說元件的模板會被渲染出來，花括號之間的表示式被運算。最終獲得的結果就是<h1>Hello,world!</h1>這樣一個標籤。

3  管道

@Pipe({name:'lowercase1'})
class LowerCasePipe1 implements PipeTransform{
    transform(value:string):string{
        if(!value) return value;
        if(typeof value !== 'string'){
            throw new Error('Invalid pipe value',value);
        }
        return value.toLowerCase();
    }
}
 

        以上是用typescript定義的名為lowercase1的管道，它的作用是把引數傳遞進來的字串轉換成小寫形式。可用以下方式在元件中使用lowercase1管道：

@Component({
    selector:'app',
    pipes:[LowercasePipe1],
    template:'<h1>{{"SAMPLE"|lowercase1}}</h1>'
})
class App {}

        用以下標籤來使用App元件：

<app></app>

        將會在螢幕上看到h1標籤內部的sample這個單詞。

        typescript語法中實現了pipeTransform介面，定義了介面中宣告的transform方法。

4  服務

@Injectable()
class User {
    constructor(private service:HttpService){}
    save() {
        return this.service.post('/users')
            .then(res => {
                this.id=res.id;
                return this;
            });
    }
}