ng-github-tools 是一个用于在 Angular 应用中集成 GitHub API 的 npm 包。 它提供了一组 Angular 服务和指令，可以帮助您轻松地检索和展示 GitHub 仓库和用户的数据。 本文将介绍如何安装和使用 ng-github-tools，以及如何使用该工具从 GitHub API 中检索数据。
安装
您可以通过 npm 安装 ng-github-tools，只需要在命令行中运行以下命令即可：
npm install ng-github-tools --save
这将在您的项目中安装 ng-github-tools，并将其添加到 package.json 文件中。
导入和配置 ng-github-tools
要使用 ng-github-tools，您需要在您的 Angular 应用中导入和配置它。 首先，您需要在 app.module.ts 文件中导入 ng-github-tools：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-----------
-------- -
-----------------------------
------ --------------------
--------- ----------------------
--
--
---
--
------ ----- --------- - -在导入 ng-github-tools 后，我们需要配置它。 通过 NgGithubToolsModule 的静态方法 forRoot，我们可以传递必要的配置信息。 这里提供了两个重要的信息：
- 您的 GitHub token：这是用于在 GitHub API 中进行身份验证的访问令牌。 您必须在 GitHub 上创建并传递一个访问令牌才能使用 ng-github-tools。
- 您的 GitHub 用户名：这是您要检索仓库和用户数据的用户名。
在组件中使用 ng-github-tools
一旦您已经将 ng-github-tools 配置为您的应用程序中，您就可以开始在您的组件中使用它了。 您可以使用 ng-github-tools 提供的服务和指令来检索和显示 GitHub 数据。
在服务中使用 ng-github-tools
ng-github-tools 提供了一个名为 GithubService 的服务，您可以在组件中注入它来检索 GitHub 数据。 它具有许多有用的方法，例如 getRepository，getUser，getRepositories 和 getUsers。 这些方法将从 GitHub API 中检索所需的数据，并以 Observable 的形式返回。
以下是一个注入 GithubService 并使用它检索信息的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ---------- - ---- ------------------
------------
--------- -------------------
--------- -
----
--- ----------- ---- -- ------------- - -------
-- --------- --
-----
-----
-
--
------ ----- ----------- -
------ -------------- -------------------------
------------------- -------------- -------------- -
------------------ - -----------------------------------------
-
-在上面的示例中，我们注入了 GithubService，并使用它从 GitHub API 中检索 Angular 组织的存储库。 repositories$ 是 Observable 的实例，我们使用它在模板中循环渲染返回的存储库。
在指令中使用 ng-github-tools
ng-github-tools 还提供了一些指令，可以帮助您在应用程序中显示 GitHub 数据。 这些指令使得渲染 GitHub 数据变得简单，例如创建一个基于 GitHub 存储库的按钮，我们可以使用以下代码：
<button ghButton [repo]="{ owner: 'angular', name: 'angular' }">Star</button>在上面的示例中，我们使用 ghButton 指令创建一个基于 angular/angular 存储库的按钮。 repo 输入绑定是必需的，因为指令需要知道按钮所对应的存储库是哪个。
结论
通过使用 npm 包 ng-github-tools，我们可以轻松地从 Angular 应用程序中访问和展示 GitHub 数据。 它提供了一组 Angular 服务和指令，以帮助我们检索并在应用程序中渲染 GitHub 数据。 使用本文提供的示例和说明，您可以开始使用 ng-github-tools 从 GitHub API 中检索数据，并在您的应用中显示它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577581e8991b448d4763