在Angular中创建图书馆查找器应用程序：图书馆服务和路由

angular 在 Angular 中创建一个 Library Finder 应用程序：Monty Shokeen 简介

在这篇文章中，我们将在一个名为library.service.ts.

我们在另一个名为创建您的第一个 Angular 应用程序：存储和访问数据的教程中创建了一个类似的文件。在这种情况下，我们将数据本地存储在一个数组中，然后在服务类中编写一些方法来从中心位置访问信息。这次我们也会做类似的事情。

创建一个`LibraryService`类

当我们定义一个服务类时，情况将与上次有所不同。当时，数据存储在本地，因此我们可以立即访问它。这一次，我们将从服务器获取数据，因此我们必须导入一组不同的依赖项。

我们还必须修改我们用来访问数据的方法，因为这次信息不会立即可用。记住这些，让我们开始为LibraryService.

我们将为我们的LibraryService类导入两个依赖项。内部可用的Injectable依赖项@angular/core将允许我们将我们的LibraryService类注入到需要它的其他组件中。

我们还将HttpClient从@angular/component/http. 这个可注入类使我们能够访问可用于发出 HTTP 请求的不同方法。我们将使用get()这个类中的方法来检索我们所有的库数据。

我们将在我们的LibraryService类中定义两个方法，它们将获取有关特定库的数据或获取多个库的列表。这是完整的代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LibraryService {

    constructor(private https: HttpClient) {
    }

    showLibrary(libraryName) {
        const url = 'https://api.cdnjs.com/libraries/' + encodeURI(libraryName);
        return this.http.get(url).toPromise();
    }

    searchLibraries(searchTerm) {
        const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI(searchTerm) + '&fields=version,description';
        return this.http.get(url).toPromise();
    }
}

在showLibrary()andsearchLibraries()方法中，我们使用相同的格式来构造我们在上一个教程中讨论的 URL。对于searchLibraries()，我们只得到每个库的版本和描述。对于showLibrary()，我们不指定任何特定字段，因此我们可以获取所有内容，包括指向主页、存储库等的链接。

之后，我们使用toPromise()方法将方法Observable返回的get()内容转换为Promise。Promise 使我们更容易编写异步代码。一旦 Promise 被履行或拒绝，它将给你一个可以相应使用的返回值。我们可以使用then()Promise 上的方法将履行和拒绝处理程序附加到我们的 Promise 中。这将在后面的教程中介绍，我们将学习如何操作返回的数据并将其展示给我们的用户。

为我们的应用程序实现路由

我们还没有从我们的库查找器应用程序中创建任何组件，但我们仍然知道何时需要显示哪个组件。

为了编写我们的路由代码，我们将创建一个名为的文件app-routing.module.ts并在其中添加以下代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { LibraryDetailsComponent } from './library-details/library-details.component';
import { LibraryListComponent } from './library-list/library-list.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathmatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:library', component: LibraryDetailsComponent },
    { path: 'list/:search', component: LibraryListComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

我们首先导入不同的 Angular 依赖项以及稍后将创建的其他组件。每当用户访问routes数组中指定的路径时，我们都会为他们渲染相应的组件。

第三条和第四条路径中的冒号 ( :) 用于表示两者library和search是更具体的库名称和搜索词的占位符。这样，我们可以避免为每个库定义新路径，而只需使用一个通用路径，我们可以轻松地从中提取库名称或搜索词。

更新app.module.ts文件

在创建了我们的LibraryService类并实现了路由逻辑之后，我们所要做的就是更新app.module.ts文件。Angular 使用这个文件来构建和引导我们的应用程序。如果你打开这个文件，你会注意到它不是空的。Angular 已经导入了我们创建应用程序所需的一些依赖项。稍后当我们使用 Angular CLI 创建自己的组件时，Angular 也会更新这个应用程序。现在，将以下代码放入app.module.ts文件中。

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';

import { LibraryService } from './library.service';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [LibraryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

您需要为BrowserModule将在浏览器中运行的每个 Angular 应用程序导入。导入HttpClientModule使我们能够访问我们在类中使用的HttpClient其他相关服务LibraryService，以获取有关不同库的信息。Angular 已经AppComponent为我们导入了这个类。现在，我们只需要导入我们在上一节中定义的LibraryService类。AppRoutingModule

导入必要的依赖项后，我们使用@NgModule带有元数据对象的装饰器来告诉 Angular 如何编译和启动我们的应用程序。

该declarations数组用于指定我们的应用程序需要的所有组件类。尝试使用组件而不首先在此处列出将导致错误。现在，该declarations数组只包含一个类。一旦我们使用 Angular CLI 生成更多组件，它们将自动添加到此列表中。

该imports数组用于指定我们的应用程序需要的所有模块。您应该只NgModule在 imports 数组中添加类。在我们的例子中，这些类是BrowserModule、HttpClientModule和AppRoutingModule。

您使用providers数组让依赖注入器了解我们的应用程序需要的不同服务。在这种情况下，我们只是在数组中添加LibraryService类。providers

最后的想法

我们在本教程中创建了三个不同的文件。library.service.ts用于定义一个具有不同方法的LibraryService类，以获取有关各种库的数据。app-routing.module.ts文件用于存储我们应用的路由逻辑。我们将不同路径的信息以及需要为每个路径加载的相应组件存储在routes数组中。最后，我们更新了app.module.ts文件以包含LibraryService该类和AppRoutingModule可供整个应用程序使用的类。