Angular中的 constructor 與 ngOnInit 在本篇筆記中來紀錄一下 Angular中的 constructor 與 ngOnInit 有何不同的使用情境，也探討一下 ngOnInit() 的非必要性。
ngOnInit 與 constructor ngOnInit() 與 Class 中的其他 Method 無異，僅因為它剛好被命名為 ngOnInit，常會被與 constructor 搞混用途。其實它並非是必要的，完全取決於你。當 Angular 編譯器進行程式編譯時會將是否 Class 中有實現 ngOnInit() 的方法記錄在特定的 Flag 中，這個 Flag 會在 “變更檢測"時決定是不是要呼叫 ngOnInit() 這個方法。
而 constructor 則完全是另外的一件事，不管你有沒有在類別中實現它，在建立類別實例時它都會被呼叫到。
Angular啟動時的二個主要階段：
建構元件樹(component tree) 執行變更檢測(change detection) constructor 是在第一個階段被呼叫的，這就是為什麼我們不能將任何依賴於 DOM、元素、輸入數據、綁定等的初始化邏輯放在constructor— 因為它們尚不可使用。 而 ngOnInit 則在第二階段，實際上所有的生命週期鉤子都是“變更檢測”階段的一部份。
當 Angular 開始變更檢測時，組件樹已被構建，樹中所有組件的構造函數都被調用。它已經完成了組件 DOM 的創建，通過構造函數注入了所有必需的依賴項並處理了輸入綁定。每個組件的模板節點都被添加到 DOM 中。 也可以取得初始化組件可能需要的所有資料，如：DI Provider、DOM 和輸入綁定(input bindings)。
在實際的使用案例上 constructor 最常被使用的是用來“注入依賴項目”(當然不僅限於此)
ngOnInit 是否為必須 在之前使用 angular cli(如：14....
github Source code
Angular、React、Vue 是三個最受歡迎的前端框架，接下來的三篇筆記分別要紀錄使用這三個不同的框架來建立功能一模一樣的網路應用程式。
這個網路應用程式的需求
産品訂購功能 表頭：訂購商品總數、總額及送出訂單功能 商品過濾功能：依産品類別來顯示商品 商品清單：顯示商品明細、商品售價、訂購數量下拉選單及加入購物車等功能 訂單確認功能：顯示訂購商品明細及總金額 訂購成功功能：顯示訂購完成資訊 使用技術:
Angular 14 Bootstrap 5 (UI Framework) Angular Router Services NodeJS & Express json-server npm-run-all (npm 套件) 建立新專案 使用下列的 npm init 語法即可建立最新版 Angular 預設的應用程式結構
$ npm init @angular angularapp -- --routing --style=scss Need to install the following packages: @angular/create@14.1.3 Ok to proceed? (y) CREATE angularapp/README.md (1064 bytes) CREATE angularapp/....
github Source code
需求情境 希望我們的應用程式在每次成功導航後都能自動新瀏覽器的頁面標題。
當使用者按下“功能列的HOME後，程式除了導覽至 Home Page外，瀏覽器的頁面標題顯示的是: “CRUD App - Home”
當使用者按下“功能列的登入按鈕後，程式除了導覽至 登入畫面 外，瀏覽器的頁面標題顯示的是: “CRUD App - Login”
檢視 Angular/CLI $ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 14....
github Source code
本文主要的主題是要呈現如何完成具有 “新增、修改、刪除、查詢“ Todo List 功能的 Angular Application。同時搭配使用者角色/權限控管來呈現不同 UI 功能。
在最後的章節會介紹到如何使用 Angular Directive 來簡化程式避免程式碼重覆。
為完整性考量，還是記錄如何一步步從無到有使用 Angular 14 相關功能來建立一個使用者資料註冊、登入的表單功能（連結到後端 node+MySQL Web API )，在這些表單中按下送出時會自動檢核使用者所輸入的資料是否合乎程式中所設定的檢核邏輯，並顯示合適的訊息反應給使用者。其中將會使用到下列技術:
Angular CLI 14 Bootstrap 5 (UI Framework) Angular Reactive Form Custome Validator Interceptor JWT Session Storage Router Services Guard & Router Data RxJs Custome Directive 註1: 若你已經查閱過 使用 Angular 14 建立 Reactive Form 表單驗證範例 這篇筆記了，那可以直接跳到 “完成 Todo 相關 Component 的功能” 這個章節。...
github Source code
本文記錄如何一步步從無到有使用 Angular 14 Reactive Form 表單驗證 與 Bootstrap 5 建立 一個使用者資料註冊、登入的表單功能連結到後端 API (node+postgresSQL)，在這些表單中按下送出時會自動檢核使用者所輸入的資料是否合乎程式中所設定的檢核邏輯，並顯示合適的訊息反應給使用者。其中將會使用到下列技術:
Angular CLI 14 Bootstrap 5 (UI Framework) Angular Reactive Form Custome Validator Interceptor JWT Session Storage Router Services Guard & Router Data 安裝 Angular/CLI 檢視目前環境為 node v16.14.0， global 安裝的是 Angular CLI 13.3.6
$ node --version v16.14.0 $ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 13....