在Angular中创建Library Finder应用：简介

在我以前的Angular教程系列之一中 ，我介绍了Angular的基础知识，从安装CLI开始，然后讨论了如何创建基本组件和实现路由。

我们在该系列中创建的国家信息应用程序非常适合Angular入门，但缺少一些功能。 例如，我们将要显示给用户的信息存储在数组中。 这不是问题，因为我们只显示了一些国家的信息。

CDNJS API的基础

CDNJS提供的API可用于通过其数据库搜索库或获取有关特定库的信息。

您可以通过以下请求获取有关某个库的所有信息：

https://api.cdnjs.com/libraries/[name]

在这里， name是您要访问其信息的库的名称。 请记住，该名称应与CDNJS数据库中存储的名称完全匹配。 例如，通过将名称设置为jquery ，您将获得有关jQuery的信息。 同样，你会被设定的名称，以获取有关chart.js之信息Chart.js 。 如您所见，数据库中的库名称可以与实际库名称完全匹配，也可以具有不同的大小写。

您还可以通过发出以下请求来获取所有库的列表，这些库的标题中都有特定的搜索词：

https://api.cdnjs.com/libraries?search=[query]

默认情况下，CDNJS为响应此请求而返回的库列表还将包含每个这些库的所有信息。 我们可以通过指定不同字段的名称来要求CDNJS仅返回某些信息：

https://api.cdnjs.com/libraries?search=[query]&fields=version,description

这是可以从数据库中请求其值的所有字段的列表： 版本 ， 描述 ， 主页 ， 关键字 ， 许可证 ， 存储库 ， 自动更新 ， 作者和资产 。

以下CDNJS返回的响应示例应帮助您大致了解如何在Angular应用中利用信息。

我们提出的要求是：

https://api.cdnjs.com/libraries?search=[sweet%20alert]&fields=version,description&output=human

我们得到的答复是：

{
  "results": [
    {
      "name": "sweetalert",
      "latest": "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css",
      "version": "1.1.3",
      "description": "A beautiful replacement for JavaScript's \"alert\""
    },
    {
      "name": "bootstrap-sweetalert",
      "latest": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js",
      "version": "1.0.1",
      "description": "A beautiful 'replacement' for JavaScript's alert"
    },
    {
      "name": "angular-sweetalert",
      "latest": "https://cdnjs.cloudflare.com/ajax/libs/angular-sweetalert/1.1.2/SweetAlert.min.js",
      "version": "1.1.2",
      "description": "AngularJS wrapper for SweetAlert"
    },
    {
      "name": "limonte-sweetalert2",
      "latest": "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.13.3/sweetalert2.min.js",
      "version": "7.13.3",
      "description": "A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes, supported fork of sweetalert"
    }
  ],
  "total": 4
}

搜索查询“甜蜜警报”只给了我们四个结果。 返回的结果数将取决于名称相似的文件数。 jQuery返回了很多结果。

图书馆查找器应用概述

既然我们已经介绍了CDNJS API的基础知识，是时候向您概述我们将要创建的库查找应用程序了。

库的HomeComponent将包含我们应用程序的标题： Angular中的Library Finder App 。 它还将包含两个不同的输入字段。 第一个将用于搜索整个数据库，以其名称中具有给定搜索查询的库进行搜索。 第二个输入字段可用于提供用户正在数据库中查找的库的确切名称。

在这两个字段下面，将有一个带有不同框内流行库名称的部分。 用户将可以单击任何一个框来阅读有关该特定库的更多信息。

我们应用程序中的下一个组件将是LibraryListComponent 。 该组件将具有与HomeComponent相同的标题。 但是，它将在标题下显示不同库的列表。 列表中的每个库将由一条水平线分隔。

每个库的名称将在一个大绿色标题内，然后，我们将提供该库的最新版本和说明。 最后，将有一个“ 查看更多详细信息”按钮，如果用户想了解有关特定库的更多信息 ，可以单击该按钮。

最后，我们有了LibraryDetailsComponent组件，该组件为用户提供有关特定库的信息。 对于这个特定的应用程序，我仅列出名称，最新版本，描述以及指向库主页的链接。 完成本系列后，您应该尝试在此页面上添加更多字段，并进行其他所需的更改。

我们还将在此组件内创建一个后退按钮。 这将像我们在上一个Angular系列中创建的国家/地区信息应用程序中的后退按钮一样工作。

设置事情

我们将通过更新库查找器应用程序的应用程序组件文件来结束本教程。

app.component.html文件将具有标题和路由器出口，以显示我们的所有路由视图。

<h1>{{title}}</h1>
<router-outlet></router-outlet>

该app.component.css文件将有必要CSS样式的h1内标签app.component.html文件。

h1 {
    font-family: 'Raleway';
    text-align: center;
    color: #999;
    font-size: 2.5em;
}

app.component.ts文件仅提供选择器，模板URL和包含链接模板CSS的样式表的路径。 在类定义中， app.component.ts文件仅设置title属性的值。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Library Finder App in Angular';
}

最后的想法

本教程旨在向您介绍CDNJS API ，我们将使用它来创建基于Angular的库查找器应用程序。 在介绍了库的基础知识之后，我们继续讨论了我们应用程序的大致轮廓。

图书馆查找器应用程序将包含三个不同的组件，每个组件在应用程序中扮演着自己独特的角色。 HomeComponent允许用户输入我们可以在数据库中查找的任何库的名称或搜索词。 LibraryListComponent列出了所有在标题中带有给定搜索词的库。 LibraryDetailsComponent允许用户查看有关他们感兴趣的任何库的更多详细信息。

在下一个教程中，我们将创建一个服务类以获取有关不同库的信息。 如果您希望我在本教程中阐明任何内容，请在评论中告诉我！

翻译自: https://code.tutsplus.com/tutorials/create-a-library-finder-app-in-angular-introduction--cms-30708