摘要：下面我們看看如果使用是什么樣子的，首先我們需要在組件的修飾器中配置，然后在組件的構造函數中使用參數進行依賴注入。

第一節：Angular 2.0 從0到1 （一）
第二節：Angular 2.0 從0到1 （二）
第三節：Angular 2.0 從0到1 （三）

在 hello-angularsrcapploginlogin.component.ts 中更改其模板為下面的樣子

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-login",
  template: `
    

      
      Login
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我們增加了一個文本輸入框和一個按鈕，保存后返回瀏覽器可以看到結果

接下來我們嘗試給Login按鈕添加一個處理方法 Login。(click)表示我們要處理這個button的click事件，圓括號是說發生此事件時，調用等號后面的表達式或函數。等號后面的onClick()是我們自己定義在LoginComponent中的函數，這個名稱你可以隨便定成什么，不一定叫onClick()。下面我們就來定義這個函數，在LoginComponent中寫一個叫onClick()的方法，內容很簡單就是把“button was clicked”輸出到Console。

  onClick() {
    console.log("button was clicked");
  }

返回瀏覽器，并按F12調出開發者工具。當你點擊Login時，會發現Console窗口輸出了我們期待的文字。

那么如果要在onClick中傳遞一個參數，比如是上面的文本輸入框輸入的值怎么處理呢？我們可以在文本輸入框標簽內加一個#usernameRef，這個叫引用（reference）。注意這個引用是的input對象，我們如果想傳遞input的值，可以用usernameRef.value，然后就可以把onClick()方法改成onClick(usernameRef.value)

  
  Login

在Component內部的onClick方法也要隨之改寫成一個接受username的方法

  onClick(username) {
    console.log(username);
  }

現在我們再看看結果是什么樣子，在文本輸入框中鍵入“hello”，點擊Login按鈕，觀察Console窗口：hello被輸出了。

好了，現在我們再加一個密碼輸入框，然后改寫onClick方法可以同時接收2個參數：用戶名和密碼。代碼如下：

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-login",
  template: `
    

      
      
      Login
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onClick(username, password) {
    console.log("username:" + username + "

" + "password:" + password);
  }

}

看看結果吧，在瀏覽器中第一個輸入框輸入“wang”，第二個輸入框輸入“1234567”，觀察Console窗口，Bingo！

如果我們把登錄的業務邏輯在onClick方法中完成，當然也可以，但是這樣做的耦合性太強了。設想一下，如果我們增加了微信登錄、微博登錄等，業務邏輯會越來越復雜，顯然我們需要把這個業務邏輯分離出去。那么我們接下來創建一個AuthService吧, 首先我們在srcapp下建立一個core的子文件夾（srcappcore）,然后命令行中輸入 ng g s coreauth （s這里是service的縮寫，coreauth是說在core的目錄下建立auth服務相關文件）。auth.service.ts和auth.service.spec.ts這個兩個文件應該已經出現在你的目錄里了。

下面我們為這個service添加一個方法，你可能注意到這里我們為這個方法指定了返回類型和參數類型。這就是TypeScript帶來的好處，有了類型約束，你在別處調用這個方法時，如果給出的參數類型或返回類型不正確，IDE就可以直接告訴你錯了。

import { Injectable } from "@angular/core";

@Injectable()
export class AuthService {

  constructor() { }

  loginWithCredentials(username: string, password: string): boolean {
    if(username === "wangpeng")
      return true;
    return false;
  }

}

等一下，這個service雖然被創建了，但仍然無法在Component中使用。當然你可以在Component中import這個服務，然后實例化后使用，但是這樣做并不好，仍然時一個緊耦合的模式，Angular2提供了一種依賴性注入（Dependency Injection）的方法。

如果不使用DI（依賴性注入）的時候，我們自然的想法是這樣的，在login.component.ts中import引入AuthService，在構造中初始化service，在onClick中調用service。

import { Component, OnInit } from "@angular/core";
//引入AuthService
import { AuthService } from "../core/auth.service";

