Angular

標籤 (共 93 篇文章)

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

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

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

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

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

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

繼續閱讀
[Angular Universal] 使用 Prerender 建立自己的 Static Site Generator

隨著 Angular 不斷的改版,原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大,搭配 Prerender 功能,不用再依靠如 Hexo、Scully 等工具,要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易,今天就來簡單看一下 Angular Universal 現在變得多麼簡單,且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧!

繼續閱讀
[Angular 大師之路] Angular 12 預設開啟 strict mode 的生存之道

Angular 12 預設在建立專案時,現在預設會開啟 strict mode 了,strict mode 會加上一些 TypeScript team 建議的檢查,以及 Angular 額外加入的檢查;這代表在不改變設定的情況下,撰寫 Angular 程式將會需要花費更多的心力去處理各種型別的宣告,以避免在 compile 階段發生錯誤。

雖然感覺起來會越來越難寫,但往好處想,這些 strict mode 的檢查,都是為了減少程式在執行階段可能會發生的錯誤,減少非預期錯誤的可能性,也會減少許多 bug 發生的機會,讓我們寫出品質更好的程式碼,也省去更多 debug 的時間浪費!因此花些時間投資在寫出通過 strict mode 檢查的程式碼我覺得是很值得的,今天就來說幾個 strict mode 下容易發生的錯誤以及生存方法。

繼續閱讀
[Angular Material 完全攻略] 替我們的元件設計 Component Harness

在前一篇文章中我們介紹「如何透過 Angular Material Component Harness」來測試 Angular Material 的相關元件,省去許多自己使用 querySelector 的方式找到元件的麻煩,也可以避免未來元件改版破壞結構的麻煩,今天我們來看看如何替我們自己寫好的元件也設計對應的 Component Harnss,讓未來使用元件的人也能寫出更強健的測試程式碼!

繼續閱讀
[Angular Material 完全攻略] 使用 Component Harness 寫出健全的測試程式

Angular CDK 9 推出了新的 Component Harness 功能,方便我們更容易寫出強健、好閱讀的整合測試或 E2E 測試程式碼,而幾乎所有 Angular Material 元件也都有實作對應的 ComponentHarness,大幅節省開發人員在撰寫測試程式來測試元件所需要花費的力氣!到底 Component Harness 是什麼?又要如何幫助我們寫著更強健的測試呢?今天就來一窺究竟!

繼續閱讀
[Angular 大師之路] 使用 ng 物件幫助我們快速除錯

Angular 9 在今天 (2020/02/07) 正式推出了!在這個版本最重要的是加入了 Ivy,讓我們開發出更快、更輕巧的應用程式,同時也從 Ivy 延伸了許多有趣的新功能,不過在一般開發時其實習慣幾乎不會有太大的改變。不過有個功能,很有可能會改變未來開發的除錯和手動測試使用習慣,就是增強了 ng 物件!

繼續閱讀
[Schematics 實戰] 基本介紹

Schematics 是 Angular CLI 用來產生程式碼骨架的基礎,在接下來的幾篇文章中,我會分享如何使用 Schematics 來幫助專案或團隊產生一些必要的重複程式碼,以及一些個人在使用上的經驗及技巧。

今天就先來簡單介紹一下到底什麼是 Schematics 與基本的觀念吧!

繼續閱讀