[Angular Material 完全攻略]環境設定 & 安裝 & Hello World

今天我們將開始正式邁入Angular Material的世界,要學習使用Angular Material打造高品質及高質感的網頁,當然要從安裝Angular Material套件開始,本篇文章就來介紹基本的Angular Material安裝步驟,並簡單加入一個元件來體驗一下有質感是怎樣的一個感覺!

繼續閱讀
[Angular Material 完全攻略]開始 & 簡介

從Angular第2版正式release後,根據全球最大工程師討論區StackOverflow的統計,從2016開始的Angular討論度就不斷竄升,甚至超越了React,直到了2017年,甚至擺脫了前一代Angularjs的陰影,躍升成為最熱門的前端議題!可以見得Angular這個前端框架確實具有它值得學習的地方,而在2017年底Angular正式邁向第5版,隔天Angular Material就從breaking changes不斷的beta版正式升到趨於穩定的rc版,沒幾個禮拜就直接正式release了!

一個是由Google推出的前端框架,一個是由Google推出的設計語言的Angular實作,兩者結合想必能加乘產生N倍以上的爆發力!接下來的日子,我們將一步一步地學會所有Angular Material的元件及特性、Angular CDK及一些進階的技巧,今天第一天就讓我們以比較輕鬆的節奏來認識所有的基礎知識吧!

繼續閱讀
[Angular 進階議題]使用HttpInterceptort為HttpClient Request打點前後大小事

在實際進行專案的時候,Angular內建的HttpClient其實常常是不符合需求的,因為我們可能會需要為每次的HttpRequest都加上一樣的Header,或針對HttpResponse要有一致性的處理,如果同樣的動作在每次Request都進行的話,只會產生一堆同樣的程式碼,既不美觀也容易出錯,好在Angular提供了HttpInterceptor來幫助我們在Reqquest前主動幫我們處理好各種事情!

繼續閱讀
[Angular 進階議題] 在客製化表單控制項增加驗證(valid)結果

在之前的文章「讓自訂的Component可以使用ngModel的方法」我們提到可以替Component加入NG_VALUE_ACCESSOR及實作ControlValueAccessor,來讓我們的Component成為客製化的表單控制項,並能夠使用[(ngModel)]達到two way binding的效果;既然成為了表單控制項,當然就該能享有驗證(Validation)的好處,以及在表單變化時得到一些額外的class支援,讓我們在設計上能夠有彈性!今天就要來如何讓別人在使用我們的表單控制項時能夠及時得知表單的內部驗證狀態(NG_VALIDATORS和NG_ASYNC_VALIDATORS)。

繼續閱讀
[C#]簡介ExpandoObject

ExpandoObject 是 .Net Framework 4 之後出現的一個類別,可以幫助我們為物件動態的加入或移除屬性成員,今天就來聊聊 ExpandoObject 的特性及用法。

繼續閱讀
[OneTimePassword] 一次性密碼演算法:簡介HOTP、TOTP和Google Authenticator

One Time Password(OTP、一次性密碼)主要用於實現雙因素認證(two-factor authentication)的功能,在使用者一般透過帳號密碼登入後,再透過輸入一組只能使用一次的密碼,完成相對比較安全的登入機制;或是在需要執行特定某些功能時,再次要求使用者輸入一次性的密碼,保護使用者資料不會被他人直接使用,這樣的情境在很多網路銀行線上交易都可以看到。今天就來簡單介紹兩個常見的OTP演算法-HOTP和TOTP

繼續閱讀
[Angular 進階議題]Karma + Jasmine跑測試太慢?試試看Jest吧!

Jest是由Facebook開發出來的測試框架,就算Jest跟React是同一個爸爸,要拿來跑Angular的測試卻也沒有問題!今天就來看看如何把Jest套在Angular的專案上吧。

繼續閱讀
[Angular 進階議題]使用shareReplay operator避免ajax時async pipe重複發request的問題

Angular內建了一個async pipe,讓我們在view中處理非同步資料時更加輕鬆,不論是Promise還是Observable都不需要額外做then或subscribe的動作,只要在view中加入async這個pipe就可以自動把該做的事情都做好,但當當一個非同步的結果會在不同地方顯示時,用async pipe就會發生重複處理的問題,這時就可以搭配RxJs的shareReplay operator來解決這個問題。

繼續閱讀
[Angular 進階議題]fakeAsync/tick-在Angular中測試非同步程式的時光魔術師!

Angular本來就是個把測試也考量進去的前端框架,因此提供了不少測試工具,由於現在寫JavaScript勢必會大量使用各種非同步執行的方式撰寫,因此Angular也提供了一些API讓我們在測試非同步執行的程式時更加容易,今天要講的fakeAsync跟tick就是其中一個神奇的工具!

繼續閱讀
[Angular 進階議題]使用ComponentFactoryResolver動態產生Component

Angular提供了ComponentFactoryResolver,來協助我們在程式中動態的產生不同的Component,而不用死板板的把所有的Component都寫到View裡面,再判斷是否要顯示某個Component,當遇到呈現方式比較複雜的需求時非常好用,寫出來的程式碼也會漂亮很多。今天就來看看如何透過ComponentFactoryResolver來動態產生需要的Component。

繼續閱讀