在这篇文章中，我们将使用最新版本的 Angular 构建一个 web 应用。然后我们将添加 Bootstrap CSS 框架，它提供了丰富的、响应式的界面组件。

让我们开始吧。

前提条件

在你开始之前，你需要安装和配置下面的工具来创建 Angular 应用程序。

• Git：Git 是一个分布式版本控制系统，我们将用它来同步仓库。
• Node.js 和 npm：Node.js 是一个基于谷歌 V8 引擎的 JavaScript 代码运行时软件。npm 是 Node.js 的一个包管理器（Node Package Manager）。我们将使用这些工具来构建和运行 Angular 应用程序并安装库。
• Angular CLI：Angular CLI 是 Angular 的一个命令行工具，我们将用它来创建 Angular 应用程序的基础结构。
• 集成开发环境（如 Visual Studio Code 或 WebStorm）：集成开发环境是一种具有图形界面的工具，可以帮助你开发应用程序。我们将使用它来开发我们的 Angular 应用程序。

如何创建 Angular 应用程序

Angular 是一个开发平台，用于使用 HTML、CSS 和 TypeScript（JavaScript）构建 Web、移动和桌面应用程序。目前，Angular 的版本为 13，谷歌是该项目的主要维护者。

Bootstrap 是一个开源的 CSS 框架，它有许多组件用于构建响应式 web 界面。

让我们使用 @angular/cli 与路由文件和 SCSS 样式格式创建具有 Angular 基础结构的应用程序。

ng new angular-bootstrap
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-bootstrap/README.md (1062 bytes)
CREATE angular-bootstrap/.editorconfig (274 bytes)
CREATE angular-bootstrap/.gitignore (604 bytes)
CREATE angular-bootstrap/angular.json (3273 bytes)
CREATE angular-bootstrap/package.json (1079 bytes)
CREATE angular-bootstrap/tsconfig.json (783 bytes)
CREATE angular-bootstrap/.browserslistrc (703 bytes)
CREATE angular-bootstrap/karma.conf.js (1434 bytes)
CREATE angular-bootstrap/tsconfig.app.json (287 bytes)
CREATE angular-bootstrap/tsconfig.spec.json (333 bytes)
CREATE angular-bootstrap/src/favicon.ico (948 bytes)
CREATE angular-bootstrap/src/index.html (302 bytes)
CREATE angular-bootstrap/src/main.ts (372 bytes)
CREATE angular-bootstrap/src/polyfills.ts (2820 bytes)
CREATE angular-bootstrap/src/styles.scss (80 bytes)
CREATE angular-bootstrap/src/test.ts (743 bytes)
CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes)
CREATE angular-bootstrap/src/environments/environment.prod.ts (51 bytes)
CREATE angular-bootstrap/src/environments/environment.ts (658 bytes)
CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes)
CREATE angular-bootstrap/src/app/app.module.ts (393 bytes)
CREATE angular-bootstrap/src/app/app.component.scss (0 bytes)
CREATE angular-bootstrap/src/app/app.component.html (23809 bytes)
CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 bytes)
CREATE angular-bootstrap/src/app/app.component.ts (222 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

现在我们需要安装 bootstrap 和 bootstrap-icons 库，其中包含具有 Bootstrap 的样式和 JavaScript 代码的文件，像这样：

npm install bootstrap bootstrap-icons

安装后，我们将配置 bootstrap 和 bootstrap-icons 库。修改 angular.json 文件并添加 bootstrap.scss、bootstrap-icons.css 和 bootstrap.bundle.min.js 文件，如下所示：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

现在我们将安装 @ng-bootstrap/ng-bootstrap 库，其中包含原生 Angular 支持：

npm install @ng-bootstrap/ng-bootstrap@next

安装后，我们将导入 NgbModule 模块。改变 app.module.ts 文件并添加以下几行：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [
  BrowserModule,
  NgbModule,
  AppRoutingModule,
],

现在我们将从 src/app/app.component.ts 文件中删除 AppComponent 类的内容。导入 NgbModal 服务并创建 open 方法以打开一个模态，如下所示：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

  constructor(private modalService: NgbModal) {
  }

  public open(modal: any): void {
    this.modalService.open(modal);
  }

}

接下来我们将删除 src/app/app.component.html 文件中的内容。在 HTML 中添加一些组件，以查看和测试这些组件，如下所示：

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <h1>Angular Bootstrap</h1>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="container-fluid py-3">
  <div class="row my-3">
    <div class="col">
      <label for="exampleFormControlInput1" class="form-label">Email address</label>
      <input type="email" class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
      <textarea class="form-control form-control-sm" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
      </div>
    </div>
  </div>
  <div class="row my-3">
    <div class="col">
      <button class="btn btn-sm btn-outline-primary" (click)="open(demoModal)">Launch demo modal</button>
    </div>
  </div>
</div>

<ng-template #demoModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" name="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #dp="ngbDatepicker">
          <button type="button" class="btn btn-outline-secondary bi bi-calendar" (click)="dp.toggle()"></button>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

