Angular Material 完全攻略

分類 (共 37 篇文章)

[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 Material 完全攻略] Angular Material 6之快速安裝篇

Angular Material 6 在今天 (2018/05/04) 正式登場,從 Angular 本身、Angular CLI 到 Angular Material,全部都一次推出第 6 版!這個版本除了對齊版號以外,也投下了非常多驚人的震撼彈,許多都是跟程式架構與產生(schematics)有關!原本的安裝或升級都能夠藉此架構大幅節省心力,今天就讓我們看看,從 Angular 6 與 Angular Material 6 之後,要使用 Angular Material 到底變得有多簡單吧!

繼續閱讀
[Angular Material 完全攻略]學習Angular Material的正確姿勢

今天來聊聊筆者這些日子學習Angular Material的方式,希望可以幫助大家能以更快的速度深入Angular Material,並能靈活運用在自己的專案當中。

在筆者的經驗中,Angular Material要學得好,除了需要一定程度的Angular知識以外,另外還有Angular Material三寶:文件、demo app和source code

繼續閱讀
[Angular Material 完全攻略]雜項技巧(2) - 其他CSS技巧

今天來分享一些筆者近期撰寫Angular Material文章,以及開始在實際專案中使用Angular Material所整理出來的一些CSS小技巧,有些在文件上可以輕鬆找到,有些則是遇到後才整理出來的,希望能對各位讀者大大們在使用Angular Material時有所幫助!

繼續閱讀
[Angular Material 完全攻略]雜項技巧(1) - 自己的theme自己設計

Angular Material內建了4種不同主題的theme,未來應該還會持續增加,但這些theme未必是我們喜歡的,而在Angular Material中,要設計自己的theme非常簡單,我們就來看看該如何做吧!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(7) - Coercion、Platform

今天我們來講兩個Angular CDK文件上沒有介紹,但很有機會使用到的隱藏版功能,分別是型別轉換(coercion)、平台偵測(platform)。

繼續閱讀
[Angular Material 完全攻略]Angular CDK(6) - Overlay

今天我們要來介紹Angular CDK中的Overlay!Overlay在Angular Material中可以說是隨處可見,只要是任何會從螢幕上彈出資訊的功能,如Select、Dialog等等都免不了要使用Overlay;因此也能說Overlay是Angular Material中讓畫面更具有立體感的大功臣,到底這個功能能幫助我們達到多少目標呢?就讓我們繼續看下去吧!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(5) - Portal

接下來我們要介紹Angular CDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件麻煩的事情!

其實在Angular中,我們已經能夠使用<ng-container>搭配ngTemplateOutletngComponentOutlet來切換不同的template或component了,而Angular CDK的Portal可以想像成是它的簡單好用加強版!甚至我們可以透過Portals裡面的功能,把元件放在整個Angular程式的控制範圍之外,但元件依然還在Angular的控制內,非常的強大!

就讓我們繼續往下看吧!!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(4) - Observables、Scrolling

今天我們要介紹兩個比較簡單的Angular CDK功能分類,分別是Observables和Scroll。這兩個功能使用上非常簡單,但乍看之下使用的機會不高,因此我們也會來稍微偷看一下Angular Material的原始碼,看看有什麼樣讓人意想不到的使用情境!

繼續閱讀