利用Angular+Jenkins展示构建版本-猿码集

1. 简介

Jenkins是一个开源的自动化构建工具，支持以Java、Ruby、python等语言编写脚本完成自动化构建、自动化部署和自动化测试。AngularJS是一个前端开发框架，能够使我们更加容易地开发SPA应用。本文将介绍如何使用Angular+Jenkins实现自动构建和版本查看。

2. Jenkins构建Angular应用

2.1 安装Jenkins

使用Jenkins自动构建Angular应用需要先安装Jenkins。Jenkins是基于Java开发的，所以需要先安装Java环境。安装方式可以参考官方文档：https://www.jenkins.io/doc/book/installing/。

安装完成后，使用浏览器打开Jenkins地址，输入初始管理员密码，按照向导完成Jenkins的安装设置。

2.2 安装插件

安装完成Jenkins后，需要安装一些插件。在Jenkins的dashboard上点击“Manage Jenkins”->“Manage Plugins”，进入插件管理页面。选择“Available”标签页，在搜索框中输入“NodeJS Plugin”并找到它，勾选它并点击“Install without restart”按钮进行安装。

2.3 配置Node.js环境

在插件安装完成后，我们需要配置Node.js环境，使得Jenkins能够在构建过程中使用它。

在Jenkins的dashboard上，点击“Manage Jenkins”->“Global Tool Configuration”，进入全局工具配置页面。找到Node.js配置项，点击“Add NodeJS”按钮，配置NodeJS的名称和版本，点击“Save”。

配置完成后，我们需要在Jenkins的每个构建任务中配置Node.js版本。在任务配置页面中，找到Node.js配置项，选择之前配置的Node.js版本。

2.4 配置构建任务

配置完环境后，我们需要创建一个构建任务。在Jenkins的dashboard上点击“New Item”，输入任务名称，选择“Freestyle project”类型，并点击“OK”按钮。

在任务配置页面中，配置源码管理。选择Git作为源码管理工具，在repository url中输入仓库地址，在credentials中输入访问仓库的用户名和密码。

在构建触发器中，勾选“Build when a change is pushed to GitHub”选项，这样每当有代码提交到仓库时，Jenkins就会自动构建应用。

配置构建环境。在构建环境中，勾选“Provide Node & npm bin/folder to PATH”选项，这样Jenkins就能将Node.js和npm添加到PATH。

在构建步骤中，添加构建命令。将以下命令添加到构建步骤中：

npm install -g @angular/cli npm install

ng build --prod

这样Jenkins在每次构建时都会执行以上三个命令，便完成了Angular应用的自动构建。

3. Angular部署到服务器

3.1 配置服务器

在将Angular应用部署到服务器之前，需要先配置服务器环境。安装Node.js和nginx，并配置好nginx的虚拟主机。

3.2 部署Angular应用

将构建生成的dist目录中的所有文件复制到服务器的ngnix虚拟主机的根目录下。在nginx的配置文件中，配置好访问地址。重新启动nginx即可。

4. 利用Angular展示版本信息

一个应用有多个版本，每个版本都有自己的变化和特性。我们需要一个简单的页面展示应用的版本信息。下面介绍如何使用Angular实现这个功能。

5. 配置路由

我们需要将版本信息页面添加到应用中。我们可以添加一个路由，当访问特定的URL时就会显示版本信息页面。

在Angular项目中打开app.module.ts，导入RouterModule：

import { RouterModule, Routes } from '@angular/router';

我们需要定义一个路由。在app.module.ts中，定义一个routes数组，并将路由路径和组件名添加到数组中：

const routes: Routes = [
  { path: 'versions', component: VersionsComponent }
];

这里我们定义了一个路由，路径为versions，组件名称为VersionsComponent。这样当用户访问/versions路径时，Angular就会展示VersionsComponent组件。我们还需要将路由添加到RouterModule中：

imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
],

6. 创建版本组件

这个组件负责展示应用的版本信息。在Angular项目的目录下，创建一个新的component，将其命名为Versions：

ng generate component versions

执行以上命令将会创建一个版本组件，并且自动将组件添加到app.module.ts文件中。打开versions.component.ts文件，添加一个versions数组：

versions = [
  { version: '1.0.0', releaseDate: '2021-01-01', features: ['Feature 1', 'Feature 2'] },
  { version: '1.1.0', releaseDate: '2021-02-01', features: ['Feature 3', 'Feature 4'] },
  { version: '2.0.0', releaseDate: '2021-03-01', features: ['Feature 5', 'Feature 6'] }
];

这里我们定义了一个版本数组。每个版本对象有三个属性：版本号、发布日期和特性数组。这些信息可以从构建日志中获取。

7. 创建版本模板

打开versions.component.html文件，添加一个table元素和table header，然后用ngFor指令循环展示每个版本的信息：


<table class="table table-striped">
  <thead>
    <tr>
      <th>版本</th>
      <th>发布日期</th>
      <th>特性</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let version of versions">
      <td>{{version.version}}</td>
      <td>{{version.releaseDate}}</td>
      <td>
          <li *ngFor="let feature of version.features">{{ feature }}</li>
      </td>
    </tr>
  </tbody>
</table>

我们使用了Angular的ngFor指令遍历versions数组，并将数据渲染到模板中。这样我们就可以动态展示版本信息了。

8. 总结

本文介绍了如何使用Angular和Jenkins完成自动构建和版本信息的展示。Jenkins自动构建能够大大提高开发效率，而版本信息的展示能够让用户更加清晰地了解应用的变化和特性。希望本文对大家有所帮助。

利用Angular+Jenkins展示构建版本