Category: AngularJS

NG範例23-使用Directive建立自訂網頁元素

2015-02-27 02:34 PM

9,365

可以用Directive製作自訂網頁元素是當初Angular吸引我的亮點之一（註：Knockout從3.2起也開始支援），專案裡總不乏為特定規格量身打造的特製UI元素，像是分類、代碼或關鍵字多重查詢的商品輸入欄位，被重複應用在多個網頁輸入介面。用複製貼上是最下策（萬一邏輯要改，準備改到吐吧！）...

NG筆記22-避免ngRepeat重新產生DOM元素

2015-02-18 07:33 AM

15,201

ngRepeat最大的功能是將陣列項目依模版轉換產生DOM元素，以清單方式呈現資料。而我們都知道，動態DOM元素操作往往是效能瓶頸所在，想像以下情境：以AJAX方式由伺服器端取回100筆資料的陣列，交由ngRepeat轉化為100列<tr>；隨後資料更新，再次由伺服器取回陣列，同樣為...

偵測JavaScript物件屬性異動時機

2015-02-06 06:12 AM

7,293

由Knockout跨到Angular半年，對於NG的Dirty Check機制卻始終沒好感，老覺得它髒，為了偷懶不宣告Observable跟少寫一些訂閱連動，卻無法預期程式觸發次數與時機，讓我很沒安全感。如果可以選擇，我寧可乖乖多寫一些Code，100%掌控程式運作，避免陷入程式一旦複雜就可能失...

NG筆記21-Angular 1.3對Filter的強化

2015-01-12 10:05 PM

6,513

Angular不需宣告observable就能實現屬性連動，背後靠的是Dirty Check機制的反覆比對，代價是產生許多無謂計算（延伸閱讀：保安，可以讓Angular這樣算了又算算了又算嗎），而好用的Filter特性也在無謂重算之列。當我們寫"{{ propA | convForma...

NG筆記20-Isolated Scope偵察技巧

2014-12-17 10:09 PM

5,043

很多Directive會用相同模版對應不同資料產生多個DOM元素，為確保各元素的ViewModel彼此獨立不相互干擾，需要為每筆資料建立一個Isolated Scope。最常見的例子是ng-repeat，例如： <li ng-repeat="item in collectio...

【茶包射手日記】Angular 1.3升級踩雷記

2014-10-17 10:55 PM

7,572

孵了八個月，AngularJS 1.3版終於在前幾天破殼而出～一直很期待的ngModelOptions updateOn功能隨著1.3版問市，未來繫結到<input>可指定移開焦點才觸發，比每敲一個字母重算一次有效率，另外也可選擇debouncing累積多次變化只重算一次（相當...

NG筆記19-資料檢核

2014-10-12 05:50 PM

11,810

與KO相比，NG的內建資料驗證功能強大許多。先看示範：載入網頁時欄位均為白底，輸入資料後會觸發檢核，輸入值有效呈現綠底，不合要求則為紅底。變色關鍵來自以下CSS設定，NG會在使用者輸入資料後新增ng-dirty class，依檢核成功或失敗加上ng-valid或ng-invalid: ...

NG筆記18-訂閱屬性變更事件$watch()

2014-10-11 11:41 AM

7,532

KO是用ko.computed()及subscibe()追蹤ViewModel屬性變動做出反應，在NG中則可透過$scope.$watch()實現，寫法為$watch(觀察對象, 連動函式, 值比對開關)。觀察對象可以是字串或函式，使用字串時完全比照data-bind="propN...

NG筆記17-範本(Template)

2014-10-01 08:01 AM

11,688

範本(Template)是MVVM的基本功能之一，與KO相比，NG的範本功能多了將範本存在外部HTML檔的彈性。開始前，先回味本次復刻對象: KO範例13 - Template範本功能。先前介紹過的ng-repeat Directive已內含範本概念，例如: <tr n...

Gulp, Grunt, Bower以及npm

2014-09-25 10:03 PM

39,328

Scotte Hanselman 前陣子寫了一篇文章，提到 Visual Studio 開始支援 Gulp、Grunt、Bower 以及 npm！一些寫 ASP.NET 的朋友，看到文章標題，心中的OS八成是「阿鬼，你還是說國語吧！」這些是什麼妖怪，為什麼我通通沒聽過？雖然之前學 NG 時試...

NG筆記16-John Papa Angular Style Guide

2014-09-23 10:09 PM

15,722

微軟的老牌技術傳教士 John Papa 前些時候寫了一份 Angular 開發風格指南，近來打算在專案正式使用 AngularJS，便花了點時間詳讀，特筆記備忘兼分享。先聲明一點：「開發風格」並無對錯可言，不同做法各有優劣，開發團隊可自行評估利害，取得共識維持一致即可。故文件所提並不是唯一正...