以最簡潔的方式在 ubuntu 22.04 中建立一支 Angular 15 Web App 先講結論：使用 “npm init @angular " 就可以在不先安裝 Angular Cli 的前題下，來建立一支 Web App 範本程式。 一般要新增一支 Angular Web App 都會使用 Angular Cli，而使用 Angular Cli 必須搭配上 Node.js & npm 一般的方式 在 ubuntu 22.04 上安裝 Node.js $ node -v # 先檢視是否有安裝 Node.js，若沒有則需安裝 $ $ sudo apt update $ sudo apt install nodejs $ $ node -v v12.22.9 在 ubuntu 22.04 上安裝 npm $ npm -v # 先檢視是否有安裝 npm，若沒有則需安裝 $ $ sudo apt update $ sudo apt install npm $ $ npm -v 8....
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....
本篇筆記是除了以下常用的 npm 指令外，要介紹幾個好用的其他 npm 指令 npm –version (檢查在本端主機上安裝的 npm 版本) npm init (在現行目錄中初始化專案) npm list (顯示所有已安裝在專案中的所有套件) npm install (在專案中安裝套件) npm uninstall (移除已安裝在專案中的套件) 1.開啟套件的說明文件 - npm docs $ npm docs [package-name] #例如以下指令將會自動開啟 lodash 套件的說明網頁 $ npm docs lodash 2.開啟套件的原始碼儲存庫網頁 - npm repo $ npm repo [package-name] #例如以下指令將會自動開啟 lodash 套件的原始碼儲存庫網頁 $ npm repo lodash 3.查看套件的版本資訊 $ npm v [package-name] versions #以下指令將直接在 終端機 上顯示所有 lodash 套件的版本資訊 $ npm v lodash versions [ '0....
TypeScript 的許多功能是透過 TypeScript 編譯器 (tsc) 來實現的。tsc 有許多選項可以用來調整編譯過程的行為。 設置專案 建立一個目錄 $ mkdir tsc-options $ cd tsc-options 透過 npm 產生 package.json 檔案 $ npm init -y 在 Local 端安裝 TypeScript $ npm install --save-dev typescript@4.8.3 #or -D TypeScript 選項值設定 透過 tsc 建立 TypeScript 的設定檔 (tsconfig.json) $ npx tsc --init P.S. 由於 typescript 是安裝在 local，執行時要透過 npx 指令(由 npm 所提供) TypeScript 選項值影響 先在專案目錄下建立 src 子目錄，並在此目錄下撰寫程式 $ mkdir src $ touch src/index.ts 程式如下: function add(a, b) { return a + b; } add(25, null); 上述的程式可否通過 tsc 型態檢核呢？ 答案很難回答，因為取決於“tsc 選項”的設定。...
github Source code Angular、React、Vue 是三個最受歡迎的前端框架，這是三篇筆記分別使用這三個不同的框架來建立功能一模一樣的網路應用程式中的第三篇 - 使用 Vue 來建立網路應用程式。 這個網路應用程式的需求 産品訂購功能 表頭：訂購商品總數、總額及送出訂單功能 商品過濾功能：依産品類別來顯示商品 商品清單：顯示商品明細、商品售價、訂購數量下拉選單及加入購物車等功能 訂單確認功能：顯示訂購商品明細及總金額 訂購成功功能：顯示訂購完成資訊 使用技術: Vue 3 Bootstrap 5 (UI Framework) Vue Router 4 Vuex 4 axios 0.27 NodeJS 18.5 & Express 4.18 json-server 0.17.0 npm-run-all 4.1.5 (npm 套件) @vue/cli 建立新專案 使用下列的 npx 語法即可建立最新版 Vue 預設的應用程式結構 $ npx @vue/cli create vueapp Vue CLI v5.0.8 ? Please pick a preset: Manually select features ?...