Browse by Tags

Angular 1.x 技術支援何時終止？

近一年多來工作主軸移回後端，我在前端方面進展有限，偶爾遇到要寫 Web UI 的場合，還是要靠過去整理好的 Angular 1.x + KendoUI 共用程式庫，歷經時間與實務需求磨練過，功能完整度及穩定性良好，加上使用經驗豐富，三兩下就能拼出所需介面。雖然先前已 評估好 未來要轉向 Vue.js，但老鳥做專案必有私房工具箱，要補到功能齊備，磨到方便順手豈是一朝一夕的事，因此我有心理準備，現階段遇到時程吃緊不容閃失的專案，這套 Angular 1.x 工具組還是衝鋒陷陣最可靠的良伴。 只是，Angular...

Posted 21 March 2018 11:44 PM 由 Jeffrey | with no comments 5,025

Filed under: AngularJS

閒聊：不想走在「最前端」， WebForm 開發者也該學的技能

就用這篇鬼故事當開場吧！ 在 2016 年学 JavaScript 是一种什么样的体验？ 這幾年 HTML5 火紅，前端開發技術發展如黃河氾濫一發不可收拾，開發框架百家齊嗚，眼花瞭亂不知如何下手就算了，更要命的是市場主流每兩年就轉一次風向，兩年前我才含淚從 Knockout 轉到 Angular ，現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去，連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...

Posted 08 November 2016 09:39 PM 由 Jeffrey | 12 comment(s) 39,970

Filed under: ASP.NET MVC, HTML5, Kendo UI, knockoutjs, AngularJS

潛盾機－網頁版COPY指令產生器

工作環境有不少Web Farm主機，部署程式時需要將一或多個檔案同步複製到多台主機上，依上線流程需產生指令檔交給OP人員執行。這種需求用COPY、XCOPY或ROBOCOPY指令寫成批次檔是最直覺有效的做法，但以「將四個檔案複製到八台主機」為例，需寫成32條指令，沒營養又躲不掉的枯躁苦工，交給機器人才是王道。 輸入IP清單轉成一串指令的小工具，印象裡我寫過WinForm版也寫過WebForm版，最近有類似需求，卻不幸遇到記憶斷層，怎麼也想不起程式放哪… Orz 心一橫，索性拿它當成練功題材，花了點時間寫成純前端網頁版...

Posted 17 September 2016 12:11 PM 由 Jeffrey | 2 comment(s) 8,472

Filed under: 潛盾機, AngularJS

使用Visual Studio Code開發Angular 2專案

Angular 2於9/13推出RC7，許多人還在懷疑該不會一直到RC18吧？說時遲那時快，Angular 2 Team忽然在兩天後中秋節這天，閃電宣佈Angular 2.0進入正式版！ 身為開發老兵，近年已鮮少加入Beta、Tech Preview版先鋒部隊拓荒，習慣等正式版再認真以待，一則避免發展早期規格一變再變白走冤枉路，二則愈晚開始，規格、工具愈成熟，參考資源也愈多。雖依黑暗技術守則第15條：「早學搶先機，晚學撿便宜」，但NG2已成為工作專案的正式選項，只能乖乖面對新挑戰，看開發教學配月餅文旦...

Posted 16 September 2016 10:22 AM 由 Jeffrey | 7 comment(s) 34,267

Filed under: AngularJS, VS Code

NG筆記29-下拉選單連動

跟同事討論到下拉選單連動（最常見的經典應用是縣市、行政區下拉選單連動，選取縣市後自動換成該縣市的行政區清單），這才發現針對這門必修課，我只寫過 KO版範例 ，沒寫過NG版，趕緊補上。 我寫了一個三層式下拉選單連動範例，在ViewModel中安排Level1、Level2、Level3三個屬性保存下拉選單選取結果，另外用L1Options、L2Options、L3Options分別存放Level1-3的下拉選單選項。透過$scope.$watch()，在Level1變動時更新第二層選項，在Level1或Level2變動時更新第三層選項...

Posted 02 August 2016 07:59 AM 由 Jeffrey | 13 comment(s) 32,956

Filed under: AngularJS

NG筆記28-Checkbox清單進化版

很久以前就寫過Angular版的 Checkbox清單 ，不過當時的版本有點簡陋，只能以字串陣列作為來源。我心目中的理想Checkbox清單元件，應該要像ng-options能用物件陣列當作資料來源，最好還可以切換單選模式（我知道改用Radio就能單選，但規格書不時出現註明要單選的Checkbox清單），沒找到前人寫好的現成作品，那就自己刻一個吧！ （「花更多時間去找元件」 vs 「把時間省下來自己寫一個」 常讓人左右為難，尤其當技難度不高，有時找輪子耗費的心力比造輪子還多！） 範例: $scope...

Posted 01 August 2016 07:35 AM 由 Jeffrey | with no comments 7,149

Filed under: AngularJS

筆記：Angular 2介紹 by Brad Green

影片 Brad Green (Google Angular開發團隊的主管) 在微軟MVP年會講了一場Angular 2（微軟的人到蘋果發表會站台，Google主管跑到微軟MVP年會做簡報，世界真奇妙 ：P），完整影片前陣子放到Channel 9，雖然沒去美國參加MVP年會，基於已開始靠Angular吃飯又是來自「原廠」的第一手資訊，就認真當好學生把影片看完，當然筆記也是一定要的：（這場屬概觀式介紹，很多東西沒深入細講，先了解關鍵字就好） NG1在全世界已經有110萬名開發者。 https://www...

Posted 30 November 2015 06:49 AM 由 Jeffrey | 2 comment(s) 17,612

Filed under: AngularJS

Angular顯示大量物件效能測試

