使用Angular.JS和ASP.NET建立單頁應用

edagarli發表於2014-04-11
AngularJSASP.NET

使用Angular.JS和ASP.NET建立單頁應用(轉)

週三（4月2日）的Build大會上，David Catuhe和Jon Galloway做了一個關於將AngularJS用於

(轉)ASP.NET應用程式的演講。他們為開發者提供了一種方式，可以快速構建流行的單頁Web應用。

Angular是由Google建立並運營的開源專案。顧名思義，這是一個基於JavaScript的庫，遵循模型-檢視-控制器（MVC）設計模式。如Catuhe和Galloway所說，Angular使用依賴注入，使ASP.NET應用更加強大。要想啟用Angular，只需要引入單個檔案angular.min.js。（NuGet使用者可以獲取最新版本（beta）或穩定版本。）

他們指出，Angular並不是一個非此即彼的方案，你完全可以僅使用其中的頁面選取功能。不管怎樣，Catuhe和Galloway都建議在專案的Scripts資料夾下建立一個“apps”目錄，來組織檔案。

壓縮JS檔案時需要格外注意：由於會影響Angular的依賴注入，因此預設情況下對應用程式碼進行壓縮會破壞應用程式本身。（Angular教程文件的“A Note on Minification”一節對此進行了詳細介紹。）

要真正在頁面中啟用Angular，需要在html標籤中新增“ng-app”：

<html ng-app … >

這可以通知Angular準備好做某些事情。Angular通過其自帶的輕量級版本的jQuery，使用$http載入檔案。如果專案已經安裝了jQuery，Angular將會使用該版本，以保持一致性。

Catuhe和Galloway還展示了一個示例應用，一個顯示並儲存“萬智牌”資訊的單頁應用（SPA）。單頁應用只用一個檢視來構建UI，而Angular本身使用路由來定義這些檢視。

由於Angular中過深的連結會使MVC路由造成衝突，因此他們建議使用一個路由：

routes.MapRoute(
             name: "Catch all route for SPA",
             url: "App/{*catchall}",
             defaults: new{
                             controller = "Home", 
                             action = "Index"});

還有一個關於顯示HTML的小技巧。如果HTML是檢視生成的，一切都沒有問題。但如果HTML來自檔案（如MyHTML.html），應該使用IIS重寫規則來改變URL：

/myHTML.html -> /myHTML

要想觀看完整的demo應用，請查閱該演講的Channel9頁面。

原文連結：Creating Single Page Apps With Angular.JS and ASP.NET

相關文章