如何构建Angular 2服务

angular 2 是一个功能强大且功能齐全的框架，您可以使用它来构建最好的 Web 应用程序。Angular 2 在构建时考虑到了typescript，它利用了诸如装饰器和接口之类的未来语言特性，这使得编码变得更快、更容易。 

在我的课程“ 使用 Angular 2 的现代 Web 应用程序”的这段视频中，我将向您展示如何使用 Angular 2 构建将与服务器交互的服务。请注意，在本视频中，我们基于课程前面的代码进行构建，您可以在GitHub 上找到该课程的完整源代码。

如何构建 Angular 2 服务

如何创建项目服务

在到目前为止的课程中，我们一直在构建项目管理应用程序。现在，我们向用户显示的项目只是硬编码到我们的项目组件中。然而，这不是一个长期的解决方案。我们希望通过某种方式从我们的服务器获取项目列表。所以在这个视频中，我们将创建一个项目服务。

在 Angular 中，服务基本上是我们希望对多个组件可用的任何一组功能。这只是包装某些功能的简单方法。所以在我们的 app 目录中，让我们创建一个项目服务。我们称之为projects.service.ts. 

现在当然服务不是组件，因此无需导入组件装饰器。但是我们还需要另一个装饰器，那就是Injectable. 所以让我们Injectable从angular/core. 现在正如我所说，Injectable是一个装饰器，它不带任何属性。所以我们只需调用Injectable，然后导出我们的类。我们会打电话给班级ProjectsService。

Injectable 使这个类成为 Angular 可以用作依赖注入的东西。稍后我们将看到，我们使用依赖注入在使用项目服务的组件中获取此项目服务的实例。Angular 队列以这种方式使用依赖注入，因此如果您想测试组件，它可以轻松地注入模拟服务和类似的东西。

向服务添加方法

因此，让我们继续在ProjectsService此处添加一些方法。首先，我们需要HttpAngular 拥有的模块。这将允许我们直接向服务器发出请求。所以让我们导入Http，我们还将导入我们需要进行一些类型检查的响应类。而这两者都来自@angular/http. 

现在，我们还应该将Http模块导入到我们的应用程序模块文件中。所以，让我们在我们忘记之前继续这样做。在顶部的本机模块中，我将导入HttpModule.，然后在我们的导入中，让我们包含HttpModule.

现在我们已经在两个必要的地方导入了它，我们可以使用依赖注入将这个Http类注入到我们的ProjectsService. new Http()因此，我们要做的不是在这里做类似的事情，而是创建一个const ructor 函数。这个构造函数将采用 type 的属性Http。

ProjectsServiceAngular 在创建我们的实例时会看到这个参数，它会将这个类与我们导入到我们的应用程序模块中的类进行匹配，并将它的一个实例注入到构造函数中。 HttpHttpModule

现在，我们可以编写 this.http = http;将此参数分配给我们类的属性。但是 TypeScript 实际上有一些快捷语法，所以我们可以private直接在构造函数中应用关键字，TypeScript 会自动将其设为类属性。现在从类的其他方法中，我们可以使用this.http. 

因此，让我们创建一个名为getProjects(). 这将是我们调用以获取项目列表的方法。

现在有了 TypeScript 中的函数，我们仍然可以使用: Type 语法来指定函数返回值的类型。因为getProjects() 我们要返回一个Observablewraps Project。

所以在我们讨论那是什么之前，让我们导入这两个类。所以我要从 导入Observable ，rxjs让我们也导入我们的Project模型。 

使用 Observables

那么什么是可观察的呢？不幸的是，我无法在这里给你一个完整的 observables 介绍，但是 Angular 2 确实在很大程度上依赖于 observables，我会尽量让它们尽可能简单。

基本上，一个 observable 是一个类似于 promise 或数组的包装器。Promise、数组和 observables 内部都有其他项。在数组的情况下，我们有多个项目。在 Promise 的情况下，我们基本上有一些我们将在未来某个时间获得的单一值。

对于 observables，它可以是一个值，也可以是多个值。有时使用的一种定义是异步数组。基本上，一个 observable 是我们可以随时获得更多的数据流。我想你会在这里的一些课程中看到我们如何使用 observables 使获取和设置我们的一些数据变得相当容易。现在，如果你以前没有见过 observables，你可以把它们看作是一种 Promise。 

那么我们将从这个函数返回什么？好吧，我们可以做this.http.get()，所以让我们获取 哪个将返回我们的项目列表。然后我们可以做的是将响应映射到我们将要编写的名为./api/projectsthis.extractdata

您可以将map()这里的函数视为then()promise 上的方法。它的工作原理就像在一个数组上一样，map() 它将对该数组中的每个值执行一些操作，然后返回一个包含这些新值的新数组。

所以基本上，map()允许您对容器内的值执行某种操作。同样的事情也适用then()于 promise 中的方法。你可以调用then()一个 Promise 来调用一个 Promise 内部值的函数。然后返回一个新的承诺，无论你创造了什么新价值..

和map()这里一样。我们将调用extractData()这个 observable 中的响应，我们将从这个 observable 中返回一个包装项目的 observable。 

所以让我们创建一个extractData()函数，这将采用一个 Angular HTTP 库 Response类。

因此，我们将返回res.json()，这会将 HTTP 响应转换为实际的 JSON 正文。现在 from 的值extractData()将在我们的getProjects()调用中返回，Angular 会看到这与我们的返回类型匹配，因为它将是一个可观察的项目数组。

在 Projects 组件中导入函数

现在我们有了这个getProjects()功能，让我们转到我们的项目组件并导入它。首先，让我们导入ProjectsService. 

现在因为我们想向ProjectsService这个组件注入一个实例，我们需要告诉 Angular 它应该为这个组件提供一个实例。所以让providers我们为我们的组件装饰器添加一个属性，我们会告诉它它ProjectsService在这个组件中需要它。所以让我们添加一个构造函数，我们可以像在服务中一样使用依赖注入。

我们将创建一个名为 的参数service，这将是一个ProjectsService对象，因此 Angular 会知道将我们的一个ProjectsService实例注入到这个类中。我们将在此处为该参数赋予private关键字，以便它立即将其设置为属性。

有了这个，我们可以继续在里面使用它ngOnInit。所以在这里我们可以调用this.service.getProjects()——记住这会返回一个 observable——以及我们想要在这里调用的方法subscribe()。 

你可以把这个subscribe()方法想象成我们在调用then()一个返回的promise，或者如果你把它想象成一个数组，subscribe()就像forEach()一个数组上的方法。这有点像map()它接收数组内部的任何内容，或者在这种情况下是可观察的。

但是，forEach()不会返回新数组，subscribe()也不会返回新的 observable。所以这有点像行尾。所以 subscribe()将我们的项目列表作为它的参数，我们可以说 this.projects，它指的是我们的项目数组，将等于projects。这样我们就可以从 observable 中解包它的值，并且该值现在可以从类中获得。

如果我们回到浏览器查看我们的项目列表，我们将看到我放在服务器中的三个项目。

您可以跟我一起构建一个功能齐全的项目管理应用程序，包括用户登录和验证以及实时聊天。您将获得有关 Angular 2 模板语言、构建应用程序、路由、表单验证、服务、可观察对象等方面的课程。 

如果您从未使用过 Angular 2，请在我们的 Angular 2 入门课程中学习您需要了解的所有内容。如果您想在 Angular 2 体验的基础上再接再厉