最后，我们将用下面的命令运行该应用程序：

npm start

> angular-bootstrap@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.38 MB
styles.css          | styles        | 255.86 kB
polyfills.js        | polyfills     | 128.56 kB
scripts.js          | scripts       |  76.94 kB
main.js             | main          |  22.81 kB
runtime.js          | runtime       |   6.59 kB

                    | Initial Total |   3.86 MB

Build at: 2021-06-27T21:28:22.756Z - Hash: 122b9fa4d57b962e7bcc - Time: 21933ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

准备好了！我们将访问 http://localhost:4200/，并检查应用程序是否在工作。你可以在 GitHub Pages 和 Stackblitz 上看到该应用程序正在工作。

应用程序的仓库是 https://github.com/rodrigokamada/angular-bootstrap。

总结

让我们总结一下本文的内容：

• 我们创建了一个 Angular 应用程序。
• 我们添加了一些 Bootstrap CSS 框架组件。

你可以使用这篇文章来创建丰富的、响应式的应用程序，提供更好的用户体验和更大的可用性。

感谢阅读，希望你喜欢这篇文章！

这篇教程是在我的博客上用葡萄牙语发布的。

请在 Twitter 上关注我，以便及时阅读我更新的文章。

在本文中，我们将使用最新版本的 Angular 创建一个应用程序。然后我们将它托管在 GitHub 页面的静态网站服务上，使用持续集成工具 Travis CI 来部署该应用程序。

前提

在开始之前，你需要安装和配置以下工具来创建 Angular 应用程序。

• Git：Git 是一个分布式版本控制系统，我们将使用它来同步仓库。
• Node.js and npm：Node.js 是一个基于谷歌 V8 引擎的 JavaScript 代码运行时软件。 npm 是 Node.js 的包管理器（Node Package Manager）。我们将使用这些来构建和运行 Angular 应用程序并安装库（依赖库）。
• Angular CLI：Angular CLI 是 Angular 的一个命令行实用工具，我们将使用它来创建 Angular 应用程序的基本结构。
• IDE（例如 Visual Studio Code 或 WebStorm）：IDE（集成开发环境）是具有图形界面的工具，可帮助我们开发应用程序。在这里，我们将使用其中一个来开发 Angular 应用程序。

开始

在 GitHub 上创建和配置你的帐户

GitHub 是一个使用 Git 工具进行版本控制的源代码和文件存储服务。GitHub Pages 是使用公共仓库的静态文件托管服务。

首先，如果你还没有帐户，则需要在 GitHub 上创建一个帐户。访问 https://github.com/ 并点击按钮 Sign up。

填写用户名、电子邮件地址和密码字段，点击 “Verify” 按钮通过测试，然后点击 “Create account” 按钮。

接下来，我们会生成在 Travis CI 中使用到的令牌。单击你的头像打开菜单，然后单击菜单 Settings。

单击菜单 Developer settings。

单击菜单 Personal access tokens。

点击按钮 Generate new token。

填写字段 Note，选择选项 repo 并点击按钮 Create token。

复制生成的令牌。因为接下来该令牌将在 Travis CI 中配置。在我的例子中，“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” 就是我生成的令牌。

让我们创建仓库。单击你的头像打开菜单，然后单击菜单 Your repositories。

点击按钮 New。

填写仓库名称字段并单击按钮 Create repository。

准备好了！帐户已创建好、令牌已生成，并且仓库 https://github.com/rodrigokamada/angular-travisci 也创建好了。

在 Travis CI 上创建和配置你的帐户

Travis CI 是与 GitHub 集成的部署服务。

首先，如果你还没有 Travis CI 帐户，则需要创建一个。访问 https://travis-ci.com/ 并点击按钮 Sign up。

单击 SIGN IN WITH GITHUB 按钮以使用你的 GitHub 帐户登录。

如果 Travis CI 请求列出 GitHub 仓库的权限，则接受该请求。单击仓库链接 angular-travisci。

让我们设置 GitHub 访问令牌。单击菜单 More options，然后单击菜单 Settings。

字段 NAME的值填写为 GITHUB_TOKEN ，VALUE 的值填写为你在 GitHub 上生成的令牌的值，然后单击按钮 Add。

准备好了！账户已创建，仓库也已配置好了。

创建你的 Angular 应用程序

Angular 是一个使用 HTML、CSS 和 TypeScript（JavaScript）构建 Web、移动和桌面应用程序的开发平台。目前，Angular 的版本为 13，Google 是该项目的主要维护者。

