译者 | 陈峻
我们在使用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'
})
【如何在Angular中实现REST API调用】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 。