Angular

標籤 (共 79 篇文章)

搶先體驗強型別表單(Strict Typed Reactive Forms)

Angular 14 即將推出強型別的 Reactive Forms 表單功能,讓我們在開發過程中可以享受強型別定義帶來的好處,不用再擔心弱型別不小心打錯字等等問題,今天就來看一下如何使用強型別的表單功能!

繼續閱讀
搶先體驗 Standalone Components / Directives / Pipes

Angular 14 預計會推出一個重磅功能 - 「Standalone Components / Directives / Pipes」!這個功能允許我們「獨立」的使用 components、directives 和 pipes,不用再強制依靠 @NgModule

目前 Angular 14 已經推出 RC.0 了,這個版本內也包含了 Standalone 的開發人員預覽版本(developer preview of standalone),讓我們可以搶先體驗一下這種獨立使用元件的版本,這篇文章就來介紹一下為什麼要使用 Standalone 以及該如何使用。

繼續閱讀
[NgRx 速成班] 簡介 NgRx

NgRx 是一個強大,且功能完整的 Angular 狀態管理套件,在我們的應用程式越來越複雜的時候,它很適合用來管理一些全域的狀態,並透過適度的抽象化以及加入一定的規範,降低整體程式的耦合性,打造出更好維護及管理的程式碼。

接下來的一系列文章將會介紹 NgRx 的核心精神,使用方式及相關工具。

繼續閱讀
[Angular 進階議題] 減少 moment.js 造成 bundle 檔案過大的問題

momentjs,可以說是最多人使用的老牌 JavaScript 時間處理類別庫;當然,隨著技術的進步,momentjs 也有不少議題被提出,其中最大的問題就是檔案太過龐大了,且隨著現在前端技術的發展,我們經常使用 webpack 等工具將前端程式進行打包,同時過濾 (tree shaking) 要不要的程式,以減少整體檔案大小。

而 momentjs 由於原始設計的關係,在做 tree shaking 的時候會無法移除掉用不到的 API,同時還有龐大的語系檔,嚴重影響最終 bundle 檔案大小。

抱怨歸抱怨,momentjs 還是非常多人在用,因此只能盡量的做到減少大小,至少不要把龐大的語系檔一起 bundle 進來。

Angular 過去是將 webpack 整個封裝起來的,而隨著版本推移,現在也能自訂 webpack 了,今天就來看一下如何在 Angular 中自訂 webpack,同時移除 momentjs 中過大的語系檔。

繼續閱讀
[開箱文] 圖像 Angular 開發入門:打造高靈活度的網頁應用程式

難得的出現了一本 Angular 的繁體中文書籍,而且是台灣人自己寫的,不是翻譯版,今天就來開箱一下這本「圖像 Angular 開發入門:打造高靈活度的網頁應用程式」!

繼續閱讀
[Webpack] 分析產生後的 bundle 內容

Webpack 是強大的前端打包工具,可以幫助我們快速的將前端 JavaScript 程式及其用到的相關程式都打包成一個或數個 js 檔。同時也可以將不需要的程式透過 tree shaking 機制過濾掉。

不過在前端的世界對於檔案大小是錙銖必較的,因此知道 webpack 到底打包了哪些程式,哪些程式是過濾不掉的,就非常重要了!

好在 Webpack 提供了一個功能,讓我們能快速分析出打包的結果,到底包進哪些程式,程式大小等等清清楚楚,今天就來看看如何分析Webpack 打包後的結果。

繼續閱讀
[Angular 大師之路] 在動態的 HTML 中動態產生元件

在之前的文章中我們曾經提到過「動態建立元件」的方法,透過建立一個 directive,並決定這個 directive 的樣版上要呈現成什麼元件,之後將元件產生在 directive 所屬的樣版上。

這麼做很棒,不過還是有一個缺點,就是一定需要在樣板 HTML 上掛上這個 directive,才能產生動態的元件,雖然大部分情境都足夠了,但當遇到甚至連 HTML 都是完全自定義不是寫死在程式內的,如果需要由後端 API 回傳 HTML 內容,並在回傳的 HTML 特定位置放置元件,就會有困難。

今天就來看看這種動態的 HTML 內如何插入一個元件!

繼續閱讀
使用 HttpContext 傳遞資料給 HttpInterceptor

Angular 中的 HttpInterceptor 可以幫助我們攔截每個 HttpClient 送出的呼叫,幫助我們在呼叫前後打點各種大小事情,不過有時候我們反而希望 HttpInterctptor 不要自作主張幫我們處理太多事情,之前有些過一篇文章介紹如何忽略 HTTP_INTERCEPTORS,而到了 Angular 12 之後,則內建了 HttpContext 的功能,方便在程式中主動傳遞一些資料給我們自己設計的 HttpInterctptor,來達到一些更細緻的操作,這篇文章就來看一下 HttpContext 該如何使用。

繼續閱讀
[Angular Universal] 使用 TransferState 解決畫面閃爍問題

透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果,不過對於伺服器端產生的內容,到了 client 依然會重新進行產生,對於比較複雜的非同步處理如 HTTP 呼叫,就會發生重複呼叫,甚至造成畫面閃爍的問題。

針對這個問題,Angular 提出了 Transfer State (狀態轉移) 的做法,將 server 抓取資料的狀態移轉到 client,讓 client 可以直接使用這些狀態資料,而不是重新產生,以避免畫面閃爍等問題。

今天就來看看 Transfer State 的使用方式吧!

繼續閱讀
透過 CLI Builder API 加強 Angular CLI 功能

Angular CLI 可以幫助我們透過 ng 指令完成許多繁雜的工作,像是啟動開發用的伺服器 (ng serve)、將 Angular 專案建置成純前端網站 (ng build) 、或是進行單元測試 (ng test) 等等,這些指令其實背後都是一段又一段的程式,再搭配 Angular 的 CLI Builder API 整合起來的,而透過 CLI Builder API 也可以幫助我們將一些專案內經常運行的程式也整合到 Angular CLI 內,甚至可以藉此擴充原本內建的 Angular CLI 指令,今天就來看一下如何使用 CLI Builder API 吧!

繼續閱讀