Browse by Tags

NG筆記24-KendoAutoComplete自動完成之花式應用

對於Kendo UI AutoComplete的Client端應用，過去的印象還停留在「提供字串陣列作為資料來源」、「指定contains、startswith、endswith進行比對」、「提示項目跟帶入欄位值都來自字串陣列」、「不能限定比對吻合項目上限」，感覺不如 jQuery自動完成 彈性。如以下範例： Live Demo 若要做到更特殊的比對邏輯或想限制提示筆數，倒是可用serverFiltering實現，將輸入關鍵字以AJAX方式交給伺服器端程式比對再傳回提示項目結果。但對SPA及打算包成App的情境...

Posted 22 March 2015 11:30 AM 由 Jeffrey | with no comments 7,864

Filed under: Kendo UI, AngularJS

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

可以用Directive製作自訂網頁元素是當初Angular吸引我的 亮點 之一（註：Knockout從3.2起也 開始支援 ）， 專案裡總不乏為特定規格量身打造的特製UI元素，像是分類、代碼或關鍵字多重查詢的商品輸入欄位，被重複應用在多個網頁輸入介面。用複製貼上是最下策（萬一邏輯要改，準備改到吐吧！），在ASP.NET WebForm裡可用UserControl或WebControl將這類要重覆利用的UI元素包成控制項，用＜my:SuperProductPicker>快速安插到各網頁。在HTML5時代...

Posted 27 February 2015 02:34 PM 由 Jeffrey | with no comments 7,649

Filed under: AngularJS

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

ngRepeat最大的功能是將陣列項目依模版轉換產生DOM元素， 以清單方式呈現資料 。而我們都知道，動態DOM元素操作往往是效能瓶頸所在，想像以下情境：以AJAX方式由伺服器端取回100筆資料的陣列，交由ngRepeat轉化為100列<tr>；隨後資料更新，再次由伺服器取回陣列，同樣為100筆，但其中有5筆順序調換、10筆舊資料被刪除、另外10筆資料是新増的。此時ngRepeat會如何處理？丟棄前次產生的100個<tr>再重來一次？還是能重覆利用已產生的DOM元素提升效率...

Posted 18 February 2015 07:33 AM 由 Jeffrey | 3 comment(s) 14,403

Filed under: AngularJS

偵測JavaScript物件屬性異動時機

由Knockout跨到Angular半年，對於NG的Dirty Check機制卻始終 沒好感 ，老覺得它髒，為了偷懶不宣告Observable跟少寫一些訂閱連動，卻無法預期程式觸發次數與時機，讓我很沒安全感。如果可以選擇，我寧可乖乖多寫一些Code，100%掌控程式運作，避免陷入程式 一旦複雜就可能失控的擔憂。（註：我想Angular RD也認同這點，在2.0將另推Observable。 參考 ：… One approach is to replace the dirty checking that...

Posted 06 February 2015 06:12 AM 由 Jeffrey | with no comments 6,714

Filed under: Javascript, AngularJS

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

Angular不需宣告observable就能實現屬性連動，背後靠的是Dirty Check機制的反覆比對，代價是產生許多無謂計算（延伸閱讀： 保安，可以讓Angular這樣算了又算算了又算嗎 ），而好用的Filter特性也在無謂重算之列。當我們寫"{{ propA | convFormat }}"，當NG要檢查「是否有任何數值發生變化」時，就得將propA傳給convFormat重算結果。Dirty Check重算檢查的頻率或許比大家想像得多，propB、propC或procD屬性改變...

Posted 12 January 2015 10:05 PM 由 Jeffrey | with no comments 6,260

Filed under: AngularJS

NG筆記20-Isolated Scope偵察技巧

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

Posted 17 December 2014 10:09 PM 由 Jeffrey | with no comments 4,622

Filed under: AngularJS

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

孵了八個月，AngularJS 1.3版終於在前幾天 破殼而出 ～ 一直很期待的ngModelOptions updateOn功能 隨著1.3版問市，未來繫結到<input>可指定移開焦點才觸發，比每敲一個字母重算一次有效率，另外也可選擇debouncing累積多次變化只重算一次（相當於KO的 throttle擴充方法 ），這些都是之前在寫KO MVVM慣用的做法，1.3起正式支援。 另外還看到一些亮點： ngMessage 類似我鍾愛的 內嵌式欄位檢核訊息 樣式。demo: https...

Posted 17 October 2014 10:55 PM 由 Jeffrey | with no comments 7,552

Filed under: AngularJS

NG筆記19-資料檢核

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

Posted 12 October 2014 05:50 PM 由 Jeffrey | 2 comment(s) 10,309

Filed under: AngularJS

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

KO是用ko.computed()及subscibe() 追蹤ViewModel屬性變動 做出反應，在NG中則可透過 $scope.$watch() 實現，寫法為$watch(觀察對象, 連動函式, 值比對開關)。 觀察對象可以是字串或函式，使用字串時完全比照data-bind="propName"的寫法，也支援運算，例如："model.firstLame + model.lastName"；若使用函式，輸入參數為$scope物件，再依需求傳回要觀察對象屬性或其組合運算內容...

Posted 11 October 2014 11:41 AM 由 Jeffrey | with no comments 6,745

Filed under: AngularJS

NG筆記17-範本(Template)

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

Posted 01 October 2014 08:01 AM 由 Jeffrey | 1 comment(s) 11,181

Filed under: AngularJS

Gulp, Grunt, Bower以及npm

Scotte Hanselman 前陣子寫了一篇文章，提到 Visual Studio 開始 支援 Gulp、Grunt、Bower 以及 npm ！一些寫 ASP.NET 的朋友，看到文章標題，心中的OS八成是 「阿鬼，你還是說國語吧！」 這些是什麼妖怪，為什麼我通通沒聽過？ 雖然之前學 NG 時試用過一丁點 node.js，但這些名詞對我來跟 克林貢語 沒有兩樣。為了讀懂 Scott 的文章，做了點功課，試著了解這些名詞，以下是筆記。 【node.js】 Node.js 是一個事件驅動I/O伺服端JavaScript環境...

Posted 25 September 2014 10:03 PM 由 Jeffrey | 1 comment(s) 34,782

Filed under: VS2013, AngularJS

NG筆記16-John Papa Angular Style Guide

微軟的老牌技術傳教士 John Papa 前些時候寫了一份 Angular 開發風格指南 ，近來打算在專案正式使用 AngularJS，便花了點時間詳讀，特筆記備忘兼分享。 先聲明一點：「開發風格」並無對錯可言，不同做法各有優劣，開發團隊可自行評估利害，取得共識維持一致即可。故文件所提並不是唯一正確的做法，只能說是蠻多人認同的一種選擇。很棒的一點是 John 花了不少篇幅解說「為什麼選擇這種做法？」，方便大家評估是否採納。筆記未能詳述之處，建議大家可以看 原文 ，收獲會更多。 單一責任原則 （Single...

Posted 23 September 2014 10:09 PM 由 Jeffrey | 4 comment(s) 14,877

Filed under: AngularJS

NG筆記15-整合KendoUI

當初評估由KO轉換成NG，與Kendo UI的整合度也是重要考慮依據，KO有社群發展的knockout-kendo可用，Kendo UI則是 Kendo UI Labs Team 推出 Angular Kendo UI ，雖然未納入正式官方支援，但可算是經官方認可的程式庫。 關於Angular Kendo UI的使用方法，可以參考這篇 Telerik部落格文章 ，另外有一個精美的 展示網站 ，資訊蠻完整的，這裡僅簡單整理重點: angular-kendo.js可由 Github 取得 除了用<script...

Posted 09 July 2014 11:28 PM 由 Jeffrey | with no comments 32,995

Filed under: AngularJS

NG筆記14-Checkbox清單

練習用NG實現 KO範例10 - checked繫結 Live Demo <! DOCTYPE html > < html ng-app ="sampleApp" > < head > < meta charset ="utf-8" > < title > Lab 10 - checked繫結 </ title > < style > body, input { font-size...

Posted 08 July 2014 10:19 PM 由 Jeffrey | with no comments 9,085

Filed under: AngularJS

NG筆記13-事件繫結

使用NG復刻 KO範例9 - 事件繫結 Live Demo <! DOCTYPE html > < html ng-app ="sampleApp" > < head > < meta charset ="utf-8" > < title > Lab 9 - 事件繫結 </ title > < style > .block { width: 50px; height: 50px;...

Posted 06 July 2014 07:58 PM 由 Jeffrey | with no comments 5,585

Filed under: AngularJS

搜尋