前幾天調查 KendoGrid＋Angular效能變差三倍 的，推測問題根源不在KendoGrid，而在於Angular建立2000個具有獨立$scope的DOM元素，本身就是重度耗用資源工作。換句話說，就算不用KendoGrid，改以ng-repeat實作產生2000個頁面元素，對效能一樣是嚴峻考驗。光憑想像永遠不知真相，實地測上一回自然會有方向！ <! DOCTYPE html > < html > < head > < meta charset ="utf...

Posted 07 November 2015 04:41 PM 由 Jeffrey | with no comments 9,394

Filed under: AngularJS

KendoGrid+Angular顯示大量資料的效能問題

接獲使用者反應，某個使用KendoGrid顯示大量資料的網頁，用IE檢視的話速度慢到嚇人。聞此言，馬上打開IE11測試，果真嚇得我差點閃了兩滴… 也太慢了吧！ 先交代問題情境，專案使用Angular搭配Kendo UI開發，順理成章使用Kendo UI提供的Angular Directive，寫成<div kendo-grid …>，資料筆數偏多，大約一千多到兩千筆，基於KendoGri的強大彈性及高複雜度，處理起來多耗點時間倒也合理，但這個案例在IE的表現與期望出入頗大，值得調查。...

Posted 04 November 2015 10:48 PM 由 Jeffrey | 8 comment(s) 10,203

Filed under: Kendo UI, AngularJS

KendoGrid＋Angular模版＋欄位凍結 造成列高異常

Kendo UI 支援 Angular ，手上 Angular 寫的專案幾乎都用 Kendo UI 網頁控制項刻介面。在 KendoGrid 的欄位設定中，欄位模版也可以嵌入 Angular 語法，挺好用的，如以下的例子： 將第一欄的template設定為字串"{{dataItem.CostCenter}}({{dataItem.CostCenterName}})"，KendoGrid將執行Angular繫結，在欄位顯示"分公司代碼(分公司名稱)"。第二欄的template則使用另一種做法...

Posted 03 October 2015 07:29 AM 由 Jeffrey | with no comments 6,474

Filed under: Kendo UI, AngularJS

使用TypeScript撰寫Protractor測試

裝好Protractor ，就可以動手寫測試了。Protractor預設使用Jasmine，之前寫Angular單元測試時 玩過 ，語法並不陌生，但是用慣神兵利器，遇上超過一百行的JavaScript，少了Visual Studio + TypeScript拎杯根本活不下去，啊啊啊啊～（顯示為鎚子被沒收的雷神索爾在地上打滾） 因此，首要任務得找出使用TypeScript撰寫Protractor測試的方法。我選擇用VS2013開啟一個空白Web Apllication專案，不啟用MVC、Web API也不啟用WebForm...

Posted 23 May 2015 08:35 AM 由 Jeffrey | with no comments 7,879

Filed under: TypeScript, AngularJS, 自動測試

Protractor Windows安裝補充

打算用 Protractor 做網頁End-to-End測試。Protractor是Angular的主流測試工具，End-to-End測試時會開啟瀏覽器連上網站模擬各種操作，以使用者角度實際驗證功能是否正常。 第一步要在開發機器Windows 8安裝node.js跟Protractor，主要參考Paul Li圖文並茂的介紹文－ Protractor - 環境設定篇 ，安裝大致順利，但過程遇到一些小亂流，特筆記之。 第一個問題來自公司的特殊網路環境，基於資安監管要求，網管設備攔截HTTPS傳輸從中抽換SSL憑證...

Posted 22 May 2015 07:56 AM 由 Jeffrey | with no comments 7,278

Filed under: AngularJS, 自動測試

NG筆記27-呼叫Directive內部函式

開始寫Directive之後，常面臨一個難題：Directive提供函式執行特定作業，當我們在DOM中引用Directive，如 先前介紹 透過Isolated Scope宣告{ callback: "&" }，就可輕鬆由Directive呼叫外部Scope的Callback函式；但反過來，外部Scope要怎麼觸發Isolated Scope內部的函式呢？ 歷經一些研究、嘗試，我找到幾種做法，整理分享如下。 先說明範例情境，我寫了一個無聊的Directive serverTime...

Posted 08 April 2015 07:18 AM 由 Jeffrey | with no comments 7,418

Filed under: AngularJS

NG筆記26-再談Angular物件化寫法與JavaScript壓縮注意事項

專案再遇到Angular JavaScript原本執行正常啟用壓縮（Minification）後冒出找不到nPrivder、bProvider等錯誤訊息，這是Angular Dependency Injection機制因壓縮變數更名崩壞的典型案例，但訊息詭異（nProvider、bProvider是啥鬼？）常讓新手迷惑，特寫篇筆記補充。 用一個簡單的ViewModel及Service範例來說明。 開始前，先花一點時間說明Class化（物件化）的概念。雖然在許多Angular教學中，寫個function就能做出Controller...

Posted 07 April 2015 08:10 AM 由 Jeffrey | with no comments 9,711

Filed under: AngularJS

NG筆記25-如何將Directive Isolated Scope宣告為TypeScript強型別？

NG範例23-使用Directive建立自訂網頁元素 介紹過好用的自訂元素。除了資料互動不高的單純DOM操作Directive，一般我們都會另建獨立Scope（Isolated Scope）避免彼此干擾。而Isolated Scope宣告時需指定{ propA: "=", propB: "@" }形式的scope物件，供NG參照建立參數對應，因此不像Controller、Service可以寫成獨立類別，而這衍生的副作用則是－scope參數在link函式裡被視為任意型別...

Posted 25 March 2015 11:34 PM 由 Jeffrey | 2 comment(s) 6,396

Filed under: TypeScript, AngularJS

搜尋