The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何在 Docker 容器中建置舊版 Angular 應用程式

今天收到一個 Angular 9 的老舊專案,由於我電腦目前的 Node.js 版本太新,無法正常開發,由於我只是單純的想在本機建置專案,所以決定使用 Docker 容器來準備建置環境。這篇文章我就來分享如何快速在容器中打造一個 Angular 的建置環境。

... 繼續閱讀 ...

如何在 Angular 16 加入 Tailwind CSS 網頁框架

Tailwind CSS 是一個目前正夯的前端 CSS 框架,用於快速開發現代網頁應用程序,在我們公司也在許多專案使用。它提供了一組可重用的 CSS 類別,這些類別可以應用於 HTML 元素,以快速設計和定義網頁的外觀和排版。本篇文章我將分享如何在 Angular 16 專案加入 Tailwind CSS 相關資源。

... 繼續閱讀 ...

如何在 Angular 16 加入 Bootstrap 5 網頁框架

Bootstrap 5 是一個流行的前端開發框架,用於構建具有響應式設計的網站和應用程序。Bootstrap 最初由 Twitter 團隊開發,並於 2011 年首次發布。Bootstrap 5 是 Bootstrap 框架的最新版本,於 2020 年底發布。本篇文章我將分享如何用最有效率的方式在 Angular 16 專案加入 Bootstrap 5 相關資源。

... 繼續閱讀 ...

如何在 Angular 16 加入 environments.ts 環境變數支援

從 Angular 15 開始,預設透過 ng new 建立的專案都不會有之前的 environment.ts 環境變數檔與相關設定,由於看到有人問到這個問題,而且我發現官方文件都沒有相關說明,因此我特別撰文說明如何把這個設定加回去。

... 繼續閱讀 ...

如何透過 Angular CLI 快速將專案全部都轉換成獨立元件架構

從 Angular 14 開始,全新架構獨立元件(Standalone Component)騰空出世,帶給 Angular 開發者一個全新感受,用更簡潔的程式碼、更清晰的架構,幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始,更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉傳統元件獨立元件,甚至於可以連同 AppComponent 也一併轉換成獨立元件,讓整個 Angular 應用程式都變成以獨立元件為主。這篇文章我來說說這套工具的使用方式!

... 繼續閱讀 ...

使用 SPA 單一頁面應用程式設計網頁表單應考量密碼管理器需求

由於我公司有使用玉山商業銀行來處理帳務,我經常需要登入玉山全球智匯網以審核放行一些廠商款項,我一直以來都有使用密碼管理器的習慣,確保我的每個網站所使用的密碼都是不一樣的,強化資訊安全。不過,該網站在我用了數幾年之後,從不久之前開始,該網站完全無法自動登入了,深入研究後才發現,原來他們把網頁上的表單欄位的 id 屬性移除了!這篇文章我來說說我解決此問題的過程,也說說前端工程師應注意的事項!

... 繼續閱讀 ...