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 AMJeffrey | with no comments 6,809
Filed under: ,
NG範例23-使用Directive建立自訂網頁元素
可以用Directive製作自訂網頁元素是當初Angular吸引我的 亮點 之一(註:Knockout從3.2起也 開始支援 ), 專案裡總不乏為特定規格量身打造的特製UI元素,像是分類、代碼或關鍵字多重查詢的商品輸入欄位,被重複應用在多個網頁輸入介面。用複製貼上是最下策(萬一邏輯要改,準備改到吐吧!),在ASP.NET WebForm裡可用UserControl或WebControl將這類要重覆利用的UI元素包成控制項,用<my:SuperProductPicker>快速安插到各網頁。在HTML5時代...
Posted 27 February 2015 02:34 PMJeffrey | with no comments 7,173
Filed under:
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 AMJeffrey | 3 comment(s) 13,440
Filed under:
偵測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 AMJeffrey | with no comments 6,033
Filed under: ,
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 PMJeffrey | with no comments 5,695
Filed under:
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 PMJeffrey | with no comments 4,167
Filed under:
【茶包射手日記】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 PMJeffrey | with no comments 6,901
Filed under:
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 PMJeffrey | 2 comment(s) 9,367
Filed under:
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 AMJeffrey | with no comments 6,149
Filed under:
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 AMJeffrey | 1 comment(s) 10,324
Filed under:
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 PMJeffrey | 1 comment(s) 33,107
Filed under: ,
NG筆記16-John Papa Angular Style Guide
微軟的老牌技術傳教士 John Papa 前些時候寫了一份 Angular 開發風格指南 ,近來打算在專案正式使用 AngularJS,便花了點時間詳讀,特筆記備忘兼分享。 先聲明一點:「開發風格」並無對錯可言,不同做法各有優劣,開發團隊可自行評估利害,取得共識維持一致即可。故文件所提並不是唯一正確的做法,只能說是蠻多人認同的一種選擇。很棒的一點是 John 花了不少篇幅解說「為什麼選擇這種做法?」,方便大家評估是否採納。筆記未能詳述之處,建議大家可以看 原文 ,收獲會更多。 單一責任原則 (Single...
Posted 23 September 2014 10:09 PMJeffrey | 4 comment(s) 13,940
Filed under:
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 PMJeffrey | with no comments 32,405
Filed under:
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 PMJeffrey | with no comments 8,361
Filed under:
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 PMJeffrey | with no comments 5,169
Filed under:
更多文章 « 上一頁 - 下一頁 »

搜尋

Go

<July 2018>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication