Kim's Note

一般情況在使用ng-controller時，會宣告如下 目前有一個需求是MainController要動態從變數載入，來使用不同的Controller， 例如: ng-controller="vm.GetConroller() as vm" ps:以上程式不能執行。

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

前陣子將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上丫....。

將專案的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

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

這陣子在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...

  預設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不會有作用

關於TypeScript在類別內若要使用類別內的方法或全域屬性，我們會透過this來存取，如下圖,在NewModel方法內透過this存取屬性 問題1.在function內的this無法取得全域屬性 如下紅框，此時的this代表的是function本身

    最近有一些使用AngularJs撰寫的js檔案，想說測試都沒什麼問題後，應該可以上正式區，而要上線前當然要作一些最佳化的動作，所以透過 System.Web.Optimization.Bundle將js打包作壓縮，但作完一測試馬上出現注入模組錯誤，如下圖 程式碼-原 此問題是因為最小化後，變數會重新命名，所以在注入時會發生找不到的錯誤

    今天撰寫一個功能是將內容轉成 BlobUrl 的方式讓使用者下載檔案，一開始使用jQuery繫結href是可以正常下載，但使用Angular的繫結後，按了下載會無法作用，檢查html原始檔，發現href內容前方多 unsafe 的前置詞.....。搜尋文章後，才知道這是Angular的安全性檢查，認為是有問題的網址才加上去的。如下圖按了"產生"後的href

     Angular有許多內建的directive來方便我們對html元素的操作，例:ng-option、ng-repeat…等。除了內建的我們也可以自訂directive來封裝一些常用的功能。本篇重點為如何自訂Directive將某個常用的下拉式選單包裝起來，較詳細的說明可以參考最下方的參考來源。 主要功能: 將常用項目封裝成一個獨立的元素my-select 指定預設值my-selected並與directive作雙向繫結 directive對外通知事件 Demo See the Pen directive-4-scope-event by kimxinfo ( @kimxinfo ) on CodePen .

    前陣子去Techday時聽這堂課時" DEV 204 使用 AngularJS 在 ASP.NET 專案上開發企業水準的應用 ” ，講師有提到使用Protractor來作前端的單元測試，但他沒介紹如何使用….=.=，為了一解心中疑惑，Survey相關教學後，將相關使用環境、方式整理如下: 什麼是Protractor   它是AngularJs專門用來作前端測試的工具，透過nodejs上的selectium，執行chrome、fiirefox、IE等瀏覽器，來模擬使用者操作行為並驗證你撰寫好的AngularJs程式是否正確。   執行環境 AngularJs: 測試的網頁一定要內含AngularJs，否則會出現沒有Angular的錯誤 ，修正:可以使用browser.driver來撰寫 Java Runtime:selectium的執行環境 http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html NodeJs:Protractor的執行環境 撰寫測試程式 index.html 此檔案會用來測試回應的title index.spec.js 單元測試 程式，如下為使用browser物件執行index.html並取回title作比對是否為預期值 ps:最外頭的describe為描述測試方法的內容 protractor.conf.js 單元測試程式的 定義檔 ，1.baseUrl:指定測試的Url，2.specs指定要測試哪些檔案，如下圖指定spec目錄下所有副檔名為.spec.js的檔案   套件安裝 執行nodejs command prompt 1.protractor安裝 npm install -g protractor 2.webdriver更新 selectium webdriver-manager update ps:for chrome v54的driver 更新 webdriver-manager update --standalone true --versions.chrome ...

在同一個網頁內若設定多個module，在預設情況下只會執行第一個設定ng-app的內容，第二個ng-app設定則不會執行，如下方的View內容 <div ng-app="app1" class="panel panel-primary"> <div class="panel-heading">Directive-Static Template</div> <div ng-controller="myCtrl" class="panel-body"> Name:{{customer.name}} Address:{{customer.address}} </div> </div> <div id="app2" ng-app="restrictApp" class="panel panel-info"> <div class="panel-heading">Directive-Restrict</div> <div ng-controller="myCtrl" class="panel-body"> Name:{{customer.name}} Address:{{customer.address}} </div> </div> app2的angularJs並 不會被執行

今天在使用ui.bootstrap.modal時遇到一個奇怪的問題，透過ng-modal繫結的資料在View可以呈現即時更新的資料，但在controoler卻無法取回。 程式如下: html 紅框內可正確呈現雙向繫結的資料

這陣子在專案使用AngularJS開發程式，並在Nuget引用了相關套件，例:AngularJs、ng-grid、定義檔等.......，避免日後記憶衰退忘光光，將用到的整理如下: 1.AngularJS 完整的AngularJS檔案下，並包含其他模組，例:Route、Cookie...等