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

在本教程中，我们将超越一小组数据，让用户搜索CDNJS上可用的整个图书馆数据库。查看我关于 创建您的第一个 angular 应用程序：基础知识的帖子，了解如何安装 Angular CLI 和其他推荐工具以轻松创建 Angular 应用程序。

CDNJS api的基础知识

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

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

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

这里，name是您要访问其信息的库的名称。请记住，该名称应与存储在 CDNJS 数据库中的名称完全匹配。例如，您将通过将名称设置为 来获取有关jqueryjquery的信息。同样，您将通过将名称设置为 .js 来获取有关图表chart.js.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
}

搜索查询“sweet alert”只给了我们四个结果。返回的结果数量取决于具有相似名称的文件的数量。jQuery 会返回很多结果。

图书馆查找器应用程序概述

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

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

在这两个字段下方，将有一个部分在不同的框中包含流行库的名称。用户将能够单击任何这些框以阅读有关该特定库的更多信息。

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

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

最后，我们有我们的LibraryDetailsComponent组件，它为用户提供有关特定库的信息。对于这个特定的应用程序，我只列出了名称、最新版本、描述和图书馆主页的链接。一旦我们完成了本系列，您应该尝试在此页面上添加更多字段并进行您喜欢的任何其他更改。

我们还将在此组件内创建一个后退按钮。这将像我们在之前的 Angular 系列中创建的***信息应用程序中的后退按钮一样工作。

设置东西

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

该app.component.html文件将有一个标题和一个路由器出口来显示我们所有的路由视图。

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

该文件将具有设置文件内标签app.component.css样式所需的 CSS 。h1app.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';
}

如果您以前从未创建过 Angular 应用程序，您应该首先阅读我的创建您的第一个 Angular 应用程序系列的基础教程。我已经在该教程中更详细地解释了所有内容。

最后的想法

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

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