角度服务:初学者综合指南

你好！我希望你已经阅读了我们关于角组件和布线的教程。在本文中，我们将继续讨论angular中另一个有趣的概念:服务。

如果Angular组件是我们应用程序的表示层，那么什么将负责实际获取真实数据和执行业务逻辑？这就是Angular服务的用武之地。Angular service的作用是跨组件获取、组织并最终共享数据、模型和业务逻辑。

在深入讨论Angular service的技术细节之前，让我们先了解一下它的功能。这将帮助您了解代码的哪个部分需要放在组件中，哪个部分需要放在Angular服务中。

以下是关于这项服务的一些重要事实:

服务是使用@ Injectable装饰器定义的。这告诉Angular服务可以注入到组件或其他服务中。稍后我们将详细讨论注射服务。

服务是保存所有业务逻辑并在组件间共享的地方。这使得您的应用程序更具可伸缩性和可维护性。通常，服务也是与后端交互的合适场所。例如，如果需要进行AJAX调用，可以在服务内部创建一个方法来完成调用。

服务是一个单独的类。在Angular应用程序中，只有一个特定服务的实例可以运行。

什么是服务？Angular中的服务是在应用程序的生命周期中只实例化一次的对象。服务接收和维护的数据可以在整个应用程序中使用。这意味着组件可以随时从服务获取数据。依赖注入用于在组件中引入服务。

让我们试着理解如何创建服务并在Angular组件中使用它。您可以在我们的GitHub资源库中找到该项目的完整源代码。

获取源代码后，导航到项目目录并使用npm install安装所需的依赖项。安装依赖项后，通过键入以下命令启动应用程序:

Ng serve您应该让应用程序在https://localhost:4200/上运行。

我们项目的整体文件夹结构如下。

src-app-components-employee . component . CSS-employee.component.html-employee . component . ts-services-employee . service . spec . ts-employee details . service . ts-app . routing . module . ts-app . component . CSS-app.component.html-app . component . ts-app . module . ts-assets-index . html-ts config . JSON 1 .构建服务框架在Angular中创建服务有两种方法:

在项目中手动创建文件夹和文件。使用ng gservice

在employee.service.ts中输入以下代码

从“@angular/core”导入{ injective }；@ injective（{ provide din:‘root‘，}）导出类EmployeeService { role =

6.从服务中动态获取数据。现在，我们将获取特定于employee.component.ts的数据。

让我们创建一个新服务来从API获取数据。

从“@angular/core”导入{ injective }；从“@angular/common/http”导入{ http client }；@Injectable（）导出类EmployeDetailsService { fetchemployeeedetailsurl =‘https://req RES . in/API

因为我们要通过AJAX调用来获取数据，所以导入HttpClient非常重要。如果您不熟悉HttpClient，可以在本系列的另一篇文章中了解更多信息。在我们的employeedetailss服务中，我们没有指定provideIn参数。这意味着我们需要采取额外的步骤让整个应用程序了解我们的可注射服务。您将在下一步中了解这一点。HttpClient本身是一个可注入的服务。在构造函数中声明它以将其注入组件。在fetchEmployeeDetails方法中，我们将使用HttpClient.get方法从URL获取数据。7.在app.module中注册服务与我们的第一个服务不同。在app.module.ts中注册employeedetailss服务对我们来说非常重要，因为我们没有声明它可以在根级别注入。这是更新后的app.module.ts文件:

从“@angular/core”导入{ ng module }；从“@angular/platform-browser”导入{ browser module }；从“@angular/common/http”导入{ http client module }；从“”导入{ AppRoutingModule }。/app-routing . module‘；从‘导入{ AppComponent }。/app . component“；从“”导入{ EmployeeComponent }。/components/employee . component“；从“”导入{ EmployeDetailsService }。/services/employee details . service‘；@ ng module（{声明:

结论是给你的！我们已经逐步构建了一个可以处理静态和动态数据的Angular服务。现在，您应该能够构建自己的Angular服务并使用它们通过AJAX调用获取数据。您甚至可以以更可重用的方式实现业务逻辑。

：角度服务:初学者综合指南 https://vps.caogenba.com.com/109215.html