使用 Angular Material 建立一個簡易的 Admin Template II

github Source code 註: 若只要取得本篇筆記所介紹的內容可使用以下指令: “git clone --branch v2.0 https://github.com/calvinegs/Angular_Material_Admin_Template.git” 在本篇筆記中將繼續使用 Angular Material 中的其他 components 來加強 Admin Template。在此文中除了會使用 SnackBar component 來實做一個 Notifier ,同時也把之前介紹過的 Loading Spnner 功能也一併加入。 除此之外也會建置一個 Login Page,身份驗證是一個應用程式中不可缺少的功能,有了這個登入畫面,將會被應用到另一篇 angular Interceptor - JWT 的應用中(待續)。 有關 Admin Template 第一個版本的介紹請見 Loding Spinner 加強 Admin Template 功能 預計實現的功能: 使用 Angular Material SnackBar 為 Admin Template 加入 Notifier 功能。 使用以下步驟: 取得 Admin Template 第一個版本程式碼 實現基本版本 Notifier 實現客制化 Notifier 功能 使用 material 實現一個 Login Page 取得 Admin Template 第一個版本程式碼 首先要為 Admin Template 第一個版本加入 Notifier 功能,可以使用 `git clone`指令取得特定版程式碼。以下指令是取得 Tag為 ver-1....

February 23, 2023 · 13 min · Theme PaperMod

使用 Angular Material 建立一個簡易的 Admin Template

github Source code 使用 Angular Material 建立一個簡易的 Admin Template Angular 是一個標準的 SPA App framework,今天要記錄的是使用 angular material 來建立一個 SPA App 的範本,除了介紹 Material 相關的功能外,完成的這個簡易型 admin template 剛好可以用來引申後續 angular 筆記範例中的㮒準介面(UI). 想要得到的結果: 檢視環境 在開發環境中必須有 NodeJs $ node -v v18.12.1 angular cli 則只需安裝在 Local 目錄中即可 ng version $ ng version Command 'ng' not found, but can be installed with: sudo apt install ng-common 建立 Angular 專案 透過 npm init @angular 語法即可在不必安裝 angular cli 前題下來建立一個 angular project。...

February 12, 2023 · 10 min · Theme PaperMod