使用HttpClient

在使用 HttpClient 前，需要先 import HttpClientModule，所以我們到 account.module.ts，將 HttpClientModule 匯入。要注意必須是從 @angular/common/http import 進來才是對的：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
imports: [
     CommonModule,
     FormsModule,
     HttpClientModule
     ]
...
})

然後我們會把要傳資料的 function 寫在 Service 裡。而 HttpClient 本身是一個 Service，現在要將它注入到我們自己的 Service 中：

 // http.service.ts
 
import { HttpClient } from '@angular/common/http';

export class HttpService {
    constructor(private http: HttpClient) { }
}

別忘了 import HttpClient。

現在可以開始寫傳送資料的 function 了，先新增一個 button ，用來註冊，並綁定 HttpService 的 function Register()。然後修改一下 login 的欄位名稱，傳入 Register():

// login.component.html

帳號 <input type="text" [(ngModel)]="login.email" name="username"><br>
密碼 <input type="password" [(ngModel)]="login.password" name=password><br>
...
<button (click)="http.Register(login)"> Register</button>

// login.component.ts

login = {
    email: '',
    password : ''
 };

然後到 http.service.ts 寫我們的 http requset：

我們先用 get() 來試著存取本地的物件，先寫一個測試用的 json，放在
src/assets/ 裡：

 // /src/assets/text.json
 
{
	"text":"text.json from local"
}

至於為什麼要放在 src/assets/，這跟 Angular.json 的設定有關，如果有額外的靜態檔案要放進 Angular 專案，要將目錄或檔案加入 Angular.json 裡的 assets 欄位:

get()的第一個參數加入檔案位置，有必要的話，可以在後面的參數加入 html header：

Register(data) {
    console.log(data);
    
    this.http.get('assets/text.json')
    .subscribe((result) => {
      console.log(result);
    });
}

this.http.get()會回傳一個 Observable<...> 物件，所以需要用 .subscribe() 去接他的結果，我們傳入一個 callback function 作為參數，當接到結果時，將結果印出。

理論上，我們可以正確地取得內容：

但我們的應用是前後端分離的，所以我要存取的是遠端伺服器，但存取遠端伺服器並不像存取本地檔案這麼單純，我們明天來看看要怎麼做。