HTML、JavaScript 和 CSS 是前端开发的支柱。 Angular 是最常用的用于构建客户端应用程序的 JavaScript 框架之一。 另一方面，Bootstrap 是最流行的用户界面 (UI) 框架之一。
框架是一组预先构建的代码、工具和库的集合，它们提供了一种预定义的方式来构建应用程序。 Bootstrap 和 Angular 都是框架。
本文将定义每个框架并讨论结合这两种技术的好处，以及如何结合它们来创建视觉上吸引人且功能强大的应用程序。
什么是引导程序？
Bootstrap 是一个免费的前端工具包，用于创建移动优先应用程序。 这个 HTML、CSS 和 JavaScript 框架包含大量可重复使用的代码片段，开发人员可以在其项目的各个部分使用这些代码片段。
该框架具有用于各种功能的设计模板，例如按钮、模式、图片轮播、表格、导航等等。 Bootstrap 具有丰富的文档，使其易于使用。
什么是 AngularJS？
AngularJS 是一个 JavaScript 框架，它将 HTML 的语法扩展到常规标记语言之外。 该框架引入了数据绑定等功能，使开发人员可以避免在使用 HTML 时创建响应式网页的复杂过程。
AngularJS 采用模型-视图-控制器 (MVC) 框架，其中应用程序的逻辑和用户界面之间存在明确的分离。 开发人员可以使用 AngularJS 创建单页 Web 应用程序、社交网络应用程序、电子商务平台、内容管理系统等。
在 Angular 中使用 Bootstrap 的好处
- 预构建的 UI 组件：您不必从头开始创建导航栏、按钮、旋转木马和卡片，因为 Bootstrap 有预构建的代码片段供您使用。 因此，开发人员可以更多地关注功能，而 Bootstrap 负责基本结构和样式。
- 可定制：预构建组件提供样板代码。 但是，您可以在应用程序上自定义代码。 例如，如果您从 Bootstrap 获取一张卡片，您可以更改各种元素，例如图像和文本以满足您的需要。
- 响应式：现代网络用户在各种设备上浏览，从智能手机和平板电脑到计算机。 您不必为每种屏幕尺寸创建应用程序，因为 Bootstrap 提供响应式 Web 应用程序。
- 带来一致的样式：一个好的 Web 应用程序应该在不同的页面上具有一致的感觉和外观。 使用 Bootstrap 元素和组件可以帮助您实现这一目标。
- 强大的社区：这个框架包含许多资源和强大的文档，并得到许多开发人员的支持。
先决条件
#1。 节点.js
这是一个 JavaScript 运行时环境，您将使用它在浏览器外部运行 JavaScript 代码。 您可以通过运行此命令来检查 Node.js 的当前版本；
节点-v
如果没有安装，可以从官网安装。
#2。 节点包管理器 (NPM)
NPM 将管理您的 Angular 应用程序所需的所有相关包。 安装 Node.js 时默认安装 NPM。 您可以使用此命令检查当前版本；
npm -v
#3。 角 CLI
这是一个命令行工具，我们将使用它来创建 Angular 应用程序的基本结构。 您可以使用此命令安装 Angular CLI；
npm 安装-g @angular/cli
#4。 集成开发环境 (IDE)
这是您将要编写代码的地方。 您可以使用任何支持 JavaScript 的 IDE，例如 Visual Studio Code 或 Webstorm。
如何将 Bootstrap 添加到 Angular
我们现在拥有创建 Angular 应用程序所需的所有工具。 将 Bootstrap 添加到 Angular 有两种主要方法； 1. 使用 NPM 安装 Bootstrap。 2.使用CDN链接
方法 1：使用 NPM
我们可以使用 NPM 将整个 Bootstrap 库安装到我们的项目中。 按着这些次序;
第 1 步：使用 Angular CLI 设置基本的应用程序结构
一个典型的 Angular 应用程序有很多文件。 我们将命名我们的应用程序 angular-bootstrap-mockup（你可以给你的应用程序取任何你喜欢的名字）。 使用此命令设置您的应用程序；
ng 新的 angular-bootstrap-mockup
您将被带过这些问题；
- 你想添加 Angular 路由吗？ （是/否）输入 y
- 您想使用哪种样式表格式？ 选择 CSS
设置完成后，您将在终端上看到与此类似的内容。
导航到创建的项目并转到步骤 2。您可以使用此命令；
cd angular-bootstrap-模型
在代码编辑器中打开项目。 项目结构如下；
第 2 步：安装引导程序和引导程序图标。
运行此命令以安装两者；
npm 安装 bootstrap bootstrap-icons
第 3 步：在 angular.json 文件中包含 Bootstrap
在应用程序的根文件夹中找到 angular.json 文件并更改这些行；
"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" ]
第 4 步：安装 ng-bootstrap
Ng-bootstrap 是构建在 Bootstrap 框架之上的 Angular UI 组件的集合。 这个库中的不同组件是为与 AngularJS 一起工作而设计的。
使用此命令安装它；
npm 安装@ng-bootstrap/ng-bootstrap
第 5 步：修改 app.module.ts 以包含 NgbModule。
用这个更改 app.module.ts 文件的内容；
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
第五步：修改app.component.ts
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);
}
}
第 6 步：将 Bootstrap 元素添加到 app.component.html 文件
Bootstrap 网站上有大量组件可供选择。 我们将创建一个简单的导航栏并添加两个按钮。
更改app.component.html的内容如下；
<ul class="nav"> <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="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled">Blog</a> </li> </ul> <button type="button" class="btn btn-primary btn-lg">Angular</button> <button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
第 7 步：运行您的应用
使用这个命令；
服务
当 Angular 开发运行时，您可以在浏览器中打开 http://localhost:4200/。
方法 2：使用 CDN 链接将 Bootstrap 添加到 Angular
这种方法让您可以直接链接到存储 Bootstrap 文件的内容分发网络 (CDN)。
我们可以在新项目中使用这种方法创建多个按钮。 按着这些次序;
第一步：创建一个新的 Angular 项目
我们将我们的应用程序命名为 angular-bootstrap-cdn。 （您可以选择任何名称）。
运行这个命令；
ng 新的 angular-bootstrap-cdn
安装完成后，更改目录并在代码编辑器中打开您的项目。 您可以使用该命令进入项目目录；
cd angular-bootstrap-cdn
第 2 步：在 index.html 文件中包含 CDN 链接
在 head 部分找到 src/index.html 文件和 CDN 链接。
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
第 3 步：将 Bootstrap 代码添加到 app.component.html 文件中
找到 src/app/app.component.html 文件。
您可以将此代码添加到文件中；
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
第 4 步：运行您的应用
服务
经常问的问题
你能在同一个项目中同时使用 Bootstrap 和 Angular Material 吗？
是的。 Bootstrap 和 Angular Material 是为实现相同目的而创建的 UI 库。 但是，在处理同一组件时不应同时使用这两个库，因为它们很可能会崩溃。 例如，如果您想创建一个登录页面，请根据可用组件进行选择。
哪个版本的 Bootstrap 与 Angular 兼容？
在撰写本文时，Bootstrap 的当前版本是 v5.3.0-alpha2。 另一方面，Angular 的当前版本是 Angular 15。Bootstrap 4 中的任何内容都与各种 Angular 版本兼容。 但是，结合使用这两种技术时，请始终查看 Bootstrap 和 Angular 官方网站上的文档
您可以使用 Bootstrap 和 Angular 构建哪些项目？
您可以使用 Bootstrap 和 Angular 构建的应用程序的性质没有限制。 您可以使用这两者来构建单页应用程序、电子商务网站、社交平台、仪表板和管理面板。 您还可以将 Angular 与 Ionic 框架结合使用来创建移动应用程序。
Angular 是 JavaScript 还是 TypeScript 框架？
Angular 是一个 JavaScript 框架。 然而，Angular 是用 TypeScript 编写的，它是 JavaScript 的超集。 TypeScript 引入了 JavaScript 中不可用的新功能。 因此，您可以将 Angular 与 TypeScript 和 Angular 应用程序一起使用。
结论
您现在可以轻松地使用两个最流行的前端框架 Angular 和 Bootstrap 来创建各种应用程序。
方法的选择将取决于用例和您要创建的应用程序类型。
尽管 CDN 方法看起来很简单，但它也有各种缺点。 主要挑战是您的应用程序的安全性，因为黑客可以使用 CDN 将恶意脚本推送到您的网站。
使用 NPM 安装 Bootstrap 可让您控制包含在应用程序中的代码。 但是，这种方法可能很耗时，因为您必须下载所有依赖项。
查看如何将 Bootstrap 添加到 React 应用程序。
