使用 Bootstrap 設計 Angular 應用程序

如果您已經嘗試使用 Angular 7 構建 Web 應用程序，那麼是時候將它提升一個檔次了。 讓我們看看如何將 Bootstrap CSS 樣式和 JavaScript 文件與使用 Angular CLI 生成的 Angular 項目集成，以及如何使用表單控件和類來創建漂亮的表單以及如何使用 Table 樣式設置 HTML 表格的樣式。

對於 Angular 部分，我們將創建一個簡單的客戶端應用程序來創建和列出聯繫人。 每個聯繫人都有一個 ID、姓名、電子郵件和描述，我們將使用一個簡單的數據服務，將聯繫人存儲在 TypeScript 數組中。 您可以改用高級內存 API。 （查看“Angular 路由的完整指南”。）

注意：您可以從這個 GitHub 存儲庫獲取本教程的源代碼，並在此處查看實時示例。

要求

在我們開始創建演示應用程序之前，讓我們看看本教程所需的要求。

基本上，您將需要以下內容：

• 安裝了 Node.js 和 NPM（您可以直接前往官方網站並為您的系統下載二進製文件），
• 熟悉 TypeScript，
• Angular的工作經驗，
• CSS和HTML的基本知識。
  

安裝 Angular CLI

讓我們從安裝最新版本的 Angular CLI 開始。 在您的終端中，運行以下命令：

 $ npm install -g @angular/cli

在撰寫本文時，已安裝 Angular CLI v7.0.3 。 如果您已經安裝了 CLI，則可以使用以下命令確保您擁有最新版本：

 $ ng --version

創建項目

安裝 Angular CLI 後，讓我們通過運行以下命令使用它來生成 Angular 7 項目：

 $ ng new angular-bootstrap-demo

然後 CLI 將詢問您：

您想添加 Angular 路由嗎？

按Y 。 接下來，它會問你：

您想使用哪種樣式表格式？

選擇“CSS”。

添加引導程序

創建項目後，您需要安裝 Bootstrap 4 並將其與您的 Angular 項目集成。

首先，在項目的根文件夾中導航：

 $ cd angular-bootstrap-demo

接下來，從 npm 安裝 Bootstrap 4 和 jQuery：

 $ npm install --save bootstrap jquery

（在這種情況下，安裝了bootstrap v4.2.1和jquery v3.3.1 。）

