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

2014年9月6日 星期六

AngularJS:Custom Directive Dualbox、Factory


2014年8月29日 星期五

Javascript:Google Drive 共用檔案連結,直接轉換成下載連結


Google雲端硬碟儲存檔案時可選擇共用讓朋友來下載檔案,但是並無法直接變成下載網址,而是要透過此畫面來下載,對使用者來說若能直接下載是最好的。

一、而原本分享網址為:https://drive.google.com/file/d/0B4GSVRY43FEXVDhrUjFZNnd2a1U/edit?usp=sharing

二、轉換成直接下載網址後:https://drive.google.com/uc?export=download&id=0B4GSVRY43FEXVDhrUjFZNnd2a1U便可直接下載。


C# 泛型實作佇列

當我們在設計類別時,若想要使用不同型態的功能時,具體有兩種做法,一種是針對型態需求設計不同型態的類別,但這樣的缺點是當型態需求一多則必須重覆的撰寫相同程式碼,如此一來較不具效率,故我們可以考慮另一種做法,即為「泛型」,利用泛型機制可以讓該類別傳入不同型態的資料,如此便能有效減少程式碼的重複性以及撰寫的時間。


2014年7月27日 星期日

AngularJS:ng-click、ng-dblclick、add delete item to object、動態新增、修改、刪除


AngularJS:ng-repeat、KeyValueObject、join、customer filter with textfield、multiple ng-app



2014年7月25日 星期五

AngularJS:ng-show、hide


AngularJS:controller、ng-class


2014年7月24日 星期四

AngularJS:ng-model、ng-init


AngularJS簡介

AngularJS是一個由Google打造的Javascript框架,目標是透過MVC(Model View Control)功能使開發和測試變得更加容易,直接將HTML(DOM)當成Template來使用,變成可複用的元件,強調關注點分離概念,將商業邏輯從HTML中分離,清楚的切割網站前、後端,簡化後端的開發,另外尚強調「資料雙向繫節」的概念,在CRUD類型的網站專案也是最實用功能之一。

2014年7月1日 星期二

asp.net send cookie to other html_get by Angularjs

撰寫Asp.net時常常遇到網頁之間參數的傳遞,而常用的傳遞方式有參數傳遞(get、post),session、cookie,當然最直觀的方式是透過參數傳遞,但安全性較低,故可使用session方式傳遞,session的資源則是在伺服端流動相對安全性高,但每個連線就創建一個session相當耗費資源,最後則是cookie部分,cookie則是將資源存於客戶端減少資源耗損,但安全性較低常引發類似Cookie_hijacking的XSS攻擊,但無論使用何種方式都有其優缺點,就端看效能與安全的考量來進行設計。

2014年5月29日 星期四

何謂C# delegate 委派

一、我們撰寫程式的過程中常常遇到一個問題就是當我們在設計某一類別的時候,其中某個函式會達成特殊功能但是寫的時候並不知道此功能如何完成,故暫且只定義它,實際完成功能卻是由使用者來加入,舉例來說我們要設計一個倒數計時器類別,希望倒數N秒後執行某個工作,但不知道工作內容,因此先提供一個輸入介面,但工作細節部分,是你提供方法出來要給使用你這個類別的人,也就是到時候要實做函式內容的人。



2014年2月1日 星期六

javascript實作資料結構-LinkedList

二手書交流平台


                              http://oldbook.somee.com/oldbook/Default.html

java實作隱馬可夫模式(Hidden Markov Model)-猜拳預測

Hidden Markov Model(HMM)是機器學習領域中常用的一種模型,諸如語音辨識、手勢辨識都在此範圍內,而在了解隱馬可夫模型之前可先了解馬可夫鏈模式,所謂馬可夫鏈即是同類型的事件(不同的狀態)依序所發生的機率,一樣可以用來預測猜拳,首先我們將剪刀、石頭、布分別以數值0、1、2表示,然而玩家出過的拳為010101101,假設觀察值為3則我們可以將其分解為010、101、011、110而出現次數分別為010*2、101*3、011*1、110*1,由於觀察值為3故我們可以從序列中倒數前(3-1)個來分析下一拳可能的值,故可能為010、011、012但我們可從統計數中得知010*2、011*1、012從未出現,因此可能的值為010,此便為馬可夫鏈預測方式。

html js亂碼-不同編碼的 JavaScript 檔