2015-02-27 02:34 PM 0 9,451
可以用Directive製作自訂網頁元素是當初Angular吸引我的亮點之一(註:Knockout從3.2起也開始支援), 專案裡總不乏為特定規格量身打造的特製UI元素,像是分類、代碼或關鍵字多重查詢的商品輸入欄位,被重複應用在多個網頁輸入介面。用複製貼上是最下策(萬一邏輯要改,準備改到吐吧!)...
2015-02-18 07:33 AM 3 15,323
ngRepeat最大的功能是將陣列項目依模版轉換產生DOM元素,以清單方式呈現資料。而我們都知道,動態DOM元素操作往往是效能瓶頸所在,想像以下情境:以AJAX方式由伺服器端取回100筆資料的陣列,交由ngRepeat轉化為100列<tr>;隨後資料更新,再次由伺服器取回陣列,同樣為...
2015-02-06 06:12 AM 0 7,401
由Knockout跨到Angular半年,對於NG的Dirty Check機制卻始終沒好感,老覺得它髒,為了偷懶不宣告Observable跟少寫一些訂閱連動,卻無法預期程式觸發次數與時機,讓我很沒安全感。如果可以選擇,我寧可乖乖多寫一些Code,100%掌控程式運作,避免陷入程式 一旦複雜就可能失...
2015-01-12 10:05 PM 0 6,591
Angular不需宣告observable就能實現屬性連動,背後靠的是Dirty Check機制的反覆比對,代價是產生許多無謂計算(延伸閱讀:保安,可以讓Angular這樣算了又算算了又算嗎),而好用的Filter特性也在無謂重算之列。當我們寫"{{ propA | convForma...
2014-12-17 10:09 PM 0 5,111
很多Directive會用相同模版對應不同資料產生多個DOM元素,為確保各元素的ViewModel彼此獨立不相互干擾,需要為每筆資料建立一個Isolated Scope。最常見的例子是ng-repeat,例如: <li ng-repeat="item in collectio...
2014-10-17 10:55 PM 1 7,610
孵了八個月,AngularJS 1.3版終於在前幾天破殼而出~ 一直很期待的ngModelOptions updateOn功能隨著1.3版問市,未來繫結到<input>可指定移開焦點才觸發,比每敲一個字母重算一次有效率,另外也可選擇debouncing累積多次變化只重算一次(相當...
2014-10-12 05:50 PM 2 11,981
與KO相比,NG的內建資料驗證功能強大許多。先看示範: 載入網頁時欄位均為白底,輸入資料後會觸發檢核,輸入值有效呈現綠底,不合要求則為紅底。變色關鍵來自以下CSS設定,NG會在使用者輸入資料後新增ng-dirty class,依檢核成功或失敗加上ng-valid或ng-invalid: ...
2014-10-11 11:41 AM 0 7,685
KO是用ko.computed()及subscibe()追蹤ViewModel屬性變動做出反應,在NG中則可透過$scope.$watch()實現,寫法為$watch(觀察對象, 連動函式, 值比對開關)。 觀察對象可以是字串或函式,使用字串時完全比照data-bind="propN...
2014-10-01 08:01 AM 1 11,759
範本(Template)是MVVM的基本功能之一,與KO相比,NG的範本功能多了將範本存在外部HTML檔的彈性。開始前,先回味本次復刻對象: KO範例13 - Template範本功能。 先前介紹過的ng-repeat Directive已內含範本概念,例如: <tr n...
2014-09-25 10:03 PM 1 39,566
Scotte Hanselman 前陣子寫了一篇文章,提到 Visual Studio 開始支援 Gulp、Grunt、Bower 以及 npm!一些寫 ASP.NET 的朋友,看到文章標題,心中的OS八成是「阿鬼,你還是說國語吧!」這些是什麼妖怪,為什麼我通通沒聽過? 雖然之前學 NG 時試...
2014-09-23 10:09 PM 4 15,812
微軟的老牌技術傳教士 John Papa 前些時候寫了一份 Angular 開發風格指南,近來打算在專案正式使用 AngularJS,便花了點時間詳讀,特筆記備忘兼分享。 先聲明一點:「開發風格」並無對錯可言,不同做法各有優劣,開發團隊可自行評估利害,取得共識維持一致即可。故文件所提並不是唯一正...
2014-07-09 11:28 PM 0 34,299
當初評估由KO轉換成NG,與Kendo UI的整合度也是重要考慮依據,KO有社群發展的knockout-kendo可用,Kendo UI則是Kendo UI Labs Team推出Angular Kendo UI,雖然未納入正式官方支援,但可算是經官方認可的程式庫。 關於Angular Ken...
2014-07-08 10:19 PM 0 10,282
練習用NG實現KO範例10 - checked繫結 Live Demo <!DOCTYPE html> <html ng-app="sampleApp"> <head> <meta charset="utf-8"> <title...
2014-07-06 07:58 PM 0 5,770
使用NG復刻KO範例9 - 事件繫結 Live Demo <!DOCTYPE html> <html ng-app="sampleApp"> <head> <meta charset="utf-8"> <title>Lab...
2014-07-05 03:53 PM 0 7,943
前篇介紹過ng-if,動態決定是否產生DOM區塊,NG還有另一項工具 – ngSwitch! <!DOCTYPE html> <html ng-app="sampleApp"> <head> <meta charset="utf-8"> ...
2014-07-04 09:54 PM 0 6,005
這回輪到使用NG演練KO範例8 - if及with的應用 Live Demo <!DOCTYPE html> <html ng-app="sampleApp"> <head> <meta charset="utf-8"> <ti...