AngularJS最讓人津津樂道的,也是一開始入門的時候一定會有的範例就是Data Binding。同樣一個(或一些)變數,在指定好了之後,就可以在你的同一個網頁的多處地點做同步!這樣的好處就是,對於一個單頁運作的網頁應用來說,可以在不需要使用任何 jQuery 的情形下,就完成所有需要的動作。

為了簡單展現一下 Data Binding的用處,我做了兩個小小的網頁應用。第一個是用來查詢台南市今年度高中免試入學中屬於就近入學的學區規劃網頁:http://104.es/tns。在這個網頁中,可以使用字串或是下拉式選單,來找尋自己的國中學區可以就近入學的高中職。

另外一個稍微複雜一點點的範例,則是透過Data Binding再加上一些計算的function,讓你可以在試算產品價格(總價)時可以更即時的反應出來。這樣的技巧如果用在購物車的第一步中算是相當地方便。不過,為了簡化起見,在這個範例中並沒有考慮到執行效能的問題。http://104.es/p

(415)

%d 位部落客按了讚: