Kim's Note

   目前AngularJs的程式，若要呈現表列資訊時，最常使用的是ng-repeat來render table。而在某些需求下，要在每一列的下方再呈現子項目的列表 如下圖: 預設<tr>使用ng-repeat時，一定要有</tr>的結尾元素，所以不能在<tr ng-repeat>..內再插入一個<tr ng-repeat>，會無法取得父層的資訊，而大部份使用的解法是，在<tr>的外層使用<tbody>即可以達到此需求。

在偵錯時期，VisualStudio內建針對string、xml、DataSet提供了視覺化偵錯，例:文字視覺化檢視、XML視覺化檢視..等 目前在偵錯時，最常用的是要查看List<T>內，每個item的屬性，由於沒有視覺化偵錯，所以須一個一個打開來檢視，這樣的偵錯，多點幾個就要翻桌了...。

昨天去台北參加2015 Microsoft DevOps Day，看講師demo一個在chrome回報bug給TFS的套件，使用起來很方便，可以直接錄製步驟、擷圖、圈重點，並直接將內容放入bug內。今天上班後，馬上安裝來試試。 安裝 Exploratory Testing 連結: https://chrome.google.com/webstore/detail/exploratory-testing-previ/gnldpbnocfnlkkicnaplmkaphfdnlplb

文章開始前先列一下，目前方案下的專案及組態 n個Library專案及2個Web專案。 組態區份為: Debug、 Release、QAS、STA、PRD。前兩個是Vs預設，後面3個是根據發佈的環境命名 遇到的問題      前一篇文章介紹的發行，使用的是MsBuild來建置方案檔 .sln 。透過發行Profile檔，先建置後再作發行。 這樣的方式，在建置方案後，預設會找出方案下所有的Web專案來發行。依照上述方案架構與組態，會遇幾個問題如下: 第一個Web專案發行後，第2個Web專案會找不到發行Profile檔。ps:我只想發行一個Web專案，第二個專案沒有發行Profile。 若建置改成使用特定的專案，例如:只建置A Web。這在建置時，會遇到非預設組態(QAS、STA、PRD)，找不到的錯誤，因為其他相依的Library專案，並沒有這些設定，在VS加入時，預設建置設定只加入當時選擇的專案及方案，如下圖 WebApp有QAS，但底下的Library沒有。

    前一篇將環境搞定後，開始來作建置與部署的工作。 新增建置工作 加入一個建置工作 設定工作組態-指定原始檔管理 User Name /Password 需使用前VSO 的Secondary User Name 設定工作組態-加入建置   加入執行Windows批次指令，執行nuget.exe還原 ps:nuget.exe 已先下載至安裝目錄。 %JENKINS_HOME% : 安裝目錄C:\Program Files (x86)\Jenkins "%WORKSPACE%   : 工作位置 例:C:\Program Files (x86)\Jenkins\ workspace\My-VSO-Daily-Build ps 完整命令 cd %JENKINS_HOME% nuget.exe restore "%WORKSPACE%\BuildLab.sln" 加入Build a Visual Studio project or solution using MSBuild 使用MsBuild建置成功後，透過發行檔Profile，發行到主機上 完整命令: /t:Rebuild /property:PublishProfile=WebDeploy;DeployOnBuild=true;username=xxx;password=xxxx;AllowUntrustedCertificate=true 測試建置 設定完後，選單左方可以執行[馬上建置]，並在Console看到即時的輸出結果 參考來源 http://ithelp.ithome.com.tw/question/10109773 http://www.codeproject.com/Articles/878203/Integrate-Jenkins-with-MSBuild-and-NuGet http://www.dotblogs.com.tw/supershowwei/category/11733.aspx?Show=All

    前兩天去MOPCON 2015上課，談到CI Server，大部份都使用Jenkins。這兩天玩了一下，順便將目前的專案導入，將放在VSO的原始檔，作自動化建置及部署。關於Jenkins 網路有很多 文章 ，這裡不作多介紹，本篇只針對目前用到的功能、設定及問題排除作記錄。 建置環境 Window Server 2012 R2 Visual Studio 2015 : 建置、編譯、部署，此部份雖可以個別安裝，但實測後，遇到不少問題，所以乾脆將開發工具裝上。 版本控制 : Visual Studio Online Jenkins : https://jenkins-ci.org/ 下載Window版本，裝完後，預設會執行port 8080首頁 管理外掛程式   加入MSBuild Plugin 加入Team Foundation Server Plug-in

