The Will Will Web | AngularJS

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何在 Angular CLI 建立的 Angular 2 開發環境呼叫遠端 RESTful APIs

最近開辦了許多 Angular 2 訓練課程,許多學員都有提到一個問題,就是如何讓我們現有的 ASP.NET MVC 5 網站跟 Angular 2 整合在一起。這個問題有個很簡單的回答:不要在開發時期整在一起,部署的時候放在一起就好!但是 Angular 2 網站在開發的過程中要怎樣才能成功呼叫我們用 ASP.NET MVC 或 ASP.NET Web API 寫好的 RESTful API 呢?本篇文章將介紹一個鮮為人知的「內建功能」,可以讓你在開發時期就可以很方便的呼叫任意遠端任意 HTTP API 介面。

... 繼續閱讀 ...

關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )

為了讓 TypeScript 能與目前市面上各種 JavaScript 模組/函式庫一起運作,模組定義檔 ( Declaration Files ) ( *.d.ts ) 是 TypeScript 不可或缺的一部分,從最早期的 TSD (TypeScript Definition manager for DefinitelyTyped) 工具,到去年十月才推出的 typings (The TypeScript Definition Manager) 工具,今年六月 TypeScript 開發團隊決定從 TypeScript 2.0 改用 npm 來管理所有的模組定義檔,有在使用 TypeScript 的開發人員得要注意囉!

... 繼續閱讀 ...

如何修改 Visual Studio Code 內建的 TypeScript 版本

最近這兩周由於 Angular 2 已經來到了 RC5 版本,且 Angular CLI 也來到了 1.0.0-beta.11-webpack.2 版本,正式改用 webpack 作為 Angular 2 今後的模組管理工具,專案的整體編譯速度比以前用 SystemJS 快了好幾倍,我們用的非常開心。但唯獨有一點不太理想,就是當 Angular CLI 升級後所建立的專案,在 Visual Studio Code 裡面一直會出現討厭的警告訊息 ( 紅色下曲線 ),在經過幾天的消化與研究之後,終於發現原來是 Visual Studio Code 與 TypeScript 的問題,欲知詳情,請繼續看下去!

... 繼續閱讀 ...

前端工程的夢幻逸品:Angular 2 開發框架介紹

目前 Angular 2 已經進展到 RC4 版本,在過不久的將來就要推出正式版本,許多人磨刀霍霍,既期待又怕受傷害。期待的是,希望 Angular 2 能夠真正解決我們開發 Web 應用程式的各種難題,不單單只是網站而已,還必須考量到 SPA 架構、開發效率、執行效率、行動裝置、原生 App 應用、伺服器渲染、多國語支援、開發工具、… 等多種面向,想也知道這不是個容易的任務。害怕的是,不知道這個坑到底有多深,用下去之後會不會很難上手、系統越做越大會不會越來越難維護、多人開發的時候會不會很難套用開發規範、會不會很難偵錯、容不容易跟後端整合、… 等等。 而我希望在這篇文章中,能夠解開大家心中的疑惑。

... 繼續閱讀 ...

如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題

由於 Angular 2 官方建議採用 TypeScript 做為主要的開發語言,一般來說 TypeScript 都會建議使用 npm 進行安裝,安裝後就可以在命令提示字元下使用 tsc 命令對 *.ts 進行編譯動作。不過這幾年 TypeScript 的變化很快,轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事,不過對於有安裝過 Visual Studio 的使用者來說,這條路可能會變得異常崎嶇,如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話,這篇文章你可能要繼續看下去。

... 繼續閱讀 ...

如何用 Visual Studio Code 開發 AngularJS 應用程式

Visual Studio Code 的出現帶給許多人震撼,但是嚴格說起來,Visual Studio Code 並不能算是一個 IDE (整合開發環境),更精確地來說,他就是一個編輯器 (Editor),只是多了一些 IDE 的功能而已。今天我打算來分享如何有效率的使用 Visual Studio Code 來開發 AngularJS 應用程式,有些小技巧可以學習一下。

... 繼續閱讀 ...

關於 AngularJS 控制器 (ngController) 的多種宣告方法