最後，打開angular.json文件，將 Bootstrap CSS 和 JS 文件以及 jQuery 的文件路徑添加到build目標下的styles和scripts數組中：

 "architect": { "build": { [...], "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] },

查看如何將 Bootstrap 添加到 Angular 6 項目中，了解如何將 Bootstrap 與 Angular 集成。

添加數據服務

創建項目並添加 Bootstrap 4 後，我們將創建一個 Angular 服務，該服務將用於提供一些演示數據以顯示在我們的應用程序中。

在您的終端中，運行以下命令以生成服務：

 $ ng generate service data

這將創建兩個src/app/data.service.spec.ts和src/app/data.service.ts文件。

打開src/app/data.service.ts並將其內容替換為以下內容：

 import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { contacts = [ {id: 1, name: "Contact 001", description: "Contact 001 des", email: "[email protected]"}, {id: 2, name: "Contact 002", description: "Contact 002 des", email: "[email protected]"}, {id: 3, name: "Contact 003", description: "Contact 003 des", email: "[email protected]"}, {id: 4, name: "Contact 004", description: "Contact 004 des", email: "[email protected]"} ]; constructor() { } public getContacts():Array<{id, name, description, email}>{ return this.contacts; } public createContact(contact: {id, name, description, email}){ this.contacts.push(contact); } }

我們添加了一個包含一些演示聯繫人的contacts數組、一個返回聯繫人的getContacts()方法和一個將新聯繫人附加到contacts數組的createContact() 。

添加組件

創建數據服務後，接下來我們需要為我們的應用程序創建一些組件。 在您的終端中，運行：

 $ ng generate component home $ ng generate component contact-create $ ng generate component contact-list

接下來，我們將這些組件添加到路由模塊以在我們的應用程序中啟用導航。 打開src/app/app-routing.module.ts文件並將其內容替換為以下內容：

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactCreateComponent } from './contact-create/contact-create.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ {path: "", pathMatch: "full",redirectTo: "home"}, {path: "home", component: HomeComponent}, {path: "contact-create", component: ContactCreateComponent}, {path: "contact-list", component: ContactListComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

當用戶訪問我們的應用程序時，我們使用路由器路徑的redirectTo屬性將用戶重定向到主頁。

添加頁眉和頁腳組件

接下來，讓我們創建頁眉和頁腳組件：

 $ ng generate component header $ ng generate component footer

打開src/app/header/header.component.html文件並添加以下代碼：

 <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Angular Bootstrap Demo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="/home">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-list">Contacts</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-create">Create</a> </li> </ul> </div> </nav>

Bootstrap 4 將創建一個導航欄，我們將使用routerLink指令鏈接到不同的組件。

使用.navbar 、 .navbar-expand{-sm|-md|-lg|-xl}和.navbar-dark類來創建 Bootstrap 導航欄。 （有關導航欄的更多信息，請查看 Bootstrap 關於“導航欄”的文檔。

接下來，打開src/app/header/header.component.css文件並添加：

 .nav-item{ padding:2px; margin-left: 7px; }

接下來，打開src/app/footer/footer.component.html文件並添加：

 <footer> <p class="text-xs-center">© Copyright 2019. All rights reserved.</p> </footer>

打開src/app/footer/footer.component.css文件並添加：

 footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; text-align: center; }

接下來，打開src/app/app.component.html文件並將其內容替換為以下內容：

 <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>

我們正在使用頁眉和頁腳組件創建一個應用程序外殼，這意味著它們將出現在我們應用程序的每個頁面上。 唯一需要更改的部分是路由器插座中將插入的內容（查看 Angular 網站上的“應用程序外殼”以獲取更多信息）。

添加一個 Bootstrap Jumbotron

根據引導文檔：

“Jumbotron 是一種輕量級、靈活的組件，可以選擇擴展整個視口，以在您的網站上展示關鍵營銷信息。”

讓我們將 Jumbotron 組件添加到我們的主頁。 打開src/app/home/home.component.html文件並添加：

 <div class="jumbotron"> <h1>Angular Bootstrap Demo</h1> <p class="lead"> This demo shows how to integrate Bootstrap 4 with Angular 7 </p> <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a> </div>

.jumbotron類用於創建 Bootstrap Jumbotron。

添加列表組件：使用引導表

現在讓我們從數據服務創建一個組件到列表數據，並使用 Bootstrap 4 表來顯示表格數據。

首先，打開src/app/contact-list/contact-list.component.ts文件並註入數據服務，然後在組件初始化時調用getContacts()方法獲取數據：

 import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts; selectedContact; constructor(public dataService: DataService) { } ngOnInit() { this.contacts = this.dataService.getContacts(); } public selectContact(contact){ this.selectedContact = contact; } }

我們添加了兩個變量contacts和selectedContact ，它們保存了一組聯繫人和選定的聯繫人。 還有一個selectContact()方法，它將選定的聯繫人分配給selectedContact變量。

打開src/app/contact-list/contact-list.component.html文件並添加：

 <div class="container"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let contact of contacts"> <td>{{ contact.id }}</td> <td> {{ contact.name }}</td> <td> {{ contact.email }}</td> <td> <button class="btn btn-primary" (click)="selectContact(contact)"> Show details</button> </td> </tr> </tbody> </table> <div class="card text-center" *ngIf="selectedContact"> <div class="card-header"> # {{selectedContact.id}} </div> <div class="card-block"> <h4 class="card-title">{{selectedContact.name}}</h4> <p class="card-text"> {{selectedContact.description}} </p> </div> </div> </div>