測試機上的工作排程，會定期去執行一支PowerShell的命令檔，目前有一需求，要從排程上，將參數傳給PowerShell去使用。相關作法如下 在power shell 先宣告一個變數，本例將變數先顯示出來 param($url="") $url 測試Power Shell傳入參數，進入命令提示字元，切換到Power Shell目錄 C:\Windows\System32\WindowsPowerShell\v1.0 透過-command將參數指給url : powershell.exe –command “d:\par.ps1 –url kim” 測試結果輸出:kim 將參數加到排程上 參考來源 https://dmitrysotnikov.wordpress.com/2011/02/03/how-to-schedule-a-powershell-script/

   在Window主機上裝了Jenkins，預設port 8080，而DNS指定的port與防火牆只有開放80，若想讓Jenkins在外部也可以連的話，IIS有相關套件可以將domain name rewrite到指定的url 例:jenkins.kimx.info 轉往 localhost:8080 必要安裝 URL Rewrite Application Request Routing 這2個套件可以透過Web Plaform Installer安裝

專案若將匯出XML的功能打開 Public 方法若沒有註解，會出現警告。 雖然不會影響功能，但看到程式碼有個綠色毛毛虫在那兒，總覺得心裡怪怪的...

  新增Web專案時，若範本選的是Web API,預設會幫我們建立一個HelpPage的Area 進入首頁後，點上方API連結

   今早打開Visual Studio 2015時，出現了載入某個元件的錯誤提示。本想說不去理它，應該下次再重開就好了，但之打開MVC View編輯時，出現了如下錯誤。雖然建置沒問題，但所有的Intellsense提示完全失效....。 ActiveLog.xml 解決方法 清空ComponentModelCache目錄內的檔案 C:\Users\ [username] \AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache 參考來源 https://hanskindberg.wordpress.com/2014/02/27/visual-studio-clear-cache/

      目前的專案有一需求是在資料匯入時，將服務層級提高來加快匯入的速度，待完畢後再降回來，避免資源(金錢)的浪費。趁此K了一下最近剛入手的 Azure教戰手札 ，並撰寫一支Power Shell Script來玩玩。 前置工作   第一次使用PowerShell ，需設定ExecutionPolicy: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned ps:此動作要使用Administrator執行 先確定是否已安裝Azure Power Shell ps:安裝後，需要 重新開機 ，否則會出現找不指令錯誤

   這幾天在Survery Visual Studio Online CI相關技術，看到一篇文章介紹VSO全新的建置系統 。試玩一下，將VSO的專案發佈成Pacakge並發行到Azure，感覺還不錯用，將目前使用的功能記錄起來。 VSO專案先建立Azure Service 切換到Services Tab 加入Service 輸入Azure的訂閱資訊，若找不到，也可以從上圖紅框的”publishsettings xml file”下載取得。

在發行網站後，每個View被第一次執行時，會進行第一次編譯的動作，並將編譯後的相關檔案複製到”Temporary ASP.NET Files”內(一堆.compiled的檔案)。此為預設的發行選項，好處是隨時可以修改View，不用透過VisualStudio再發行一次，壞處是每次修改及發行後的第一個執行會很慢。上述所說的好處，我想在正式環境上，幾乎也沒什麼機會去作這件事，所以可以不用考慮。 使用預先編譯 發行時使用預先編譯選項，將所有的View都預先編譯好，在第一次執行時，速度會明顯快很多。另一好處是順便會幫你檢查View是否有錯誤，例如:ViewModel已移除的屬性，但View在設計時期，無法知道。 如下圖的發行設定，並將"Allow precomplied site to be update” 移除勾選。