让我们使用带有路由文件和 SCSS 样式格式的 @angular/cli 创建具有 Angular 基础结构的应用程序。

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-travisci/README.md (1061 bytes)
CREATE angular-travisci/.editorconfig (274 bytes)
CREATE angular-travisci/.gitignore (604 bytes)
CREATE angular-travisci/angular.json (3267 bytes)
CREATE angular-travisci/package.json (1078 bytes)
CREATE angular-travisci/tsconfig.json (783 bytes)
CREATE angular-travisci/.browserslistrc (703 bytes)
CREATE angular-travisci/karma.conf.js (1433 bytes)
CREATE angular-travisci/tsconfig.app.json (287 bytes)
CREATE angular-travisci/tsconfig.spec.json (333 bytes)
CREATE angular-travisci/src/favicon.ico (948 bytes)
CREATE angular-travisci/src/index.html (301 bytes)
CREATE angular-travisci/src/main.ts (372 bytes)
CREATE angular-travisci/src/polyfills.ts (2820 bytes)
CREATE angular-travisci/src/styles.scss (80 bytes)
CREATE angular-travisci/src/test.ts (743 bytes)
CREATE angular-travisci/src/assets/.gitkeep (0 bytes)
CREATE angular-travisci/src/environments/environment.prod.ts (51 bytes)
CREATE angular-travisci/src/environments/environment.ts (658 bytes)
CREATE angular-travisci/src/app/app-routing.module.ts (245 bytes)
CREATE angular-travisci/src/app/app.module.ts (393 bytes)
CREATE angular-travisci/src/app/app.component.scss (0 bytes)
CREATE angular-travisci/src/app/app.component.html (23809 bytes)
CREATE angular-travisci/src/app/app.component.spec.ts (1087 bytes)
CREATE angular-travisci/src/app/app.component.ts (221 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

创建 .travis.yml 文件。

touch .travis.yml

使用以下内容配置 .travis.yml 文件。

notifications:
  email:
    recipients:
      - rodrigo@kamada.com.br

language: node_js

node_js:
  - 16

before_script:
  - npm install

script:
  - npm run test:headless

before_deploy:
  - npm run build:prod

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist/angular-travisci
  on:
    branch: main

更改 package.json 文件，并添加以下脚本。 将 rodrigokamada 替换为你的 GitHub 用户名。

  "build:prod": "ng build --prod --base-href https://rodrigokamada.github.io/angular-travisci/",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless"

更改 src/app/app.component.spec.ts 文件并删除测试 should have as title 'angular-travisci' 和 should render title。

使用以下命令运行测试：

npm run test:headless

> angular-travisci@1.0.0 test:headless
> ng test --watch=false --browsers=ChromeHeadless

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
⠸ Generating browser application bundles (phase: building)...05 09 2021 19:40:04.329:INFO [karma-server]: Karma v6.3.4 server started at http://localhost:9876/
05 09 2021 19:40:04.331:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
05 09 2021 19:40:04.369:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
05 09 2021 19:40:09.704:INFO [Chrome Headless 92.0.4515.159 (Linux x86_64)]: Connected on socket NUtJhjavb1JvssqOAAAB with id 25989029
Chrome Headless 92.0.4515.159 (Linux x86_64): Executed 1 of 1 SUCCESS (0.068 secs / 0.042 secs)
TOTAL: 1 SUCCESS

使用以下命令运行应用程序，访问地址 http://localhost:4200/，并检查该应用程序是否正常工作。

npm start

> angular-travisci@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.39 MB
polyfills.js        | polyfills     | 128.51 kB
main.js             | main          |   8.89 kB
runtime.js          | runtime       |   6.63 kB
styles.css          | styles        |   1.18 kB

                    | Initial Total |   2.53 MB

Build at: 2021-09-05T22:35:38.010Z - Hash: a4cfc9149589386eca5b - Time: 39997ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

使用以下命令构建应用程序：

npm run build:prod

> angular-travisci@1.0.0 build:prod
> ng build --configuration production --base-href https://rodrigokamada.github.io/angular-travisci/

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |      Size
main.c678fa8750e7c769.js      | main          | 177.63 kB
polyfills.6d7801353e02e327.js | polyfills     |  36.21 kB
runtime.b136bda8a38c4f2e.js   | runtime       |   1.06 kB
styles.ef46db3751d8e999.css   | styles        |   0 bytes

                              | Initial Total | 214.90 kB

Build at: 2021-09-05T22:42:19.525Z - Hash: 83bfffc079b083727ca4 - Time: 26030ms

在你创建的 GitHub 仓库上同步应用程序。

准备好了！在 GitHub 仓库上同步应用程序后，Travis CI 会构建应用程序并在分支 gh-pages 上同步。

访问地址 https://rodrigokamada.github.io/angular-travisci/ 并检查应用程序是否正常工作。将 rodrigokamada 值替换为你的 GitHub 用户名。

就是这样！https://github.com/rodrigokamada/angular-travisci 上的应用程序仓库现在可以用了。

结语

总结本文所涵盖的内容：

• 在 GitHub 上创建了一个帐户
• 在 GitHub 上创建了一个访问令牌
• 在 GitHub 上创建了一个仓库
• 在 Travis CI 上创建了一个帐户
• 在 Travis CI 上配置了 GitHub 访问令牌
• 创建一个 Angular 应用程序

你可以使用本文创建你的个人网站并拥有在线作品集。

感谢你阅读本文，希望你喜欢这篇文章！

如果你需要在我发布新文章时获得最新内容，请在 Twitter 上关注我。

本教程以葡萄牙语发布在我的博客。