如何给一个 Angular 应用添加 Bootstrap

Miya Liu — Tue, 18 Apr 2023 02:40:00 +0000

原文： How to Add Bootstrap to an Angular Application

在这篇文章中，我们将使用最新版本的 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 中添加一些组件，以查看和测试这些组件，如下所示：


  
    
      Angular Bootstrap
    
    
    
      
        
          Home
        
        
          Link
        
        
          
            Dropdown
          
          
            Action
            Another action
            
            Something else here
          
        
        
          Disabled
        
      
      
        
        
      
    
  


  
    
      Email address
      
    
  
  
    
      Example textarea
      
    
  
  
    
      
        
        Default switch checkbox input
      
    
  
  
    
      
    
  



  
    Profile update
    
  
  
    
      
        Date of birth

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

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 上关注我，以便及时阅读我更新的文章。

Bootstrap - freeCodeCamp.org

如何给一个 Angular 应用添加 Bootstrap

前提条件

如何创建 Angular 应用程序

Profile update

总结