前陣子將AngularJs從1.3.18升上1.4.4後，遇到若ng-repeat的資料數目超過約500個時，在第一次繋結很快，但在取得資料再重新繫結時，會有很明顯的效能問題，整個畫面會卡住約5秒。如下sample。 See the Pen ng-animate-slowly-1 by kimxinfo ( @kimxinfo ) on CodePen . 降回1.3.18測試後，並不會有此問題........。暗...升上來，豈有再降回的道理，立馬使用chrome profile來錄製，看是慢在哪一段。經測試後，發現慢的js是angular-animate.js 。 之前看過1.4.4 的 release note ，想說不是針對ng-animate作了很多bug修正及改善。怎麼會引起效能問題..........重點是，我沒有使用它在ng-repeat上丫....。

  個人最常用的翻譯工具之一"Google Translate"，在chrome安裝相關套件後，可以在網頁選取文字後，按右鍵，前往Google Translate 作翻譯，如下圖。 而我另一常用的翻譯工具"奇摩字典"，在商店想找類似的功能，但找不到相關的套件，索性自己寫一個來玩玩。 使用方式

同事分享一篇文章，關於資料庫發生DeadLock時，如何通知管理者。不過內容很簡略，摸了一陣子才搞起來。 Step by Step 1.啟用目標資料庫(本例使用AdventureWorks2014)與msdb的Service Broker。 執行語法前需先將SQL Server Agent 停用 ，等執行後再打開 2.建立DeadlockEvents資料表、排程及通知 此部份引用msdn範例

  今天同事提到Spotify，有個很酷的登入功能，在桌面應用程式登入後，再到網頁作登入的動作，會自動登入。登出，再登入，也都不用輸入帳號密碼。但若桌面程式關閉後，Web要登入就要輸入帳密。   雖不知它實作的機制是如何，但停不住好奇心的我們，花了些時間朝著Web與Window互動的方法去尋找類似的作法。找了幾篇後，在CodeProject剛好有篇文章，介紹到使用 HttpListener 讓Desktop與Browser溝通 ，在瞭解相關作法後，實作了一個類似的Spotify的登入機制。   如下示意圖，使用者電腦的Desktop應用程式，使用HttpListener在本機Host一個port為60999。瀏覽器透過對localhost:60999Request，會取到目前的登入者作登入。

將專案的AngularJS UI Bootstrap 從0.13.0 升上到0.13.3後，在使用typeahead的時候，瀏覽器的console會出現警告訊息 如下圖，提示bindHtmlUnsave已不推薦使用。 此問題是我的typeahead有使用自訂的template，而template的內容使用到bind-html-unsafe作html的繫結 此行程式我是參考ui-bootstrap 在Github的原始碼，來作比對的highlight用。本想說它既然警告了此用法，那它應該也有修改成正確的寫法才對。但....答案是沒有.. 解決方法 1.將bind-htmjl-unsave 改成 ng-bind-html。 改完後，引用模組"ngSanitize"。 2.加入angular-sanitize.js 3.引用ngSanitize 參考來源 https://docs.angularjs.org/api/ngSanitize

最近剛裝完Window 10，想將Windows Defender停用，來增進筆電的效能。最簡單的動作，就是直接將介面打開，將即時防護關掉。但關掉後三不五時會提醒你安全性警告，且重開機後又會自動打開。本想到服務去停用它，但停用功能是鎖住的….WTF。 針對此，找到國外有一篇文章介紹到，如何停用"即時防護"，相關步驟如下

   目前公司有一個網站執行在Azure上，並將經常讀取的共用資料快取在記憶內。初期網站的負戴量還沒那麼大時，在快取資料上不會有什麼問題，但之後若成長到一定的程度時，網站勢必要作擴展，此時會造成快取的資料在多個Instance是不同步的。針對此找了幾個解決方案 Azure Redis Cache:最多人使用，也是官方推薦使用，效能快，可以輕易作到多網站之間的快取共享。關於Redis更多 請參考 ps這適合較大的WebFarm使用，若你的擴展不會很多台的話，可以考慮使用第3個方法。 Database Cache 在Nuget有一套件 Ovicus.Caching 實作了ObjectCache(.Net4.0新的快取類別 請參考 )，將資料快取在資料庫內。這樣也可以達到多個網站的共享快取，但在效能會比軙慢了點，尤其在大量的快取存取下更明顯。 透過ChangeMonitor監控快取 :此方案有別於上述兩個，不作共享快取，只作單機快取。透過監控的機制，在資料變更時，通知所有網站清除本身的In-Memory快取，再作資料的重新取得。

  一開始在撰寫測試腳本並不會去考慮reuse這件事，但隨著測試腳本開始變多、變複雜時，就會看到要測同一支程式，但相同的語法散落在不同的腳本。例:a-spec.js與b-spec.js有一大段是輸入表單值的部份。幸好根據此問題，在網路有蠻多篇介紹使用Page Object Pattern的撰寫方式來解決。本文會介紹如何在Visual Studio 2013 如何實作此Pattern。 開發工具設定 Visual Studio的TypeScript Module System需要設定為CommonJs，此為NodeJs載入模組設定

  這兩天寫完了Protractor測試後，在本機執行沒問題後，將執行語法作成一個.bat檔後，放到測試主機Window Server 2012的排程工作執行。但一直無法出現測試畫面 (但手動執行.bat ok)，本還以為是Window 2012後不支援.bat的排程執行=.=，後來查到是要設為"登入時才執行"。

