创建总是令人兴奋，但是创建漂亮的才是令人满意的。
Angular本身就是一个很好的框架，可以构建。
如果我们想轻松创建引人注目的，只需将Bootstrap与Angular合并即可。

什么是Angular？

Angular是Google维护的开源Web开发框架。
它基于TypeScript语言，它是JavaScript的超集。
Angular非常受欢迎的原因很多，例如：

• 开源和跨平台

• Angular易于使用，因为它允许我们使用很少的代码来创建成熟的专业

• 双向数据绑定，可让我们通过模型更改视图，并通过视图更改模型

• 提供工具以执行端到端测试

• Angular的常春藤有助于调试，减小捆绑包大小和加快编译速度

• 提前编译

创建一个Angular应用程序

如果我们是Angular的新手并且尚未安装，请查看"什么是Angular"一文。

要创建Angular应用程序，可以使用ng new命令，如下所示：

ng new FIFA

使用以下命令进入项目目录：

cd FIFA

在项目目录中运行ng serve -o命令。
这将自动在localhost端口4200上为应用程序提供服务。
执行此操作时，我们将看到Angular的默认"欢迎"页面。
回到项目并删除app.component.html文件的所有内容，但最后一行除外，例如：<router-outlet> </router-outlet>

只是为了检查应用程序将如何响应，请输入一些基本HTML代码，如下所示：

<h1>Hello World</h1>

<h2>Welcome to theitroad!</h2>
<router-outlet></router-outlet>

我们将在开发服务器上看到以下

随着我们的前进，我将逐步修改此应用程序，但现在，打开应用程序的index.html文件。
在本届会议结束之前，我将创建一个示例FIFA，重点关注即将到来的FIFA世界杯。

什么是Bootstrap？

Bootstrap是一个开放源代码HTML，CSS和JS框架，用于创建优先于移动设备的。
使用Bootstrap，我们可以利用其易于使用的布局，组件，实用程序等轻松创建美观且响应迅速的。

Angular Bootstrap

我们可以通过两种方式将Bootstrap嵌入Angular：

• 使用Bootstrap CDN(内容交付网络)

• 使用npm(节点数据包管理器)

使用Bootstrap CDN

我们可以直接使用Bootstrap Content Delivery Network或者Bootstrap CDN。
这会将Bootstrap编译后CSS和JS的缓存版本提供给Angular应用程序。

要访问它，我们可以查看官方的Bootstrap CDN链接。

复制<link>标记并将其粘贴到index.html文件的头部的末尾。
完成后，复制<script>标记并将其粘贴在正文部分的开头。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

现在，复制这两个jQuery和Popper.js的<script>标记，并将它们粘贴到Bootstrap <script>标记下方。
保存文件并打开开发服务器。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

我们会注意到Bootstrap已成功嵌入，并且字体也进行了相应更改。
看一下下面的图片：

我们可以清楚地看到上一个输出的字体与该输出的字体之间的区别。
这表明Bootstrap功能已成功嵌入到应用程序中。

使用npm

注意：请注意，我已经删除了在以前的方法中添加的CDN版本。

或者，我们可以使用节点包管理器将Bootstrap功能嵌入到项目中。
为此，请打开命令提示符并执行以下命令：

npm install bootstrap jquery popper.js保存

完成后，我们将能够看到这三个软件包及其版本都将出现在package.json文件中。

CSS和JS必须全局加载，为此，我们必须在styles和scripts数组内的angular.json文件中指定路径。
我们安装的所有软件包都将下载到node_modules文件夹中。
打开node_modules文件夹，然后查找Bootstrap，jQuery和Popper。
在这些已安装的软件包中，我将仅使用缩小版本，因此请打开这些文件夹并查找这些缩小文件的路径。
下图显示了bootstrap.min.css文件路径：

一旦找到每个路径，就必须将其添加到angular.json文件中，如下所示：

现在保存更改并重新运行应用程序。
我们应该能够看到Bootstrap功能仍在起作用，如下所示：

项目

现在已经成功添加了必需的扩展，我们就都可以创建Angular Bootstrap应用程序了。

创建组件

该应用程序将包含三个组件，例如：家庭，场地和体育场。
要创建所有这些，请执行以下命令：

ng new home

ng new venue

ng new stadiums

我们将看到所有这些组件都已添加到src/app文件夹中，如下所示：

将所有组件导入到app.component.ts文件中，并将它们添加到声明数组中，如下所示：

打开app-routing module.ts文件，并为每个组件添加路径，如下所示：

import { HomeComponent } from './home/home.component';
import { LocationsComponent } from './locations/locations.component';
import { VenueComponent } from './venue/venue.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {path:  "", pathMatch:  "full",redirectTo:  "/home"},
  {path: "home", component: HomeComponent},
  {path: "venue", component: VenueComponent},
  {path: "locations", component: LocationsComponent},
   
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

打开每个组件的component.html文件，并添加我们选择的任何Bootstrap元素。
让我向大家展示一个基本示例。
其中我将向App.componenet.html文件添加一个导航列。
将Navbar添加到app.component.html文件的原因是它会显示在我的每个页面上。
单击此处以查看我在下面显示的代码中使用的Bootstrap代码。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">
    </button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</a>
        </li>

<li class="nav-item">
          <a class="nav-link" href="#">Venue</a>
        </li>

<li class="nav-item">
          <a class="nav-link" href="#">Locations</a>
        </li>

      </ul>

 </div>

  </nav>

<router-outlet></router-outlet>

上面的代码将具有以下

请注意，我没有在项目中使用相同的导航列。
我们可以为项目选择任何元素。
我们所要做的就是选择所需的元素并将其粘贴到组件HTML文件中。