Angular 專案 - Employee Management管理系統
用 Angular 建立 Employee Management 管理系統 本文將教您如何使用 Angular 建立一個 Employee Management 管理系統,並透過 Web API 進行後端連接。 參考資源 教學影片: Angular Employee Management 系統 後端 Web API 文件: Gerasim Project API 執行結果如下圖所示: Dashboard 頁面 大綱 開發環境建立 目標完成的 Component 建立路由 模組實作 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.c...
留言
發佈留言