Clik here to view.
【茶包射手日記】ASP.NET MVC CSS壓縮失效
用Chrome瀏覽啟用JavaScript/CSS打包壓縮的ASP.NET網站，發現以下錯誤:Chrome抱怨找不到sytle.css.map檔! (style.css由SCSS編譯產生，.map檔是所謂的Source Map，用來查詢.css特定段落所對應的.scss原始碼，Debug不可或缺。當今主要的CSS與JavaScript編譯語言都提供.map方便偵錯，例如:...
View ArticleClik here to view.
NG筆記2-網頁MVVM基本架構
MVVM是前端Framework的重要功能，AngularJS當然也有強大好用的資料繫結及模板(Template)機制，才能橫掃江湖。我們就從最簡單的"計算型屬性"開始，順便介紹Angular程式的基本架構。 (註:...
View ArticleClik here to view.
NG筆記3-使用TypeScript
用Angular維護的SPA專案重頭戲都在前端，為避免JavaScript愈寫愈亂，失控長成哥吉拉的災難上演，決心在專案改用TypeScript，期望靠著強型別編譯檢查保平安。這裡就以上一篇文章的簡單NG程式為例，示範如何用Visual Studio 2013 Update 2 + TypeScript開發出相同的程式。步驟1:...
View ArticleClik here to view.
NG筆記4-單元測試
自動測試是AngularJS架構的重要一環，官方文件有專章討論單元測試，程式庫則有ngMock提供單元測試所時的DI及Mocking(假物件模擬)支援。本篇將討論如何在Visual Studio 2013對Controller及ViewModel進行單元測試。開始之前，Visual Studio要先安裝Chutzpah(發音類似"鬍子爸"...
View ArticleClik here to view.
類別庫專案TypeScript不會自動編譯
進行Angular單元測試時，在Class Library(類別庫)新增TypeScript測試檔，使用Chutzpah測試正常，但我發現Class Library專案裡的TypeScript，不像在ASP.NET Web專案裡會自動產生.js檔，Chutzpah似乎是靠自己的機制編譯TypeScript(所以才會有名為_Chutzpah.53.sampleapp.js的暫存檔)。計劃在Class...
View ArticleClik here to view.
Let It Go吧! System.Data.OracleClient
記得四年前微軟就正式宣告建議大家不要再用System.Data.OracleClient，改用ODP.NET。當時Oracle對LINQ支援還不太好，想用LINQ或EF得尋求3rd Party解決方案，從ODAC 11.2起，Entity Framework已是ODP.NET標準配備，System.Data.OracleClient的存在就更只剩下向前相容。今天幫忙射掉茶包一枚:...
View ArticleClik here to view.
NG筆記5-下拉選單
復刻對象: KO範例2 - 下拉選單。 在NG，下拉選單(<select>)跟<input>一樣用ng-model="..."建立雙向繫結，如要透過繫結動態產生選項，可用ng-options Directive。ng-options的語法較特別，需穿插as for in等關鍵字，寫法又有好幾種，保哥有篇詳解可參考。若以物件陣列為資料來源，有兩種做法:1) 繫結到物件本身:...
View ArticleClik here to view.
NG筆記6-動態新增下拉選單選項
復刻對象: KO範例3 - 動態新增下拉選單選項。先示範一個失敗寫法。在KO範例裡，新增選項按鈕不包含在ViewModel範圍內，而是透過jQuery...
View ArticleClik here to view.
NG筆記7-以清單方式呈現資料
MVVM基本功，KO範例4 - 以清單方式呈現資料。<!DOCTYPEhtml><htmlng-app="sampleApp"> <head><metacharset="utf-8"><title>Lab 4 - 物件陣列繫結清單顯示</title><style> table { width: 400px }...
View ArticleClik here to view.
NG筆記8-初試自訂Directive
實做對象: KO範例6 - 陣列元素的新增/移除事件。Live Demo<!DOCTYPEhtml><htmlng-app="sampleApp"> <head><metacharset="utf-8"><title>KO範例6 - 陣列元素的新增/移除事件</title><style> table { width:...
View ArticleClik here to view.
【茶包射手日記】OracleDataReader數字型別對應陷阱(ODP.NET)
接獲報案，由Oracle資料庫讀取NUMBER(14,6)欄位，原值為1.997748，JSON轉換送至Client端變成1.9977479999999999!判斷這是典型浮點數問題(順便複習:...
View ArticleClik here to view.
TypeScript的函式多載(Overloading)
考慮以下JavaScript函式(myText):/// <reference path="../Scripts/jquery-2.1.1.js" /> function myText(selector, valueOrFunction) {//未指定第二個參數時，傳回jQuery .text()if (valueOrFunction === undefined) {return...
View ArticleClik here to view.
Clik here to view.
VS2012網站專案的TypeScript不會自動編譯
接獲報案，在Visual Studio 2012若建立HTML Application with TypeScript專案(如下圖)，.ts可順利產生.js及.js.map，運作正常。但是若建立的是一般ASP.NET網站專案(Visual C#/Web下的項目)，可以新增及編輯.ts，編譯時卻不會產生.js。想起上回處理TypeScript in Class...
View ArticleClik here to view.
NG筆記9-visible, disable, css與屬性連動
題目: 使用NG復刻KO範例7 - visible, disable, css繫結Live Demo<!DOCTYPEhtml><htmlng-app="sampleApp"><head><metacharset="utf-8"><title>Lab 7 - visible, disable,...
View ArticleClik here to view.
NG筆記10 - 保安，可以讓Angular這樣算了又算嗎?
網友kcw問了一個好問題，提到計算型屬性函數出現會重覆執行兩次的現象!一句話點醒我夢中人，嚇得我屁滾尿流失了魂~~~ 花了點時間研究，才發現原來我學藝不精，一直沒搞通Angular的屬性相依運作原理，時常誤用KO概念思考。謝謝kcw的問題，讓我釐清一塊暗藏地雷的危險地帶。(註:...
View ArticleClik here to view.
為jQuery Plugin撰寫TypeScript定義檔
TypeScript是強型別的世界，透過預先宣告物件、屬性、方法、介面，在編輯階段提供Intellisense提示、Go Definition、Find All References、Rename... 等編譯式語言才有的功能，而編譯時可預先抓出參數、型別、方法錯誤，降低執行階段發現修復的高昂成本。開始使用TypeScript一段時間後，一定會發現一項困擾:...
View ArticleClik here to view.
NG筆記11-依條件決定是否加入DOM
這回輪到使用NG演練KO範例8 - if及with的應用Live Demo<!DOCTYPEhtml><htmlng-app="sampleApp"><head><metacharset="utf-8"><title>Lab 8 - ng-if應用</title><style> span { margin: 5px;...
View ArticleClik here to view.
NG筆記12-ngSwitch與Scope繼承
前篇介紹過ng-if，動態決定是否產生DOM區塊，NG還有另一項工具 – ngSwitch!<!DOCTYPEhtml><htmlng-app="sampleApp"><head><metacharset="utf-8"><title>ng-switch範例</title><style> .sw > div {...
View ArticleClik here to view.
NG筆記13-事件繫結
使用NG復刻KO範例9 - 事件繫結Live Demo<!DOCTYPEhtml><htmlng-app="sampleApp"><head><metacharset="utf-8"><title>Lab 9 - 事件繫結</title><style> .block { width: 50px; height:...
View Article