在Angular中创建Library Finder应用程序：库服务和路由

我们在该系列中创建的国家信息应用程序非常适合Angular入门，但缺少一些功能。 例如，我们将要显示给用户的信息存储在数组中。 但是，在本教程中，我们将仅介绍少量数据，并允许用户搜索CDNJS中可用的库数据库。

这是我们将要构建的应用程序：

在本文中，我们将在一个名为library.service.ts文件中编写访问有关不同库的信息所需的所有代码。

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

创建一个LibraryService类

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

我们还必须修改用于访问数据的方法，因为这次信息将不会立即可用。 牢记这些，让我们开始为LibraryService编写代码。

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

我们还将从@angular/component/http导入HttpClient 。 这个可注入的类使我们可以访问可用于发出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()和searchLibraries()方法中，我们使用与上一教程中讨论的格式相同的格式来构造URL。 对于searchLibraries() ，我们仅获得每个库的版本和描述。 对于showLibrary() ，我们没有指定任何特定字段，因此我们可以获取所有内容，包括指向主页，存储库等的链接。

之后，我们使用toPromise()方法将get()方法返回的Observable转换为Promise 。 承诺使我们更容易编写异步代码。 一旦实现或拒绝了Promise，它将为您提供一个返回值，可以相应地使用它。 我们可以在Promise上使用then()方法，将实现和拒绝处理程序附加到我们的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数组中指定的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 { }

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

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

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

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

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

最后的想法

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

在下一个教程中，您将为Angular应用程序创建HomeComponent ，以允许用户指定搜索词或库名称。 如果您希望我在本教程中阐明任何内容，请在评论中告诉我。

翻译自: https://code.tutsplus.com/tutorials/create-a-library-finder-app-in-angular-library-service-and-routing--cms-30709