我們簡單地遍歷contacts數組並顯示每個聯繫人的詳細信息和一個按鈕來選擇一個聯繫人。 如果選擇了聯繫人，將顯示帶有更多信息的 Bootstrap 4 卡。

這是 Bootstrap 4 文檔中卡片的定義：

“卡片是一種靈活且可擴展的內容容器。 它包括頁眉和頁腳選項、各種內容、上下文背景顏色和強大的顯示選項。 如果您熟悉 Bootstrap 3，卡片將取代我們的舊面板、孔和縮略圖。 與這些組件類似的功能可用作卡片的修飾符類。”

我們使用.table和.table-hover類來創建 Bootstrap 樣式的表格，使用.card 、 .card-block 、 .card-title和.card-text類來創建卡片。 （有關更多信息，請查看表格和卡片。）

添加創建組件：使用引導表單控件和類

現在讓我們向我們的contact-create組件添加一個表單。 首先，我們需要在我們的主應用程序模塊中導入FormsModule 。 打開src/app/app.module.ts文件，從@angular/forms導入FormsModule ，並將其添加到imports數組中：

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule } from '@angular/forms'; /* ... */ @NgModule({ declarations: [ /* ... */ ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

接下來，打開src/app/contact-create/contact-create.component.ts文件並將其內容替換為以下內容：

 import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-contact-create', templateUrl: './contact-create.component.html', styleUrls: ['./contact-create.component.css'] }) export class ContactCreateComponent implements OnInit { contact : {id, name, description, email} = {id: null, name: "", description: "", email: ""}; constructor(public dataService: DataService) { } ngOnInit() { } createContact(){ console.log(this.contact); this.dataService.createContact(this.contact); this.contact = {id: null, name: "", description: "", email: ""}; } }

接下來，打開src/app/contact-create/contact-create.component.html文件並添加以下代碼：

 <div class="container"> <div class="row"> <div class="col-sm-8 offset-sm-2"> <div> <form> <div class="form-group"> <label for="id">ID</label> <input [(ngModel)]="contact.id" type="text" name="id" class="form-control" placeholder="Enter ID"> <small class="form-text text-muted">Enter your contact's ID</small> <label for="name">Contact Name</label> <input [(ngModel)]="contact.name" type="text" name="name" class="form-control" placeholder="Enter your name"> <small class="form-text text-muted">Enter your contact's name</small> <label for="email">Contact Email</label> <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" placeholder="Enter your email"> <small class="form-text text-muted">Enter your contact's email</small> <label for="description">Contact Description</label> <textarea [(ngModel)]="contact.description" name="description" class="form-control"> </textarea> <small class="form-text text-muted">Enter your contact's description</small> </div> </form> <button class="btn btn-primary" (click)="createContact()">Create contact</button> </div> </div> </div> </div>

我們使用.form-group 、 .form-control類來創建引導樣式的表單（查看“表單”以獲取更多信息）。

我們使用ngModel指令將表單字段綁定到組件的變量。 為了使數據綁定正常工作，您需要為每個表單字段命名。

推薦閱讀： Tamas Piros 使用 Angular 管理圖像斷點

運行 Angular 應用程序

在這一步，讓我們運行應用程序，看看是否一切都按預期工作。 轉到您的終端，確保您位於項目的根文件夾中，然後運行以下命令：

 $ ng serve

實時重載開發服務器將從https://localhost:4200地址運行。 打開您的網絡瀏覽器並導航到該地址。 您應該看到以下界面：

如果您導航到“聯繫人”頁面，您應該會看到：

如果您導航到“創建聯繫人”頁面，您應該會看到：

結論

在本教程中，我們看到瞭如何使用 Bootstrap 界面創建一個簡單的 Angular 應用程序。 您可以在 GitHub 上找到完整的源代碼，並在此處查看實時示例。