記載著 Will 在網路世界的學習心得與技術分享 https://blog.miniasp.com/ http://www.rssboard.org/rss-specification BlogEngine.NET 3.3.7.0 zh-TW https://blog.miniasp.com/opml.axd https://blog.miniasp.com/syndication.axd Will Huang The Will Will Web 24.567110 120.970500 <p>為了讓 TypeScript 能與目前市面上各種 JavaScript 模組/函式庫一起運作，模組定義檔 ( Declaration Files ) ( *.d.ts ) 是 TypeScript 不可或缺的一部分，從最早期的 <a href="https://github.com/DefinitelyTyped/tsd" rel="nofollow">TSD</a> (TypeScript Definition manager for DefinitelyTyped) 工具，到去年十月才推出的 <a href="https://github.com/typings/typings" target="_blank" rel="nofollow">typings</a> (The TypeScript Definition Manager) 工具，今年六月 TypeScript 開發團隊決定從 TypeScript 2.0 改用 <a href="https://www.npmjs.com/" target="_blank" rel="nofollow">npm</a> 來管理所有的模組定義檔，有在使用 TypeScript 的開發人員得要注意囉！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2016/08/22/TypeScript-Future-Declaration-Files#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2016/08/22/TypeScript-Future-Declaration-Files [email protected] https://blog.miniasp.com/post/2016/08/22/TypeScript-Future-Declaration-Files#comment https://blog.miniasp.com/post.aspx?id=20904884-f6fa-40dd-b19c-402f802d0eab 週一, 22 八月 2016 15:27:00 +0000 AngularJS JavaScript typescript tsd typings types will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=20904884-f6fa-40dd-b19c-402f802d0eab https://blog.miniasp.com/trackback.axd?id=20904884-f6fa-40dd-b19c-402f802d0eab https://blog.miniasp.com/post/2016/08/22/TypeScript-Future-Declaration-Files#comment https://blog.miniasp.com/syndication.axd?post=20904884-f6fa-40dd-b19c-402f802d0eab <p>最近這兩周由於 <a href="https://angular.io/" target="_blank" rel="nofollow">Angular 2</a> 已經來到了 <strong>RC5</strong> 版本，且 <a href="https://cli.angular.io/" target="_blank" rel="nofollow">Angular CLI</a> 也來到了 <span style="font-family: Consolas;"><strong>1.0.0-beta.11-webpack.2</strong></span> 版本，正式改用 <a href="https://webpack.github.io/" target="_blank" rel="nofollow">webpack</a> 作為 Angular 2 今後的模組管理工具，專案的整體編譯速度比以前用 <a href="https://github.com/systemjs/systemjs" target="_blank" rel="nofollow">SystemJS</a> 快了好幾倍，我們用的非常開心。但唯獨有一點不太理想，就是當 Angular CLI 升級後所建立的專案，在 Visual Studio Code 裡面一直會出現討厭的警告訊息 ( 紅色下曲線 )，在經過幾天的消化與研究之後，終於發現原來是 Visual Studio Code 與 TypeScript 的問題，欲知詳情，請繼續看下去！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2016/08/19/Change-TypeScript-Versions-in-Visual-Studio-Code#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2016/08/19/Change-TypeScript-Versions-in-Visual-Studio-Code [email protected] https://blog.miniasp.com/post/2016/08/19/Change-TypeScript-Versions-in-Visual-Studio-Code#comment https://blog.miniasp.com/post.aspx?id=df3cda06-bb76-45b6-953b-c34157e94e96 週五, 19 八月 2016 14:21:00 +0000 AngularJS JavaScript Visual Studio Visual Studio Code typescript will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=df3cda06-bb76-45b6-953b-c34157e94e96 https://blog.miniasp.com/trackback.axd?id=df3cda06-bb76-45b6-953b-c34157e94e96 https://blog.miniasp.com/post/2016/08/19/Change-TypeScript-Versions-in-Visual-Studio-Code#comment https://blog.miniasp.com/syndication.axd?post=df3cda06-bb76-45b6-953b-c34157e94e96 <p>目前 Angular 2 已經進展到 RC4 版本，在過不久的將來就要推出正式版本，許多人磨刀霍霍，既期待又怕受傷害。期待的是，希望 Angular 2 能夠真正解決我們開發 Web 應用程式的各種難題，不單單只是網站而已，還必須考量到 SPA 架構、開發效率、執行效率、行動裝置、原生 App 應用、伺服器渲染、多國語支援、開發工具、&hellip; 等多種面向，想也知道這不是個容易的任務。害怕的是，不知道這個坑到底有多深，用下去之後會不會很難上手、系統越做越大會不會越來越難維護、多人開發的時候會不會很難套用開發規範、會不會很難偵錯、容不容易跟後端整合、&hellip; 等等。 而我希望在這篇文章中，能夠解開大家心中的疑惑。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2 [email protected] https://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2#comment https://blog.miniasp.com/post.aspx?id=35231909-9762-435c-bca5-21dd0ee2d482 週二, 26 七月 2016 16:16:00 +0000 AngularJS angularjs angular 2 will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=35231909-9762-435c-bca5-21dd0ee2d482 https://blog.miniasp.com/trackback.axd?id=35231909-9762-435c-bca5-21dd0ee2d482 https://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2#comment https://blog.miniasp.com/syndication.axd?post=35231909-9762-435c-bca5-21dd0ee2d482 <p>由於 <a href="https://angular.io/" target="_blank" rel="nofollow">Angular 2</a> 官方建議採用 <a href="http://www.typescriptlang.org/" target="_blank" rel="nofollow">TypeScript</a> 做為主要的開發語言，一般來說 TypeScript 都會建議使用 npm 進行安裝，安裝後就可以在命令提示字元下使用 <span style="font-family: Consolas;"><strong>tsc</strong></span> 命令對 <span style="font-family: Consolas;"><strong>*.ts</strong></span> 進行編譯動作。不過這幾年 TypeScript 的變化很快，轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事，不過對於有安裝過 Visual Studio 的使用者來說，這條路可能會變得異常崎嶇，如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話，這篇文章你可能要繼續看下去。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2016/07/05/TypeScript-tsc-path-problem-on-Windows#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2016/07/05/TypeScript-tsc-path-problem-on-Windows [email protected] https://blog.miniasp.com/post/2016/07/05/TypeScript-tsc-path-problem-on-Windows#comment https://blog.miniasp.com/post.aspx?id=58538fd6-5a7c-4805-be7e-514a787f3c8a 週二, 5 七月 2016 14:53:00 +0000 AngularJS Web 前端工程研究 typescript tsc npm node.js will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=58538fd6-5a7c-4805-be7e-514a787f3c8a https://blog.miniasp.com/trackback.axd?id=58538fd6-5a7c-4805-be7e-514a787f3c8a https://blog.miniasp.com/post/2016/07/05/TypeScript-tsc-path-problem-on-Windows#comment https://blog.miniasp.com/syndication.axd?post=58538fd6-5a7c-4805-be7e-514a787f3c8a <p><a href="https://code.visualstudio.com/" rel="nofollow" target="_blank">Visual Studio Code</a> 的出現帶給許多人震撼，但是嚴格說起來，Visual Studio Code 並不能算是一個 IDE (整合開發環境)，更精確地來說，他就是一個編輯器 (Editor)，只是多了一些 IDE 的功能而已。今天我打算來分享如何有效率的使用 Visual Studio Code 來開發 AngularJS 應用程式，有些小技巧可以學習一下。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2015/06/07/Using-Visual-Studio-Code-with-AngularJS#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2015/06/07/Using-Visual-Studio-Code-with-AngularJS [email protected] https://blog.miniasp.com/post/2015/06/07/Using-Visual-Studio-Code-with-AngularJS#comment https://blog.miniasp.com/post.aspx?id=16372f6e-2a89-4b3e-85c5-b05a841ddce2 週日, 7 六月 2015 19:01:41 +0000 AngularJS Visual Studio Visual Studio Code angularjs will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=16372f6e-2a89-4b3e-85c5-b05a841ddce2 https://blog.miniasp.com/trackback.axd?id=16372f6e-2a89-4b3e-85c5-b05a841ddce2 https://blog.miniasp.com/post/2015/06/07/Using-Visual-Studio-Code-with-AngularJS#comment https://blog.miniasp.com/syndication.axd?post=16372f6e-2a89-4b3e-85c5-b05a841ddce2 <p>初學 AngularJS 的人，寫到 <a href="http://docs.angularjs.org/api/ng.directive:ngController" rel="nofollow" target="_blank">ngController</a> 之後一定會覺得 AngularJS 的 controller 怎麼這麼簡單，只要宣告一個 function 就馬上可以用了，而且 function 裡面的參數還會經由 AngularJS 自動注入物件。例如 <a href="http://docs.angularjs.org/api/ng.$rootScope.Scope" rel="nofollow" target="_blank">$scope</a>、<a href="http://docs.angularjs.org/api/ng.$http" rel="nofollow" target="_blank">$http</a>、<a href="http://docs.angularjs.org/api/ng.$window" rel="nofollow" target="_blank">$window</a>、<a href="http://docs.angularjs.org/api/ng.$log" rel="nofollow" target="_blank">$log</a>、…等等。不過，這種註冊 controller 的方式雖然簡單，卻還是有些缺點，例如這些 function 宣告不能被 <strong>最小化</strong> (Minification)，否則 function 內的區域變數被改成 a, b, c 之類的，AngularJS 就無法自動注入物件了，因此必須進一步學習更多的宣告方式，藉此解決 <strong>相依注入</strong> (Dependency Injection) 的問題！</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/07/23/AngularJS-five-ways-to-register-ngController#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/07/23/AngularJS-five-ways-to-register-ngController [email protected] https://blog.miniasp.com/post/2013/07/23/AngularJS-five-ways-to-register-ngController#comment https://blog.miniasp.com/post.aspx?id=23efde4d-4fa3-4bd7-a10d-059454483a5a 週二, 23 七月 2013 08:22:55 +0000 AngularJS angularjs ngController will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=23efde4d-4fa3-4bd7-a10d-059454483a5a https://blog.miniasp.com/trackback.axd?id=23efde4d-4fa3-4bd7-a10d-059454483a5a https://blog.miniasp.com/post/2013/07/23/AngularJS-five-ways-to-register-ngController#comment https://blog.miniasp.com/syndication.axd?post=23efde4d-4fa3-4bd7-a10d-059454483a5a <p align="left">我們公司目前已經有兩、三個案子開始使用 <a href="http://angularjs.org/" rel="nofollow" target="_blank">AngularJS</a> 進行開發，過程中自然會遇到一些陷阱，我們當然也知道，這些陷阱是因為觀念不完整所造成的，只要你<strong>認真看完</strong>且<strong>看懂</strong>官網文件在講些甚麼，自然不會犯這種錯，但我也相信 99% 的開發人員不會把官網文件全部看完才開始撰寫程式。這次同事遇到的問題是在使用 <a href="http://docs.angularjs.org/api/ng.directive:ngSwitch" rel="nofollow" target="_blank">ngSwitch</a> 指令用以切換不同網頁內容時，會抓不到 Model 的問題，我們就來看看遇到這種問題應該如何解決。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/06/09/AngularJS-ngSwitch-directive-trap-and-Scope-concept#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/06/09/AngularJS-ngSwitch-directive-trap-and-Scope-concept [email protected] https://blog.miniasp.com/post/2013/06/09/AngularJS-ngSwitch-directive-trap-and-Scope-concept#comment https://blog.miniasp.com/post.aspx?id=0a70ebd6-40fb-4807-a399-e53df686eb93 週日, 9 六月 2013 14:24:00 +0000 AngularJS angularjs ngSwitch will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=0a70ebd6-40fb-4807-a399-e53df686eb93 https://blog.miniasp.com/trackback.axd?id=0a70ebd6-40fb-4807-a399-e53df686eb93 https://blog.miniasp.com/post/2013/06/09/AngularJS-ngSwitch-directive-trap-and-Scope-concept#comment https://blog.miniasp.com/syndication.axd?post=0a70ebd6-40fb-4807-a399-e53df686eb93 <p>在開發 AngularJS 的時候，使用 Angular 表達式是一件很過癮的事，因為所有表達式的內容，都會因為 AngularJS 自動繫結的關係，所有 model 的變化，都會自動反映到頁面上 ( View )。不過，當 AngularJS 正在初始化的時候，由於尚未開始運作，且網頁又已經被載入到瀏覽器中，因此使用者很有可能會看到 Angular 表達式出現在頁面上，而這就不是一件有趣的事了！今天我要來講解幾個 Angular 表達式的使用技巧，以及使用 ngBind 指令 (directive) 的時機。</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips [email protected] https://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips#comment https://blog.miniasp.com/post.aspx?id=933b51ee-e8c8-46ad-824d-e2a2f2ad40c3 週二, 4 六月 2013 14:13:00 +0000 AngularJS angularjs ngBind ngBindHtmlUnsafe ngBindTemplate ngCloak will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=933b51ee-e8c8-46ad-824d-e2a2f2ad40c3 https://blog.miniasp.com/trackback.axd?id=933b51ee-e8c8-46ad-824d-e2a2f2ad40c3 https://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips#comment https://blog.miniasp.com/syndication.axd?post=933b51ee-e8c8-46ad-824d-e2a2f2ad40c3 <p>今天晚上花了點時間，把 AngularJS 預設模組裡 select 標籤的 ngOptions 參數用法給徹底搞懂，這是我前幾天在公司展示 AngularJS 開發實戰時，一個稍微卡住的地方。今天利用 <a href="http://jsbin.com/" rel="nofollow" target="_blank">JSBin</a> 自己弄出一個<a href="http://jsbin.com/ukezuj/5" rel="nofollow" target="_blank">完整範例</a>後終於大澈大悟。說實在的，AngularJS 這玩意要弄通他，對初學者來說好像還真的有點難度，今天聽同事跟我說，我前幾天再講解 AngularJS 的時候，只覺得我 DEMO 的很帥、程式寫的很快，但自己無法深刻理解，回家想兩天之後才跟我說：「保哥，我想通了，這玩意好棒喔！」XDD</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/05/11/AngularJS-ng-module-select-ngOptions-usage-samples#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/05/11/AngularJS-ng-module-select-ngOptions-usage-samples [email protected] https://blog.miniasp.com/post/2013/05/11/AngularJS-ng-module-select-ngOptions-usage-samples#comment https://blog.miniasp.com/post.aspx?id=81e8e417-b343-4b54-acf7-a292b31d5e4c 週六, 11 五月 2013 16:37:00 +0000 AngularJS 心得分享 angularjs select will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=81e8e417-b343-4b54-acf7-a292b31d5e4c https://blog.miniasp.com/trackback.axd?id=81e8e417-b343-4b54-acf7-a292b31d5e4c https://blog.miniasp.com/post/2013/05/11/AngularJS-ng-module-select-ngOptions-usage-samples#comment https://blog.miniasp.com/syndication.axd?post=81e8e417-b343-4b54-acf7-a292b31d5e4c <p>最近實在是迷上 <a href="http://angularjs.org/" target="_blank" rel="nofollow">AngularJS</a>，自從寫了<a href="/paypal3.htm" rel="nofollow">第一支範例程式</a>後，從此便愛不釋手。今天下午在公司內部 LIVE DEMO 完整的開發流程與設計概念，同事們頻頻點頭微笑，各個嘖嘖稱奇。到了傍晚，在 GitHub 看到一個能讓 Visual Studio 2012 支援 <a href="http://angularjs.org/" target="_blank" rel="nofollow">AngularJS</a> 所有內建 <strong><span style="color: #0000ff; font-family: Consolas;">ng-*</span></strong> 屬性 Intellisense 的方法，而且還支援到新版 AngularJS 1.1.4 耶，趕緊來寫文章造福大家。 (^_^)</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/05/07/AngularJS-Intellisense-in-Visual-Studio-2012#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/05/07/AngularJS-Intellisense-in-Visual-Studio-2012 [email protected] https://blog.miniasp.com/post/2013/05/07/AngularJS-Intellisense-in-Visual-Studio-2012#comment https://blog.miniasp.com/post.aspx?id=8c18fec4-12de-4d4c-8434-3536e5afa3cb 週二, 7 五月 2013 17:20:00 +0000 AngularJS Visual Studio angularjs vs2012 Visual Studio 2012 intellisense will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=8c18fec4-12de-4d4c-8434-3536e5afa3cb https://blog.miniasp.com/trackback.axd?id=8c18fec4-12de-4d4c-8434-3536e5afa3cb https://blog.miniasp.com/post/2013/05/07/AngularJS-Intellisense-in-Visual-Studio-2012#comment https://blog.miniasp.com/syndication.axd?post=8c18fec4-12de-4d4c-8434-3536e5afa3cb <p>有好長一段時間，一直在尋尋覓覓一套好用的前端 JavaScript 框架，看過了 <a href="https://www.google.com.tw/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;ved=0CDUQFjAA&amp;url=http%3A%2F%2Fwww.sencha.com%2Fproducts%2Fextjs&amp;ei=_652UcOsJ6n-iAewpoDYAw&amp;usg=AFQjCNGO-Vytz0UxLBoijpjsvBhdPeT_lQ&amp;sig2=qNnyasVO7I1RIthob9lZmA" target="_blank" rel="nofollow">ExtJS</a>、<a href="http://backbonejs.org/" target="_blank" rel="nofollow">BackboneJS</a>、<a href="http://emberjs.com/" target="_blank" rel="nofollow">EmberJS</a>、<a href="http://knockoutjs.com/" target="_blank" rel="nofollow">KnockoutJS</a>、&hellip; 與各家比較後，最後終於情定 <a href="http://angularjs.org/" target="_blank" rel="nofollow">AngularJS</a> 這套。其優異的框架設計像是 宣告式語法 (Directives)、DOM Templates、雙向資料繫結 (Two Way Data-Binding)、相依性注入 (Dependency Injection) 與關注點分離等特性，都深深地打動著我，但神奇的是，在台灣竟然看不到幾篇關於 <a href="http://angularjs.org/" target="_blank" rel="nofollow">AngularJS</a> 的文章，這感覺就跟我三年前毅然決然踏入 ASP.NET MVC 的領域一樣，不過，不管別人用不用，我是用定了！ (^_^)</p><p>... <a class="more" href="https://blog.miniasp.com/post/2013/04/23/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS#continue">繼續閱讀</a> ...</p> https://blog.miniasp.com/post/2013/04/23/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS [email protected] https://blog.miniasp.com/post/2013/04/23/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS#comment https://blog.miniasp.com/post.aspx?id=345fc587-de8a-4dc9-822e-4a452d74a044 週二, 23 四月 2013 18:44:00 +0000 AngularJS JavaScript angularjs will https://blog.miniasp.com/pingback.axd https://blog.miniasp.com/post.aspx?id=345fc587-de8a-4dc9-822e-4a452d74a044 https://blog.miniasp.com/trackback.axd?id=345fc587-de8a-4dc9-822e-4a452d74a044 https://blog.miniasp.com/post/2013/04/23/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS#comment https://blog.miniasp.com/syndication.axd?post=345fc587-de8a-4dc9-822e-4a452d74a044