[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。

...繼續閱讀 »

[Angular2速成班]透過Module組織管理你的程式

在過去的文章我們已經學到—Angular2的應用程式是由一個一個的component所堆積組合起來的,這麼做的好處不用多說就是關注點分離,讓你專心在目前的功能上,也不用擔心影響到其他的component,但是當你的程式架構越來越龐大時,管理這些數以百計的components就變成一門學問了,這時候我們就可以透過模組化的機制,更有組織的管理你的所有components,這也就是我們今天要談的主題—Module。

...繼續閱讀 »

[Angular2速成班]使用Pipe輕鬆改變view上的顯示內容(1)-Angular2內建Pipe

今天我們要介紹的是Angular2的Pipe,透過Pipe我們可以不用在Component端寫程式改變資料的顯示模式,而是透過外部(也就是Pipe)的模式來調整要顯示的資料內容,如此一來我們就不用在Component中花太多心思去關注內容該如何呈現,再次達到關注點分離的效果。

...繼續閱讀 »

[Angular2速成班]關於CSS的使用

在web應用程式中使用CSS可以說是在基本不過的事情,就算移到的Angular2,CSS當然還是依然會大量的被使用;使用CSS感覺好像沒什麼好聊的,不過Angular2可是個花費了數年且結合了社群的腦力激盪開發最終才release的框架,對於處理CSS自然有更獨到方便管理的做法,今天就來談談在Angular2中使用CSS的一些技巧吧!

...繼續閱讀 »

[Angular2速成班]來寫個TodoApp(3)-學習@Input, @output, ngFor和ngIf

在前一篇文章「認識Angular2的4種data binding機制」我們學到了4種Angular2的data binding機制後,今天我們一口氣要學習@Input, @output, ngFor和ngIf。這4樣東西學會後,基本上就算是把Angular2最常用的功能都學起來了。我們也會在本篇文章中把基本的TodoApp給完成。

...繼續閱讀 »

[Angular2速成班]來寫個TodoApp(2)-認識Angular2的4種data binding機制

接下來我們來了解一下Angular2中4種主要的data binding機制,如果沒有data binding機制的話,我們必須做很多事情才能讓一個JavaScript中的資料顯示在HTML上,反過來要抓取HTML DOM上的資料也是一件不容易的事情,因此許多前端框架都在努力讓事情變得簡單。透過Angular2的data binding機制我可以更容易讓component與view進行互動,接下來就來看看這4種data binding機制如何使用吧。

...繼續閱讀 »

[Angular2速成班]了解Angular CLI產生的專案目錄結構

在上一篇文章「[Angular2速成班]用Angular CLI節省你的開發時間」中我們快速介紹了Angular CLI的使用方式,透過Angular CLI我們可以很容易的建立一個具有一致性的專案架構,今天我們就來簡單介紹一下使用ng new指令產生的專案目錄內容,讓以後在開發Angular2專案時可以很清楚知道檔案的存放位置。

...繼續閱讀 »