我們在使用Angular框架構建Web應用時，往往離不開各種REST API的調用。這次，我將針對該話題和您展開深入討論。當然，由于會涉及到一定的代碼級討論，因此您可能需要對HTTP、HTML、TypeScript、以及Angular框架有所了解。下面，先讓我們來簡單瀏覽一下Angular框架中的服務和依賴注入的相關知識。
什么是Angular服務?
在真實的應用場景中，多個組件需要從外部源訪問數據。而由Typescript類編寫的Angular服務，往往可以為此充當單一的、可重用的數據訪問點。我們通過在可注入服務類(injectable service class)中定義好此類處理任務，就能夠讓任何組件輕松地訪問到這些已定義的任務。
什么是依賴注入?
作為一種設計模式，Angular的依賴注入 (Dependency Injection，DI) 可被用于為各個組件提供所需的各項依賴性服務。例如，當組件需要將某項任務委托給某個服務時，我們就可以將該服務注入到組件中，讓組件能夠順利地訪問到該服務類。為此，我們需要在服務類中使用@Injectable()裝飾器(decorator)，并允許Angular將其作為依賴項，注入到組件中的元數據(metadata)上。
Angular中的REST API調用
假設我們需要一個REST API來管理諸如：創建、更新和刪除博客等操作。那么，讓我們來看看該如何用它在MongoDB數據庫中插入博客的內容。
調用REST API的第一步是在Angular CLI中輸入如下命令：
ng generate service RESTAPIService
它會在現有項目的/src/app文件夾中，創建一個TypeScript類--RESTAPIService。接著，您可以將如下TypeScript代碼添加到對應的樣板文件(boilerplate)中。
TypeScript
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class RESTAPIService {
constructor(private http: HttpClient) { }
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
postBlog(blog: any) {
let url = "http://localhost:3000/blogs";
return this.http.post(url, blog, this.httpOptions);
}
}
如上代碼段所示，@Injectable()裝飾器會使得Angular項目中的RESTAPIService滿足DI要求。而元數據providedIn: 'root'指定了RestAPIService在所有組件中都是可見的。提供者對象(provider object)可以在該服務本身的元數據中被指定，或者是在任何特定的模塊及組件中被注冊。若要在任何特定的模塊或組件中注冊它，我們則需要分別使用@NgModule()或@Component()裝飾器。
該服務通過注入一個內置依賴項HttpClient，來與服務器進行通信。HttpClient服務會利用observable，向服務器發起HTTP請求。在使用HttpClient之前，我們需要在根模塊AppModule中導入Angular的HttpClientModule。
HttpHeader類可以表示HTTP請求的各個標頭配置選項。針對該博客的插入操作，我們需要添加帶有application/json值的Content-Type。它會將博客內容指定為JSON格式。在postBlog()方法中，作為參數被接收的博客內容，將使用HTTP的POST方法，被發送到REST API的URI--http://localhost:3000/blogs處。服務器端會處理請求，并在MongoDB數據庫中插入各種JSON文檔。下圖展示了用于收集博客內容的Angular表單，可能包含的博客標題、片段和正文字段。
在Angular中，雙向數據綁定可被用于從Angular表單處收集用戶的輸入。屬性指令[(ngModel)]實現了雙向綁定，以便在模板驅動的??Angular表單??中，讀取和寫入用戶的輸入值。有關此類雙向數據綁定的具體內容，請參見??AngularDocs??。
事件綁定主要被用于綁定各個事件處理器，以便處理由用戶操作引發的事件。針對本例中的博客插入操作，每當用戶單擊提交按鈕時，就會觸發并執行saveBlog()方法。
HTML
<form name="blogForm" action="" method="POST">
<table>
<tr>
<td colspan="2"><h1>Post New Blog</h1></td>
<td></td></tr>
<tr>
<td><label>Enter Title</label></td>
<td><input type="text" name="title" [(ngModel)]="title" placeholder="Enter Blog Title here ...."></td>
</tr>
<tr>
<td><label>Blog Snippet</label></td>
<td><input type="text" name="snippet" [(ngModel)]="snippet" placeholder="Enter Blog Snippet here ...."></td>
</tr>
<tr>
<td><label>Blog Body</label></td>
<td><textarea name="body" [(ngModel)]="body" placeholder="Enter Blog Body here ...."></textarea></td>
</tr>
<tr>
<td align="center" colspan="4">
<button type="submit" value="Submit" (click)="saveBlog()">Submit</button>
</td>
</tr>
</table>
</form>
如上述代碼段所示，TypeScript類會使用DI技術，在組件中注入RESTAPIService。它從本地項目目錄中導入服務，并將其實例化為構造函數參數。
saveBlog()方法則會從TypeScript變量(包括：標題、片段和正文)中讀取用戶的輸入數據，并構造出一個JSON對象--blog。它使用服務中定義的postBlog方法，并訂閱由Httpclient服務返回的可觀察對象，來跟蹤HTTP請求的狀態。如果它成功地完成了相關操作，用戶就會被導航到ViewBlogs路由處，并被呈現博客內容的列表。而如果出現了某個錯誤，它會在控制臺上顯示一條錯誤消息。
TypeScript
import { Component, OnInit } from '@angular/core';
import { RESTAPIService } from '../restapidata.service';
import { Router } from "@angular/router"
@Component({
selector: 'app-postblog',
templateUrl: './postblog.component.html',
styleUrls: ['./postblog.component.css']
})
export class PostblogComponent implements OnInit {
title = '' snippet = '' body = ''
constructor(private service: RESTAPIService, private router: Router) { }
ngOnInit(): void {
}
saveBlog() {
let blog = { title: this.title, snippet: this.snippet, body: this.body };
this.service.postBlog(blog).subscribe({
error: (err) => { console.error(err) },
complete: () => { this.router.navigate(['viewblogs']) }
});
}
}
小結
上文向您概述了如何使用Angular框架進行REST API調用的簡單過程。如果您是對此類技術感興趣的Web開發者，可以在理解基本原理的基礎上，通過上面介紹的代碼段，去使用Angular發起REST API調用。
原文標題：??How to Make a REST API Call in Angular??，作者：Muhammad Imran
