npm 包 ng-github-card 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们常常需要在我们的项目中展示 Github 仓库的信息，比如仓库名、stars 数量、contributors 数量等等。虽然我们可以手动去 Github 上复制粘贴这些信息，但是这样做效率低下且容易出错。今天，我们就来介绍一个非常实用的 npm 包：ng-github-card。

什么是 ng-github-card

ng-github-card 是一个用于在 Angular 项目中展示 Github 仓库信息的 npm 包。它通过 Github API 获取仓库信息，并将其以卡片的形式展示在我们的页面上。ng-github-card 的卡片包含了 Github 仓库的基本信息、contributors 信息和最近更新的 commits 信息等等。同时，ng-github-card 还支持自定义卡片的样式和内容，方便我们根据需要进行二次开发。

如何使用 ng-github-card

安装 ng-github-card

npm install ng-github-card --save

在你的 Angular 项目中导入 ng-github-card 模块

import { NgGithubCardModule } from 'ng-github-card';

@NgModule({
  imports: [
    NgGithubCardModule
  ]
})
export class AppModule { }

在你的页面模板中使用 ng-github-card 组件

<ng-github-card
  username="octocat"
  reponame="Hello-World"
  [showContributors]="true"
  [showCommits]="true"
></ng-github-card>

以上代码展示了如何在一个页面中使用 ng-github-card 组件，我们需要指定 Github 仓库的 username 和 reponame 属性，来告诉 ng-github-card 我们需要展示哪个仓库的信息。同时，我们还可以通过 showContributors 和 showCommits 属性来决定是否展示仓库的 contributors 信息和最近更新的 commits 信息。

ng-github-card 的深度学习和指导意义

ng-github-card 的使用非常简单，但是它带来的启示却是深刻的。首先，ng-github-card 通过调用 Github API 获取仓库信息，实现了前端与第三方服务的集成。这种集成方式非常常见，比如我们可以通过 API 获取天气信息、新闻信息等等，这样不仅可以增强我们的页面功能，还可以使我们的页面数据更加全面和准确。

其次，ng-github-card 的实现方式也值得我们借鉴。ng-github-card 使用了一个单独的模块 NgGithubCardModule 来封装它的组件和服务，使得我们在导入和使用时非常方便。这种模块化的设计不仅让我们可以更加清晰地组织我们的代码，还可以让我们的代码更加容易维护和升级。

最后，ng-github-card 的组件化设计也值得我们学习。ng-github-card 通过提供一个 ng-github-card 组件来展示 Github 仓库信息，这个组件还支持自定义样式和内容，使得我们可以轻松地在它的基础上进行二次开发。这种组件化的设计不仅让我们可以更高效地开发我们的项目，还可以增强我们的代码复用性。

示例代码

<ng-github-card
  username="octocat"
  reponame="Hello-World"
  [showContributors]="true"
  [showCommits]="true"
></ng-github-card>

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da342