@Component({
  selector: "app-login",
  template: `
    

      
      
      Login
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  //聲明成員變量，其類型為AuthService
  service: AuthService;

  constructor() {
    this.service = new AuthService();
  }

  ngOnInit() {
  }

  onClick(username, password) {
    //調用service的方法
    console.log("auth result is: " + this.service.loginWithCredentials(username, password));
  }

}

這么做呢也可以跑起來，但存在幾個問題：

由于實例化是在組件中進行的，意味著我們如果更改service的構造函數的話，組件也需要更改。

如果我們以后需要開發、測試和生產環境配置不同的AuthService，以這種方式實現會非常不方便。

下面我們看看如果使用DI是什么樣子的，首先我們需要在組件的修飾器中配置AuthService，然后在組件的構造函數中使用參數進行依賴注入。

import { Component, OnInit } from "@angular/core";
import { AuthService } from "../core/auth.service";

@Component({
  selector: "app-login",
  template: `
    

      
      
      Login
    
  `,
  styles: [],
  //在providers中配置AuthService
  providers:[AuthService]
})
export class LoginComponent implements OnInit {
  //在構造函數中將AuthService示例注入到成員變量service中
  //而且我們不需要顯式聲明成員變量service了
  constructor(private service: AuthService) {
  }

  ngOnInit() {
  }

  onClick(username, password) {
    console.log("auth result is: " + this.service.loginWithCredentials(username, password));
  }

}

看到這里你會發現我們仍然需要import相關的服務，這是import是要將類型引入進來，而provider里面會配置這個類型的實例。當然即使這樣還是不太爽，可不可以不引入AuthService呢？答案是可以。

我們看一下app.module.ts，這個根模塊文件中我們發現也有個providers，根模塊中的這個providers是配置在模塊中全局可用的service或參數的。

providers: [
    {provide: "auth",  useClass: AuthService}
    ]

providers是一個數組，這個數組呢其實是把你想要注入到其他組件中的服務配置在這里。大家注意到我們這里的寫法和上面優點區別，沒有直接寫成

providers:[AuthService]

而是給出了一個對象，里面有兩個屬性，provide和useClass，provide定義了這個服務的名稱，有需要注入這個服務的就引用這個名稱就好。useClass指明這個名稱對應的服務是一個類，本例中就是AuthService了。這樣定義好之后，我們就可以在任意組件中注入這個依賴了。下面我們改動一下login.component.ts，去掉頭部的import { AuthService } from "../core/auth.service";和組件修飾器中的providers，更改其構造函數為

onstructor(@Inject("auth") private service) {
  }

我們去掉了service的類型聲明，但加了一個修飾符@Inject("auth")，這個修飾符的意思是請到系統配置中找到名稱為auth的那個依賴注入到我修飾的變量中。當然這樣改完后你會發現Inject這個修飾符系統不識別，我們需要在@angular/core中引用這個修飾符，現在login.component.ts看起來應該是下面這個樣子

import { Component, OnInit, Inject } from "@angular/core";

@Component({
  selector: "app-login",
  template: `
    

      
      
      Login
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor(@Inject("auth") private service) {
  }

  ngOnInit() {
  }

  onClick(username, password) {
    console.log("auth result is: " + this.service.loginWithCredentials(username, password));
  }

}

接下來的問題是我們是否只能通過這種方式進行表現層和邏輯之間的數據交換呢？如果我們希望在組件內對數據進行操作后再反饋到界面怎么處理呢？Angular2提供了一個雙向數據綁定的機制。這個機制是這樣的，在組件中提供成員數據變量，然后在模板中引用這個數據變量。我們來改造一下login.component.ts，首先在class中聲明2個數據變量username和password。

  username = "";
  password = "";

然后去掉onClick方法的參數，并將內部的語句改造成如下樣子：

console.log("auth result is: "
      + this.service.loginWithCredentials(this.username, this.password));

去掉參數的原因是雙向綁定后，我們通過數據成員變量就可以知道用戶名和密碼了，不需要在傳遞參數了。而成員變量的引用方式是this.成員變量。
然后我們來改造模板：

    

      
      
      Login
    

[(ngModel)]="username"這個看起來很別扭，稍微解釋一下，方括號[]的作用是說把等號后面當成表達式來解析而不是當成字符串，如果我們去掉方括號那就等于說是直接給這個ngModel賦值成“username”這個字符串了。方括號的含義是單向綁定，就是說我們在組件中給model賦的值會設置到HTML的input控件中。[()]是雙向綁定的意思，就是說HTML對應控件的狀態的改變會反射設置到組件的model中。ngModel是FormModule中提供的指令，它負責從Domain Model（這里就是username或password，以后我們可用綁定更復雜的對象）中創建一個FormControl的實例，并將這個實例和表單的控件綁定起來。同樣的對于click事件的處理，我們不需要傳入參數了，因為其調用的是剛剛我們改造的組件中的onClick方法。現在我們保存文件后打開瀏覽器看一下，效果和上一節的應該一樣的。本節的完整代碼如下：

//login.component.ts
import { Component, OnInit, Inject } from "@angular/core";

@Component({
  selector: "app-login",
  template: `
    

      
      
      Login
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  username = "";
  password = "";

  constructor(@Inject("auth") private service) {
  }

  ngOnInit() {
  }

  onClick() {
    console.log("auth result is: "
      + this.service.loginWithCredentials(this.username, this.password));
  }

}

通常情況下，表單的數據是有一定的規則的，我們需要依照其規則對輸入的數據做驗證以及反饋驗證結果。Angular2中對表單驗證有非常完善的支持，我們繼續上面的例子，在login組件中，我們定義了一個用戶名和密碼的輸入框，現在我們來為它們加上規則。首先我們定義一下規則，用戶名和密碼都是必須輸入的，也就是不能為空。更改login.component.ts中的模板為下面的樣子

    

      
        {{usernameRef.valid}}
      
        {{passwordRef.valid}}
      Login
    

注意到我們只是為username和password兩個控件加上了required這個屬性，表明這兩個控件為必填項。通過#usernameRef="ngModel"我們重新又加入了引用，這次的引用指向了ngModel，這個引用是要在模板中使用的，所以才加入這個引用如果不需要在模板中使用，可以不要這句。{{表達式}}雙花括號表示解析括號中的表達式，并把這個值輸出到模板中。這里我們為了可以顯性的看到控件的驗證狀態，直接在對應控件后輸出了驗證的狀態。初始狀態可以看到2個控件的驗證狀態都是false，試著填寫一些字符在兩個輸入框中，看看狀態變化吧。

我們是知道了驗證的狀態是什么，但是如果我們想知道驗證失敗的原因怎么辦呢？我們只需要將{{usernameRef.valid}}替換成{{usernameRef.errors | json}}。|是管道操作符，用于將前面的結果通過管道輸出成另一種格式，這里就是把errors對象輸出成json格式的意思。看一下結果吧，返回的結果如下

如果除了不能為空，我們為username再添加一個規則試試看呢，比如字符數不能少于3。

現在我們試著把{{表達式}}替換成友好的錯誤提示，我們想在有錯誤發生時顯示錯誤的提示信息。那么我們來改造一下template。

    

      
        {{ usernameRef.errors | json }}
        
this is required
        
should be at least 3 charactors
      
        
this is required
      Login
    

ngIf也是一個Angular2的指令，顧名思義，是用于做條件判斷的。*ngIf="usernameRef.errors?.required"的意思是當usernameRef.errors.required為true時顯示div標簽。那么那個?是干嘛的呢？因為errors可能是個null，如果這個時候調用errors的required屬性肯定會引發異常，那么?就是標明errors可能為空，在其為空時就不用調用后面的屬性了。

如果我們把用戶名和密碼整個看成一個表單的話，我們應該把它們放在一對

    

      

        
          
this is required
          
should be at least 3 charactors
        
          
this is required
        Login
      
    

這時運行后會發現原本好用的代碼出錯了，這是由于如果在一個大的表單中，ngModel會注冊成Form的一個子控件，注冊子控件需要一個name，這要求我們顯式的指定對應控件的name，因此我們需要為input增加name屬性

    

      

        
          
this is required
          
should be at least 3 charactors
        
          
this is required
        Login
        Submit
      
    

既然我們增加了一個formRef，我們就看看formRef.value有什么吧。
首先為form增加一個表單提交事件的處理

  onSubmit(formValue) {
    console.log(formValue);
  }

    

      
        

          
            
this is required
            
should be at least 3 charactors
          
            
this is required
          Login
          Submit
        
      
    

  onSubmit(formValue) {
    console.log("auth result is: "
      + this.service.loginWithCredentials(formValue.login.username, formValue.login.password));
  }

  styles: [`
    .ng-invalid{
      border: 3px solid red;
    }
    .ng-valid{
      border: 3px solid green;
    }
  `]

  styles: [`
    input.ng-invalid{
      border: 3px solid red;
    }
    input.ng-valid{
      border: 3px solid green;
    }
  `]