Angular 專案 - Employee Management管理系統

用 Angular 建立 Employee Management 管理系統

本文將教您如何使用 Angular 建立一個 Employee Management 管理系統，並透過 Web API 進行後端連接。

---

參考資源

• 教學影片：Angular Employee Management 系統
• 後端 Web API 文件：Gerasim Project API

---

執行結果如下圖所示：

Dashboard 頁面

大綱

1. 開發環境建立
2. 目標完成的 Component
3. 建立路由
4. 模組實作

---

1. 開發環境建立

1.1. 使用 Visual Studio Code 建立 Angular App 專案範本

首先，請下載並安裝 Visual Studio Code。

1.2. 建立開發環境

• 安裝 Node.js 和 npm：Node.js 官方下載頁面
• 安裝 Angular CLI：

npm install -g @angular/cli

1.3. 查詢 Angular 版本

ng --version

1.4. 建立 Angular App

輸入以下指令來建立新專案：

ng new EmployeeManagement

建立後的專案結構如下圖：

---

2. 目標完成的 Component

在 src 目錄下的 app 資料夾中新增 pages 目錄，並使用 Angular CLI 建立以下 Component：

指令範例：

ng g c pages/login

需要建立的 Components：

• login
• dashboard
• layout
• employee
• project
• projectEmployee

---

3. 建立路由

修改 app.routing.ts，設定路由：

---

4. 實作 Login 頁面

您可以參考 CodePen 上的 Login 頁面範本，選擇自己喜歡的設計，並將 HTML 與 CSS 代碼整合到 Angular 的 login.component.html 和 login.component.css。

運行應用：

ng serve --port 4209

執行結果如下圖所示：

5. 建立 Dashboard 頁面

🔗 GitHub 專案連結：AngularWeb