Angular2開發筆記

Problem

1. 使用依賴注入應該注意些什麼
2. 服務通常用來作什麼
3. 指令通常用來作什麼
4. angular2如何提取公共組件
5. angular2爲何不須要提公共組件
6. 父組件與子組件之間如何通信
7. 何時應該使用ngModel
8. 爲何要用Typescript？我喜歡JavaScript
9. 爲何如Input之類的語法後面必須加()

Solution

使用依賴注入應該注意些什麼

首先咱們要明白什麼是依賴注入(Dependency Injection, DI)，Java程序員應該不會陌生，DI是一種編程模式，它讓一個類從外部資源中獲取它的依賴，而不是本身親自建立它。這樣的好處是什麼呢？好處就是咱們沒必要去關心如何建立依賴這個過程，咱們只須要舒服的使用這個已經建立好的實例就行。在angular2中使用DI通常是在組件中，注入的東西咱們通常稱之爲service，使用@Injectable()進行標記。在使用DI時需注意在Component中的providers中聲明該服務，而後在class中contructor中聲明便可，eg:

@Component({
    selector: 'source-list',
    styles: require('xxx.scss'),
    template: require('xxx.html'),
    providers: [Regions]
})
export class SourceList {
    constructor(private Region: Regions) {
    }
}

此外，若組件的父組件providers中引入了一個service，在其子組件中可不用引入直接在contructor中聲明便可；不然會報"not providers..."之類的錯誤

服務通常用來作什麼

服務是什麼呢？"Service" is a broad category encompassing any value, function or feature that our application needs. 它能夠是值、函數或所需的特性等，一個典型的服務應該是具備專一、良好的定義的類。它應該作一件具體的事情，把它作好。個人理解，服務通常用來與後端通訊即獲取組件所需數據，或者管理組件特定屬性的。

此外，服務的引入是單例的，也就是說你在一個組件中改變了這個服務對象的值，在另外一個使用了該服務的組件也會跟隨該服務的變化而變化。

指令通常用來作什麼

指令通常用來操做DOM，經過在組件的directives中引入，這個引入就是新生成一個實例，他們之間互不影響，這點與服務相反。在我看來，指令大多時候都是按功能封裝的一些組件，由父組件來統一使用。

還有另外兩種指令，結構型指令與屬性型指令。結構型 指令 會經過添加 / 刪除 DOM 元素來更改 DOM 樹佈局。 NgFor 和 NgIf 就是兩個最熟悉的例子。屬性型指令改變一個元素的外觀或行爲。

angular2如何提取公共組件

angular2框架層面上就對樣式進行了隔離，每一個組件下屬的樣式對其餘組件不會產生影響。

父組件與子組件之間如何通信

父組件與子組件： 我通常經過input來實現，在子組件中用Input() 聲明從父組件接收的變量，在父組件template使用子組件的地方傳遞改數據，eg:

父組件

@Component({
    selector: 'source-list',
    styles: require('xxx.scss'),
    template: `
       <header>
        <nav-header></nav-header>
        <nav-breadcrumb [paths]="paths"></nav-breadcrumb>
       </header>
    `,
    providers: [Regions]
})
export class SourceList {
    constructor(private Region: Regions) {
    }

    path = '/source/list';
}

子組件

@Component({
    selector: 'nav-breadcrumb',
    template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
    constructor() {
    }

    @Input() paths;
}

子組件與父組件： 我通常經過藉助output和EventEmitter類來實現，經過在子組件中使用@Output()聲明該類實例來得到和父組件通訊的通道，支持觸發事件並將相應數據返回，由父組件在template中使用處進行捕獲。eg:

父組件

@Component({
    selector: 'source-list',
    styles: require('xxx.scss'),
    template: `
       <header>
        <nav-header></nav-header>
        <select-dialog (cancelDialogRequest)="cancelDialog()"></select-dialog>
       </header>
    `,
    providers: [Regions]
})
export class SourceList {
    constructor(private Region: Regions) {
    }

    path = '/source/list';
    cancelDialog() {

    }
}

子組件

@Component({
    selector: 'nav-breadcrumb',
    template: require('./breadcrumb.html')
})
export class NavBreadcrumb {
    constructor() {
    }

    @Output() cancelDialogRequest = new EventEmitter();
    @Input() paths;

    cancelDialog() {
        this.cancelDialogRequest.emit(1);
    }
}

何時應該使用ngModel

ngModel用於數據雙向綁定，通常形式爲：

<input [(ngModel)]="title">

它其實是：

<input [value]="title"
       (input)="title=$event.target.value" >

這又是是嗎意思呢？個人理解是，[]表示值傳遞，也就是說這個值是其餘地方定義的，這裏就是引用了這個值，()表示事件監聽，監聽在此標籤中該值得變化，並將此變化傳遞會來源的地方。所以，咱們能夠利用這一特性，將數據傳遞到子組件中，並在父組件裏響應該數據的變化。好比，如今咱們在父組件中有一個orders變量，我在父組件的模板中能夠這樣使用：

<delete-order-dialog [(orders)]="orders"></delete-order-dialog>

這樣，咱們在子組件裏input該對象，經過必定操做，對orders進行的改變都能傳遞迴父組件，並相應的展現在頁面上。

爲何要用Typescript？我喜歡JavaScript

爲何要用typescript啊，我比較喜歡JavaScript這種弱類型的語言，想怎麼用就怎麼用，歷來不須要考慮類型這些什麼鬼。無論在什麼領域都會有各類羣體，就像目前的前端，就有React、Angular、Vue等，這些框架的使用者都不少，咱們不能簡單的去評判一個框架的優劣及難易程度，由於有些東西就是爲特定的人羣設計的，好比typescript，Java這種後端程序員使用起來就會順手不少。嗯，秉持着多學點東西的開放心態，我開始使用spring、typescript了..

爲何如Input之類的語法後面必須加()

關於括號問題，官網其實已經屢次提到了，Don't forget the parentheses! Neglecting them leads to an error that's difficult to diagnose. 沒有()就會致使不可預料的錯誤！必定要寫。爲何呢？這裏我先作個假設，()在JavaScript裏，通常都是執行某個函數，那麼這裏的input()，在我看就是執行了某個函數，標記了後面所跟着的變量，幫助程序運行定位的。

最後安利一波帶個人老司機雪狼老大翻譯的angular2中文官網

如想了解更多，請移步個人博客。

 

PS：我仍是如風少年！