Jest是由Facebook開發出來的測試框架,就算Jest跟React是同一個爸爸,要拿來跑Angular的測試卻也沒有問題!今天就來看看如何把Jest套在Angular的專案上吧。
[Angular進階議題]Karma + Jasmine跑測試太慢?試試看Jest吧!
- 2603
- 0
- Angular進階議題
Jest是由Facebook開發出來的測試框架,就算Jest跟React是同一個爸爸,要拿來跑Angular的測試卻也沒有問題!今天就來看看如何把Jest套在Angular的專案上吧。
Angular內建了一個async pipe,讓我們在view中處理非同步資料時更加輕鬆,不論是Promise還是Observable都不需要額外做then或subscribe的動作,只要在view中加入async這個pipe就可以自動把該做的事情都做好,但當當一個非同步的結果會在不同地方顯示時,用async pipe就會發生重複處理的問題,這時就可以搭配RxJs的shareReplay operator來解決這個問題。
Angular本來就是個把測試也考量進去的前端框架,因此提供了不少測試工具,由於現在寫JavaScript勢必會大量使用各種非同步執行的方式撰寫,因此Angular也提供了一些API讓我們在測試非同步執行的程式時更加容易,今天要講的fakeAsync跟tick就是其中一個神奇的工具!
Angular提供了ComponentFactoryResolver,來協助我們在程式中動態的產生不同的Component,而不用死板板的把所有的Component都寫到View裡面,再判斷是否要顯示某個Component,當遇到呈現方式比較複雜的需求時非常好用,寫出來的程式碼也會漂亮很多。今天就來看看如何透過ComponentFactoryResolver來動態產生需要的Component。
在設計Angular程式的時候,我們可以在各種基本的表單上加入[(ngModel)]來達到two way binding的效果,不過如果想要在Component中也能使用[(mgModel)]該怎麼辦呢?今天就來談談如何讓自訂的Component也可以直接使用ngModel達到two way binding!
今天來談談如何在NativeScript專案中,使用Angular CLI建立component、directive和module等程式,節省開發時間。
在過去的文章我們已經學到—Angular2的應用程式是由一個一個的component所堆積組合起來的,這麼做的好處不用多說就是關注點分離,讓你專心在目前的功能上,也不用擔心影響到其他的component,但是當你的程式架構越來越龐大時,管理這些數以百計的components就變成一門學問了,這時候我們就可以透過模組化的機制,更有組織的管理你的所有components,這也就是我們今天要談的主題—Module。
今天我們要介紹Angular2中的attribute directive,透過attribute directive,我們可以自行擴充元件的屬性,讓元件更富有變化性!
上一篇文章我們介紹了Angular2中內建的Pipe,讓我們更容易在View中直接改變資料的顯示方式,今天我們來說明如何設計自己的Pipe。
今天我們要介紹的是Angular2的Pipe,透過Pipe我們可以不用在Component端寫程式改變資料的顯示模式,而是透過外部(也就是Pipe)的模式來調整要顯示的資料內容,如此一來我們就不用在Component中花太多心思去關注內容該如何呈現,再次達到關注點分離的效果。
Angular2是一個純前端的MVC框架,但在開發Web Application時我們有非常多的機會需要透過Ajax與後端的API進行資料的存取,因此Angular2也提供了Http Module,來幫助我們的程式不在只是前端AP而已,而是能與後端聯繫的完整應用。
今天我們要介紹Angular2的Service,透過Service我們可以將資料和商業邏輯統一放到一個(或數個)類別中進行管理,並在多個Components之間共享,讓程式架構更加明確!
最近因為工作需要建立一套部署機制,來改善過去人工部署的麻煩,盡可能讓事情都自動化;稍微survey了幾個工具後,決定使用Ansible作為部署的主要機制。今天就來分享一下如何利用Ansible與rsync將程式部署到Windows Server上面!
在之前的文章中我們學到使用NgFor來方式將陣列資料列舉到畫面上,今天我們更深入來使用NgFor內建定義的五個變數,讓畫面能夠有更豐富的變化。
在上一篇文章中我們學到了如何自訂CSS class,今天我們來學習透過ngClass來為畫面動態的加入或移除class。
隨著大數據越來越熱門,資料視覺化也變得越來越重要,能夠以簡單明瞭的圖像顯示數據的意義,對於決策者進行決策有非常大的幫助,過去要製作這些資料圖表大多必須依靠Excel這類軟體來繪製,但靈活度不高,也難以跟資料庫連接處理,更別說不太好看了。所以今天就來紀紹一個前端資料視覺化的library - Chart.js
昨天我們介紹了PDF.js這套用來讓前端可以直接瀏覽PDF檔的library,今天我們來介紹一款可以在前端直接產生PDF檔的神奇程式-[jsPDF](https://github.com/MrRio/jsPDF)。
如果要說有一個放諸四海皆準的通用文件格式,那麼想當然一定就是PDF了,雖然PDF是一個標準的文件規格,但要瀏覽PDF檔還是需要透過安裝軟體來顯示的,而今天要介紹的PDF.js就是一款可讓我們直接在web上顯示PDF檔的JavaScrtipt library!
jQuery Knob是一款讓我們能夠用旋鈕這種與眾不同的方式輸入數字的jQuery外掛,除了可以確保user輸入的一定是數字以外,也可以簡化user選擇/輸入數字的過程。