這陣子在Survery前端e2e測試的一些撰寫方式及輔助套件，將一些實用的記錄下來，以便日後查詢。 開發及測試環境 使用NodeJS作測試 Visual Studio 2013+TypeScript撰寫測試Script   Visual Studio 套件 新增一個Web 空專案 安裝protractor的TypeScript套件 angular-protractor: browser、element、by.model、by.binding 等語法支援 jasmine : BDD測試Script，例: descript( """) it(“’….”) NodeJS套件 執行NodeJs Commad，並切換到專案目錄，執行npm init 初始化package.json，過程會要你輸入相關資訊，按照預設值可以一路按enter，此檔案會建立專案資訊及記錄相依套件 。 npm init 安裝測試套件protractor npm install -g protractor 更新webdriver webdriver-manager update 安裝jasmine-reporters，此套件可以幫助你將測試結果輸出到目錄 npm install jasmine-reporters --save-dev 建立Protractor 組態設定 protractor 參考 ， jasmine-reporters 參考 撰寫測試程式 1.直接引用官方範例，在spec目錄下新增caculator-spec.ts的TypeScript檔案 2.執行測試 protractor protractor-conf.js 執行後會啟用chrome瀏覽到測試網頁，並輸入1跟2後送出，再驗證結果是否相符 3.測試結果 輸出到目錄的xml檔案 範例下載: Github 相關參考 http://ramonvictor.github.io/protractor/slides/#/ https://angular.github.io/protractor/#/tutorial https://github.com/lar

目前使用EntityFramwork 是透過EF Designer幫我們從資料庫產生预存程序的Mode 問題      若已產生的預存程式Model，若有增加欄位，想要自動將Model更新的話，在目前的作法都會將Model手動刪除在加入一次，會這樣作是因為在EF Designer 的功能[從資料庫更新] 都無法成功，如下圖，有更新視窗，但按更新後，Model還是舊的。雖然手動的方式刪除的方式不會太麻煩，但每次刪除，再加入時在版本控管的簽出簽入會有無法繫結的時候。

很久一段時間沒有開發報表了，再度接觸Report 2008有種很生疏的感覺，一時之間要找想要的功能，還找不到.............。記錄一下，避免再度迷路。 1.報表資料視窗

  預設Angular會在使用者瀏覽網頁時，在Route的導頁機制下，會將第一次取到的html下來暫存在Client端，這樣使用者在第二次在瀏覽相同的網址時，就不會向後端的Serve再r取一次html。除非使用者自行重整，或從Route最原始Url進入 例:Index #/ 將#/移除，從Index進入，則快取就會清空。 問題   目前程式中有一功能，會根據挑選的條件而Render不同的html到Client，而該功能作完後要立即導到另一網頁呈現內容。此時該網頁會因前一次的瀏覽而無法向Server取最新的html。根據此問題若Render html的方式是在Client作，是不會有此問題，但基於某些必要的原因，所以需在Server Render Html。

    目前的專案在列表資料的呈現都使用一個共用的MVC Grid，可以搭配後端的IQueryable完成分頁、過濾等功能，根據上述，在前端html的呈現是jquery.Ajax叫用Server端，來Render html到前端。但在Ajax重新Render Html到前端時，Angular的事件會失效 原因  第一次載入時Angular會依據目前html作繫結，但透過jQuery的Ajax載入另一份html時，則此份html並未繫結angular的事件，如下的Ajax 載回來的部份html，此時若點button,ng-click不會有作用