2014年10月24日 星期五

Angularjs Pagination

除了前面所述的無限滾動介面模式,在這裡要分享傳統的分頁模式,雖然infinite scrolling能夠滿足大部分使用情境,但有些網站是不需要那麼即時性的,而且在搜尋時,使用者雖然可以透過輸入關鍵字來查詢,但有些使用者仍希望有索引的方式來查找資訊,試想,當我們在使用google search時,假設在第二頁找到符合需求的資料而下次需要這筆資料時,我們通常已經記憶住它在哪一頁了,而若是分頁設計模式則能完全滿足我們的需求。


Angularjs Infinite Scrolling

無限滾動卷軸(infinite scrolling),又稱瀑布流,是現今流行的介面設計模式,許多著名的社群網站如:Facebook、Pinterest都是以這樣的瀏覽方式為主,這種互動方式讓使用者在瀏覽頁面時不用再像以前一樣不斷的點擊上一頁、下一頁,雖然這種介面設計模式看似完美,但仍有許多的知名網站如Google、Flicker採用分頁的介面設計模式,這是因為瀑布流這種模式較適用於非常即時的資料呈現需求狀況下,如使用者第一個想看到的應該是最新發生的消息、關注的動態,之後才慢慢看到尚未看到的動態,因此才會有許多的社群網站採取這種設計模式,而在此也分享infinite scrolling設計的優缺點,以及如何使用Angularjs來實作。


2014年10月17日 星期五

Angularjs ng-transclude、ng-repeat isolate scope

使用ng-transclude的過程中常發生自訂directive在加入scope{inpue: '='}屬性後代表宣告了isolate scope,並需透過binding方式取得上層scope內容,但是若此directive希望讓外部透過transclude方式來使用isolate scope的內容是需要一些方法來達成的。

2014年10月13日 星期一

Angularjs Form Validation

CRUD的網站中常具有登入、註冊的場景,頁面中可能會輸入一些值來做為登入與註冊的依據,但有些欄位可能需要一些智能的限制與提示,可以在前端先完成,而不用將整筆資料傳送到後端後再將驗證結果回傳,一來節省頻寬的浪費,二來可以即時將提示的樣板顯示於頁面,如email格式的檢查、密碼強度的限制等,而Angularjs也提供一些簡單的技巧來達成此功能,只要運用form搭配$valid、$error、$dirty等屬性即可,而於此也搭配ui-router來進行頁面的切換。

2014年10月12日 星期日

Angularjs Cache Some Values

一個網站中可能會根據不同的需求來切換相關的子頁面,但若直接切換頁面在回來時將發現我們輸入到一半的某些值已清空,因此我們可以利用angularjs中的cacheFactory服務搭配routeProvider切換時的事件來儲存值,而頁面載入時則從cacheFactory中取出cache值。