初學 AngularJS 的人,寫到 ngController 之後一定會覺得 AngularJS 的 controller 怎麼這麼簡單,只要宣告一個 function 就馬上可以用了,而且 function 裡面的參數還會經由 AngularJS 自動注入物件。例如 $scope$http$window$log、…等等。不過,這種註冊 controller 的方式雖然簡單,卻還是有些缺點,例如這些 function 宣告不能被 最小化 (Minification),否則 function 內的區域變數被改成 a, b, c 之類的,AngularJS 就無法自動注入物件了,因此必須進一步學習更多的宣告方式,藉此解決 相依注入 (Dependency Injection) 的問題!

... 繼續閱讀 ...

AngularJS 的 ngSwitch 指令 (directive) 使用陷阱與範圍觀念

我們公司目前已經有兩、三個案子開始使用 AngularJS 進行開發,過程中自然會遇到一些陷阱,我們當然也知道,這些陷阱是因為觀念不完整所造成的,只要你認真看完看懂官網文件在講些甚麼,自然不會犯這種錯,但我也相信 99% 的開發人員不會把官網文件全部看完才開始撰寫程式。這次同事遇到的問題是在使用 ngSwitch 指令用以切換不同網頁內容時,會抓不到 Model 的問題,我們就來看看遇到這種問題應該如何解決。

... 繼續閱讀 ...

關於 AngularJS 表達式與 ngBind 指令 (directive) 的使用技巧

在開發 AngularJS 的時候,使用 Angular 表達式是一件很過癮的事,因為所有表達式的內容,都會因為 AngularJS 自動繫結的關係,所有 model 的變化,都會自動反映到頁面上 ( View )。不過,當 AngularJS 正在初始化的時候,由於尚未開始運作,且網頁又已經被載入到瀏覽器中,因此使用者很有可能會看到 Angular 表達式出現在頁面上,而這就不是一件有趣的事了!今天我要來講解幾個 Angular 表達式的使用技巧,以及使用 ngBind 指令 (directive) 的時機。

... 繼續閱讀 ...

搞懂 AngularJS 預設模組 select 標籤的 ngOptions 參數用法

今天晚上花了點時間,把 AngularJS 預設模組裡 select 標籤的 ngOptions 參數用法給徹底搞懂,這是我前幾天在公司展示 AngularJS 開發實戰時,一個稍微卡住的地方。今天利用 JSBin 自己弄出一個完整範例後終於大澈大悟。說實在的,AngularJS 這玩意要弄通他,對初學者來說好像還真的有點難度,今天聽同事跟我說,我前幾天再講解 AngularJS 的時候,只覺得我 DEMO 的很帥、程式寫的很快,但自己無法深刻理解,回家想兩天之後才跟我說:「保哥,我想通了,這玩意好棒喔!」XDD

... 繼續閱讀 ...

如何讓 Visual Studio 2012 支援 AngularJS 的 Intellisense

最近實在是迷上 AngularJS,自從寫了第一支範例程式後,從此便愛不釋手。今天下午在公司內部 LIVE DEMO 完整的開發流程與設計概念,同事們頻頻點頭微笑,各個嘖嘖稱奇。到了傍晚,在 GitHub 看到一個能讓 Visual Studio 2012 支援 AngularJS 所有內建 ng-* 屬性 Intellisense 的方法,而且還支援到新版 AngularJS 1.1.4 耶,趕緊來寫文章造福大家。 (^_^)

... 繼續閱讀 ...

前端工程的極致精品: AngularJS 開發框架介紹

有好長一段時間,一直在尋尋覓覓一套好用的前端 JavaScript 框架,看過了 ExtJSBackboneJSEmberJSKnockoutJS、… 與各家比較後,最後終於情定 AngularJS 這套。其優異的框架設計像是 宣告式語法 (Directives)、DOM Templates、雙向資料繫結 (Two Way Data-Binding)、相依性注入 (Dependency Injection) 與關注點分離等特性,都深深地打動著我,但神奇的是,在台灣竟然看不到幾篇關於 AngularJS 的文章,這感覺就跟我三年前毅然決然踏入 ASP.NET MVC 的領域一樣,不過,不管別人用不用,我是用定了! (^_^)

... 繼續閱讀 ...