使用 Angular 和 Bootstrap 5 建立功能豐富的管理儀表板

管理儀表闆對於管理和監控數據、分析趨勢以及在任何應用程式中獲得可操作的見解至關重要。將 Angular 的強大功能與 Bootstrap 5 現代、靈活的設計系統相結合，使開發人員能夠高效地創建可擴展、響應靈敏且具有視覺吸引力的管理儀表板。

在這份綜合指南中，我們將探討為什麼 Angular 和 Bootstrap 5 是完美的搭配，建立一個項目，並逐步建立一個功能性的管理儀表板。

---

為什麼將 Angular 與 Bootstrap 5 一起使用？

Angular 的力量

Angular 是一個強大的基於 TypeScript 的框架，擅長創建動態單頁應用程式 (SPA)。它提供了一套工具，使其成為管理儀表板的理想選擇：

• 基於元件的架構：可重複使用和模組化元件簡化了開發。
• 雙向資料綁定： 確保 UI 和邏輯之間的同步。
• 依賴注入：提供了一種簡化的方式來管理服務和 API。
• 路由與導航：簡化多頁面儀表板的頁面管理。
• 使用 RxJS 進行響應式程式設計：支援強大的非同步資料流。

為什麼選 Bootstrap 5？

Bootstrap 5 是最受歡迎的前端框架之一，提供了一組豐富的預先設計的元件和實用程式。它帶來了幾個優點：

• 響應式設計：按照行動優先原則構建，確保佈局無縫適應所有設備。
• Flexbox 和網格系統：用於建立複雜佈局的強大工具。
• 可自訂主題：輕鬆調整色彩、版式和間距以配合您的品牌。
• 現代功能： 刪除 Bootstrap 5 中的 jQuery 依賴簡化了與 Angular 的整合。

結合 Angular 和 Bootstrap 5 的好處

1. 快速開發：Angular 的 CLI 和 Bootstrap 預先設計的組件加快了開發過程。
2. 一致性： Bootstrap 的設計系統確保整個應用程式的樣式保持一致。
3. 可擴充性： Angular 的模組化方法和 Bootstrap 的可重複使用元件使其易於擴充。
4. 跨瀏覽器相容性： Angular 和 Bootstrap 5 都針對現代瀏覽器進行了最佳化。

---

設定項目

第 1 步：安裝 Angular

首先使用 Angular CLI 建立一個新的 Angular 應用程式。

npm install -g @angular/cli
ng new admin-dashboard
cd admin-dashboard

第 2 步：新增 Bootstrap 5

透過 npm 安裝 Bootstrap 5：

npm install bootstrap

接下來，更新 angular.json 檔案以包含 Bootstrap 的 CSS 和 JavaScript 檔案：

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

第 3 步：驗證安裝

運行應用程式以確認 Bootstrap 已成功整合：

ng serve

您可以透過在 src/app/app.component.html 中新增一個簡單的按鈕來測試 Bootstrap：

<button>




<hr>

<h2>
  
  
  <strong>Building the Admin Dashboard</strong>
</h2>

<h3>
  
  
  <strong>Dashboard Layout</strong>
</h3>

<p>A typical admin dashboard includes:</p>

<ol>
<li><strong>Sidebar Navigation</strong></li>
<li><strong>Top Navbar</strong></li>
<li><strong>Main Content Area</strong></li>
<li><strong>Footer</strong></li>
</ol>

<p>We’ll build each component step by step.</p>


<hr>

<h3>
  
  
  <strong>Step 1: Create the Sidebar Navigation</strong>
</h3>

<p>The sidebar serves as the primary navigation for the dashboard.</p>

<h4>
  
  
  <strong>HTML Template (sidebar.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><nav>



<h4>
  
  
  <strong>Styling (sidebar.component.css):</strong>
</h4>



<pre class="brush:php;toolbar:false">nav {
  width: 250px;
  position: fixed;
}
.nav-link:hover {
  background-color: #495057;
  border-radius: 5px;
}

---

第 2 步：新增頂部導覽列

頂部導覽列提供對使用者個人資料選項、通知或其他快速操作的存取。

HTML 模板 (navbar.component.html):

<nav>




<hr>

<h3>
  
  
  <strong>Step 3: Main Content Area</strong>
</h3>

<p>The content area is where charts, tables, and other dashboard components are displayed.</p>

<h4>
  
  
  <strong>HTML Template (dashboard.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><div>




<hr>

<h3>
  
  
  <strong>Step 4: Footer</strong>
</h3>

<p>Add a footer to display information such as copyright or version details.</p>

<h4>
  
  
  <strong>HTML Template (footer.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><footer>




<hr>

<h2>
  
  
  <strong>Adding Interactive Components</strong>
</h2>

<h3>
  
  
  <strong>1. Charts</strong>
</h3>

<p>Integrate charts using popular libraries like Chart.js or ngx-charts.</p>

<h4>
  
  
  Install Chart.js:
</h4>



<pre class="brush:php;toolbar:false">npm install chart.js

新增範例圖表：

在儀表板組件中，新增：

<canvas>



<p>In the component’s TypeScript file (dashboard.component.ts):<br>
</p>

<pre class="brush:php;toolbar:false">import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  ngOnInit() {
    new Chart("myChart", {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March'],
        datasets: [{
          label: '# of Sales',
          data: [10, 20, 30],
          backgroundColor: ['#007bff', '#28a745', '#ffc107']
        }]
      }
    });
  }
}

---

2.資料表

Bootstrap 5 的表格類別可用於有效地顯示資料。

<hr>

<h2>
  
  
  <strong>結論</strong>
</h2>

<p>透過將 Angular 強大的框架與 Bootstrap 5 的現代設計系統結合，您可以創建功能豐富且響應靈敏的管理儀表板。 Angular 的模組化架構確保了可擴充性，而 Bootstrap 的可重複使用元件則簡化了樣式處理過程。從導航和圖表到資料表和響應式佈局，此設定非常適合為任何應用程式建立專業儀表板。 </p>

<p>開始</p>