如何在 ASP.NET MVC 中集成 AngularJS（1）

介紹

當涉及到計算機軟件的開發時，我想運用所有的最新技術。例如，前端使用最新的 JavaScript 技術，服務器端使用最新的基於 REST 的 Web API 服務。另外，還有最新的數據庫技術、最新的設計模式和技術。

當選擇最新的軟件技術時，有幾個因素在起作用，其中包括如何將這些技術整合起來。過去兩年中，我最喜歡的一項技術就是設計單頁面應用（SPA）的 AngularJS。作爲一個微軟stack開發者，我也是使用 ASP.NET MVC 平臺實現 MVC 設計模式和並進行研究的粉絲，包括它的捆綁和壓縮功能以及實現其對 RESTful 服務的 Web API 控制器。

爲了兼得兩者，本文介紹了在 ASP.NET MVC 中集成 AngularJS 的兩全其美的方案。

由於本文篇幅較長，故會分爲3篇，分別進行介紹。

概述

本文中示例的 Web 應用程序將有三個目標：

在前端頁面中實現 AngularJS 和 JavaScript AngularJS 控制器
使用微軟的 ASP.NET MVC 平臺來建立、引導並捆綁一個應用
根據功能模型的需求，動態的加載 AngularJS 的控制器和服務

本文的示例應用程序將包含三個主要文件夾：關於聯繫和索引的主文件夾、允許你創建，更新和查詢客戶的客戶文件夾、允許你創建，更新和查詢產品的產品文件夾。

除了使用 AngularJS 和 ASP.NET MVC，這個應用程序也將實現使用微軟的 ASP.NET Web API 服務來創建 RESTful 服務。微軟的實體框架將用於生成並更新一個 SQL Server Express 數據庫。

此應用程序也將用到一些使用 Ninject 的依賴注入。此外，也會運用流暢的界面和 lambda 表達式，來合併使用稱爲 FluentValidation的.NET 的小型驗證庫，用於構建駐留在應用業務層的驗證業務規則。

AngularJS VS ASP.NET Razor 視圖

幾年來，我一直在使用完整的 Microsoft ASP.NET MVC 平臺來開發 Web 應用程序。相比於使用傳統的 ASP.NET Web 窗體的 postback 模型， ASP.NET MVC 平臺使用的是 Razor 視圖。這帶來的是：適當的業務邏輯、數據和表示邏輯之間關注點的分離。在使用它的約定優於配置和簡潔的設計模式進行 MVC 開發之後，你將永遠不會想回過頭去做 Web 窗體的開發。

ASP.NET MVC 平臺及其 Razor 視圖引擎，不但比 Web 窗體簡潔，還鼓勵和允許你將 .NET 服務器端代碼和樣式混合。在 Razor 視圖中的 HTML 混合的 .NET 代碼看起來像套管代碼。另外，在 ASP.NET MVC 模式下，一些業務邏輯是可以被最終寫入在 MVC 的控制器中。在MVC控制器中，寫入代碼來控制表示層中的信息，這是很有誘惑力的。

AngularJS 提供了以下對微軟 ASP.NET MVC Razor 視圖的增強功能：

AngularJS 視圖是純 HTML 的
AngularJS 視圖被緩存在客戶端上以實現更快的響應，並在每次請求不產生服務器端響應
AngularJS 提供了一個完整的框架，編寫高質量的客戶端 JavaScript 代碼
AngularJS 提供了 JavaScript 控制器和 HTML 視圖之間的完全分離

ASP.NET MVC 捆綁和壓縮

捆綁和壓縮是兩種你可以用來縮短 Web 應用程序的請求負載時間的技術。這是通過減少對服務器的請求數量和減小請求規模，來實現縮短請求負載時間的（如 CSS 和 JavaScript）。壓縮技術通過複雜的代碼邏輯也使得別人更難的侵入你的 JavaScript 代碼。

當涉及到捆綁技術和 AngularJS 框架時，你會發現捆綁和壓縮過程中會自動使用 Grunt 和 Gulp 之類的框架，Grunt 和 Gulp 技術是一種流行的 web 庫並配有插件，它允許你自動化你的每一項工作。

如果你是一個微軟開發者，你可以使用它們在 Visual Studio 中一鍵式發佈你的 Web 應用，而不用學習使用任何第三發工具和庫類。幸運的是，捆綁和壓縮是 ASP.NET 4.5 ASP.NET 中的一項功能，可以很容易地將多個文件合併或捆綁到一個文件中。你可以創建 CSS，JavaScript 和其他包。較少的文件意味着更少的 HTTP 請求，這也可以提高第一個頁面的加載性能。

使用 RequireJS 來實現 MVC 捆綁的動態加載

在開發 AngularJS 單頁的應用程序時，其中有一件事情是不確定的。由於應用開始時會被引導和下載，所以在主頁面索引時，AngularJS 會請求所有的 JavaScript 文件和控制器。對於可能包含數百個 JavaScript 文件的大規模應用，這可能不是很理想。因爲我想使用 ASP.NET 的捆綁來加載所有的 AngularJS 控制器。一旦開始索引，一個 ASP.NET 捆綁中的巨大的挑戰將會出現在服務器端。

爲了實現示例程序動態地綁定 ASP.NET 文件包，我決定用 RequireJS JavaScript 庫。RequireJS 是一個衆所周知的 JavaScript 模塊和文件加載器，最新版本的瀏覽器是支持 RequireJS 的。起初，這似乎是一個很簡單的事情，但隨着時間的推移，我完成了大量的代碼的編寫，卻並沒有解決使用服務器端 rendered bundle 與客戶端 AngularJS 等技術的問題。

最終，在大量的研究和反覆試驗和失敗後，我想出了少量代碼卻行之有效的解決方案。

本文的接下來部分將會展示，在 ASP.NET MVC 中集成 AngularJS 的過程。

創建 MVC 項目並安裝 Angular NuGet 包

爲了開始示例應用程序，我通過在 Visual Studio 2013 專業版中選擇 ASP.NET Web 應用程序模板來創建一個 ASP.NET MVC 5 Web 應用程序。之後，我選擇了 MVC 工程並在應用中會用到 MVC Web API 添加文件夾和引用。下一步是選擇工具菜單中的“管理 NuGet 包的解決方案”，來下載並安裝 NuGet AngularJS。

對於此示例應用程序，我安裝了所有的以下的 NuGet 包：

AngularJS - 安裝整個 AngularJS 庫
AngularJS UI - AngularJS 框架的夥伴套件UI工具和腳本。
AngularJS UI引導 - 包含一組原生 AngularJS 指令的引導標記和CSS
AngularJS 塊UI - AngularJS BlockUI 指令，塊狀化 HTTP 中的請求
RequireJS - RequireJS 是一個 JavaScript 文件和模塊加載
Ninject – 提供了支持 MVC 和 MVC Web API 支持的依賴注入
實體框架 - 微軟推薦的數據訪問技術的新應用
流暢的驗證 - 建立驗證規則的 .NET 驗證庫。
優美字體- CSS 可立即定製的可升級的矢量圖標

NuGet 是一個很好的包管理器。當你使用 NuGet 安裝一個軟件包，它會拷貝庫文件到你的解決方案，並自動更新項目中的引用和配置文件。如果你刪除一個包， NuGet 會讓所有刪除過程不會留下任何痕跡。

優美的URLS

對於此示例應用程序，我想在瀏覽器的地址欄中實現優美的網址。默認情況下，AngularJS 會將 URL 用＃標籤進行路由：

例如：

http://localhost:16390/
http://localhost:16390/#/contact
http://localhost:16390/#/about
http://localhost:16390/#/customers/CustomerInquiry
http://localhost:16390/#/products/ProductInquiry

通過轉向 html5Mode 和設置基本的 URL，可以很方便的清除 URLS 並去除 URL 中的#。在 HTML5 模式下，AngularJS 的$位置服務會和使用 HTML5 History API 的瀏覽器 URL 地址進行交互。HTML5 History API 是通過腳本來操作瀏覽器歷史記錄的標準方法，以這點爲核心，是實現單頁面應用的重點。

要打開 html5Mode，你需要在 Angular 的配置過程中，將 $locationProviderhtml5Mode 設置爲 true，如下所示：

// CodeProjectRouting-production.js
angular.module("codeProject").config('$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

當你使用 html5Mode 配置 $locationProvider 時，你需要使用 href 標記來指定應用的基本 URL。基本 URL 用於在整個應用程序中，解決所有相對 URL 的問題。你可以在應用程序中設置，如下所示的母版頁的 header 部分的基本 URL：

<!-- _Layout.cshtml -->
<html>
<head>
<basehref="http://localhost:16390/"/>
</head>

對於示例應用程序，我以程序設置的方式將基本 URL 存儲在 Web 配置文件中。這是一種最好的方式使得基本 URL 成爲一種配置，這樣能夠讓你根據環境、配置或者你開發的應用的站點的情況，來將基本 URL 設定爲不同的值。此外，設置基本 URL 時，要確保基本 URL 以“/”爲結尾，因爲基本 URL 將是所有地址的前綴。

<!-- web.config.cs -->
<appsettings>
<addkey="BaseUrl"value="http://localhost:16390/"/>
</appsettings>

打開 html5Mode 並設置基本 URL 後，你需要以以下優美的 URL 作爲結束：

http://localhost:16390/
http://localhost:16390/contact
http://localhost:16390/about
http://localhost:16390/customers/CustomerInquiry
http://localhost:16390/products/ProductInquiry

目錄結構與配置

按照慣例，一個 MVC 項目模板要求所有的 Razor 視圖駐留在視圖文件夾中; 所有的 JavaScript 文件駐留在腳本文件夾; 所有的內容文件駐留在內容文件夾中。對於此示例應用程序，我想將所有的 Angular 視圖和相關的 Angular JavaScript 控制器放入相同的目錄下。基於 Web 的應用程序會變得非常大，我不想相關功能以整個應用程序的目錄結構存儲在不同文件夾中。

在示例應用程序，會出現兩個 Razor 視圖被用到，Index.cshtml 和 _Layout.cshtml 母版頁佈局，這兩個 Razor 視圖將用於引導和配置應用程序。應用程序的其餘部分將包括 AngularJS 視圖和控制器。

對於示例應用程序，我在視圖文件夾下創建了兩個額外的文件夾，一個客戶的子文件夾，一個產品的子文件夾。所有的客戶的 Angular 視圖和控件器將駐留在客戶子文件夾中，所有的產品的 Angular 視圖和控件器將駐留在產品子文件夾中。

由於 Angular 視圖是 HTML 文件，而 Angular 控制器是 JavaScript 文件，從 Views 文件夾到瀏覽器，ASP.NET MVC 必須被配置爲允許 HTML 文件和 JavaScript文件進行訪問和傳遞。這是一個 ASP.NET MVC 默認的約定。幸運的是，你可以通過編輯視圖文件下的 web.config 文件並添加一個 HTML 和 JavaScript 的處理器來更改此約定，這將會使這些文件類型能夠被送達至瀏覽器進行解析。

<!-- web.config under the Views folder -->
<system.webserver>
<handlers>
<addname="JavaScriptHandler"path="*.js"verb="*"precondition="integratedMode"
type="System.Web.StaticFileHandler"/>

<addname="HtmlScriptHandler"path="*.html"verb="*"precondition="integratedMode"
type="System.Web.StaticFileHandler"/>
</handlers>
</system.webserver>

應用程序版本自動刷新和工程構建

對於此示例應用程序，我想跟蹤每一次編譯的版本和內部版本號，在屬性文件夾下使用 AssemblyInfo.cs 文件的信息測試併發布這個應用。每次應用程序運行的時候，我想獲得最新版本的應用程序和使用的版本號，以實現最新的 HTML 文件和 JavaScript 文件生成時，幫助瀏覽器從緩存中，獲取最新的文件來替換那些舊文件。

對於這種應用，我使用的 Visual Studio 2013 專業版，這讓一切變得簡單，我爲 Visual Studio2013 專業版下載了一個自動版本的插件

https://visualstudiogallery.msdn.microsoft.com/dd8c5682-58a4-4c13-a0b4-9eadaba919fe

它會自動刷新 C＃和 VB.NET 項目的版本。將安裝插件下載到名爲自動版本設置的工具菜單中。該插件自帶了配置工具，它允許你配置主要和次要版本號，以便每次編譯時，自動的更新 AssemblyInfo.cs 文件。目前，這個插件只是在 Visual Studio 2013 專業版中支持，或者你也可以手動更新版本號或使用類似微軟的 TFS 以持續構建和配置管理環境的方式，來管理你的版本號。

下面是一個使用更新的 AssemblyVersion 和 AssemlyFileVersion 號的示例，這個示例在版本編譯之後會通過插件自動地進行更新。

// AssemblyInfo.cs
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;

[assembly: AssemblyTitle("CodeProject.Portal")]
[assembly: AssemblyProduct("CodeProject.Portal")]
[assembly: AssemblyCopyright("Copyright &copy; 2015")]

// The following GUID is for the ID of the typelib if this project is exposed to COM
[assembly: Guid("1d9cf973-f876-4adb-82cc-ac4bdf5fc3bd")]
// Version information for an assembly consists of the following four values:

// Major Version
// Minor Version
// Build Number
// Revision

// You can specify all the values or you can default the Revision and Build Numbers
// by using the '*' as shown below:

[assembly: AssemblyVersion("2015.9.12.403")]

使用 Angular 視圖和控制器更換聯繫我們和關於 Razor 視圖

要想使用 MVC 工程，首先要做的事情之一就是使用 AngularJS 視圖和控制器來更換聯繫我們和關於 Razor 視圖。這是一個很好的起點來測試你的配置是否能夠使 AngularJS 正常建立並運行。隨後如果不需要這些頁面，你可以刪除關於和聯繫我們的視圖和控制器。

AngularJS 的這種創建控制器的方式是通過注入 $scope 實現的。示例應用程序的視圖和控制器使用“controller as”語法。此語法並非使用控制器中的 $scope，而是簡化你的控制器的語法。當你聲明一個“controller as”語法的控制器時，你會得到該控制器的一個實例。

使用“controller as”語法，你的所有的連接到控制器（視圖模式）的屬性必須以你視圖的別名作爲前綴。在下面的視圖代碼片段，屬性標題前面就加上了“VM”的別名。

<!-- aboutController.js -->
<div ng-controller="aboutController as vm" ng-init="vm.initializeController()">
   <h4 class="page-header">{{vm.title}}</h4>
</div>

當控制器構造函數被調用時，使用“controller as”的語法，叫做“this”的控制器示例就會被創建。不需要使用 Angular 提供的 $scope 變量，你只需要簡單的聲明一個 vm 變量並分配“this”給它。所有被分配給 vm 對象的變量都會替換掉 $scope。有了分配給控制器功能的示例的變量，我們就可以使用這些別名並訪問這些變量。

此外，所有示例應用程序中的控制器都是使用“use strict”JavaScript 命令以一種嚴格的模式運行的。這種嚴格模式可以更容易地編寫“安全”的 JavaScript 代碼。嚴格模式將此前“不嚴格的語法”變成了真正的錯誤。作爲一個例子，在一般的 JavaScript 中，錯誤輸入變量名稱會創建一個新的全局變量。在嚴格模式下，這將拋出一個錯誤，因此無法意外創建一個全局變量。

// aboutController.js
angular.module("codeProject").register.controller('aboutController', 
['$routeParams', '$location', function ($routeParams, $location) {
{
    "use strict";
    var vm = this;

    this.initializeController = function () {
        vm.title = "About Us";
    }
}]);

如前所述，在 MVC Razor 視圖中使用 AngularJS 視圖和控制器的優勢之一，就是 Angular 提供了很好的機制來編寫高質量的 JavaScript 模塊、一種純 HTML 視圖和 JavaScript 控制器之間的完全分離的編碼方式。你不再需要使用 AngularJS 雙向數據綁定技術來解析瀏覽器的文件對象模型，這也就使得你能夠編寫單元測試的 JavaScript 代碼。

作爲一個註腳，您將在 aboutController 看到一個名爲 register.controller 的方法。在本文的後面，你會看到註冊方法是從哪兒來的和它用來做什麼。

主頁索引的 Razor 視圖和 MVC 路由

ASP.NET MVC 中集成 AngularJS 的一件有趣的事情，就是應用程序實際上是如何啓動和實現路由的。當你啓動應用程序時，ASP.NET MVC 將會以如下默認的方式進入並查看路由表：

// RouteConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace CodeProject.Portal
{
    publicclass RouteConfig
    {
        publicstaticvoid RegisterRoutes(RouteCollection routes)
        {
          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
          routes.MapRoute(
          name: "Default",
          url: "{controller}/{action}/{id}",
          defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
          );
        }
    }
}

應用開始時，以上外裝配置的 MVC 路由表中的配置，會將應用路由到 MVC Home 主控制器，並執行主控制器中的索引方法。這樣會以 MVC 默認工程模板的形式，將 Index.cshtml MVC Razor 視圖傳遞到用戶輸出的主頁面內容中。

這個應用程序的目標是使用 Angular 視圖取代所有的 MVC 視圖。但問題是，甚至在 AngularJS 被啓動之前，主頁的 Razor 視圖索引就已經被執行和注入了 _Layout.cshtml 主頁面中。

自從我決定，將主頁面改爲 AngularJS 視圖，我就使用包含 AngularJS ng-view 標籤的 div 標籤刪除了索引 Razor 視圖的所有內容。

<!-- Index.cshtml -->
<divng-view></div>

該 AngularJS ngView 標籤是一個指令，能以一種將當前路由的模板渲染成主頁面佈局的方式補充 $route service。我有兩個選擇，要麼直接嵌入 NG-View 代碼到母版頁 _Layout.cshtml 或使用 Razor 視圖將它注入到母版頁。我決定簡單地從索引 Razor 視圖中注入標籤。本質上，索引 Razor 視圖在應用程序的引導過程中被簡單的使用，並且在應用程序啓動後不會被引用。

一旦應用程序被引導並開始啓動，AngularJS 將會執行自己的路由系統並以路由表中配置來執行自己的默認路由。基於這一點，我創建了一個單獨 AngularJS index.html 和主頁的 IndexController.js 文件。

<!-- Index.html -->
<divng-controller="indexController as vm"ng-init="vm.initializeController()">
<h4class="page-header">{{vm.title}}</h4>
</div>

當視圖加載時，索引 Angular 視圖將會通過 ng-init 指令來執行索引控制器的初始化功能。

// indexController.js
angular.module("codeProject").register.controller('indexController',
['$routeParams', '$location', function ($routeParams, $location) {
"use strict";
var vm = this;
this.initializeController = function () {
        vm.title = "Home Page";
    }
}]);

RouteConfig.cs

當開發一個 AngularJS 應用時，首先將會發生的一件事，就是你需要先開發一個像駐留在路由文件中的 CustomerInquiry 一樣的頁面

/Views/Customers/ CustomerInquiry

當你在 HTML 頁面尋找這個視圖時，點擊 Visual Studio 中的運行按鈕來直接執行這個頁面，MVC 將會執行並嘗試去查找一個用於客戶路由的 MVC 控制器和視圖。將會發生的是，你會獲得一個叫做找不到該路由的視圖或控制器的錯誤。

你當然會遇到這個錯誤，因爲/View/Customers/CustomerInquiry的路由是個 Angular 路由，而不是 MVC 路由。MVC 並不知道這個路由。如果你還想直接運行這個頁面，則需要解決這一問題，給 MVC 路由表增加另外的路由以便告訴 MVC 將所有的請求路由到 MVC 主控制器，並渲染Razor 視圖、通過路由引導這個應用。

由於我有三個視圖文件夾，主文件夾、客戶文件夾和產品文件夾，我增加了一下的 MVC 路由配置類以便將所有的請求路由到主/索引路由中。當應用程序運行時點擊 F5，同樣也會進入 MVC 路由表。就 Angular 和單頁面如何運行而言，當你點擊 F5 時，基本上就是重啓了 AngularJS 應用。

有了這些額外的路由，現在就可以直接執行 AngularJS 路由了。你可以在 MVC 路由表中以一種通配符的路由來處理你的路由，但我更願意使用明確的路由表，並使得 MVC 拒絕所有無效的路由。

要記住的基本的事情是，MVC 路由將會在 AngularJS 啓動之前發生，一旦引導開始，AngularJS 將會接管所有以後路由請求。

// RouteConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace CodeProject.Portal 
{
    publicclass RouteConfig
    {
        publicstaticvoid RegisterRoutes(RouteCollection routes)
        {

             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
             routes.MapRoute(
             name: "HomeCatchAllRoute",
             url: "Home/{*.}",
             defaults: new { controller = "Home", action = "Index", 
             id = UrlParameter.Optional }
             );
             routes.MapRoute(
             name: "CustomersCatchAllRoute",
             url: "Customers/{*.}",
             defaults: new { controller = "Home", action = "Index", 
             id = UrlParameter.Optional }
             );

             routes.MapRoute(
             name: "ProductsCatchAllRoute",
             url: "Products/{*.}",
             defaults: new { controller = "Home", action = "Index", 
             id = UrlParameter.Optional }
             );

             routes.MapRoute(
             name: "Default",
             url: "{controller}/{action}/{id}",
             defaults: new { controller = "Home", action = "Index", 
             id = UrlParameter.Optional }
          );
       }
   }
}

$ controllerProvider 和動態加載控制器

當示例應用程序啓動時，該應用程序將會預加載應用程序的核心控制器和服務。這包括 Home 目錄中的所有控制器和應用程序的共享服務。

此應用程序的共享服務，將在所有模塊中執行- 包括一個 Ajax 服務和提醒服務。如前所述，此應用程序具有三個功能模塊：基本的關於、聯繫我們和主頁的模塊、一個客戶模塊和產品模塊。

由於此應用程序可隨時間而增長，我不希望該在應用程序的配置和引導階段中，預加載所有的功能模塊。應用程序啓動後，我僅希望當用戶請求時，再加載這些控制器和產品模塊。

默認情況下，AngularJS 被設計爲預加載所有的控制器。一個典型的控制器看起來這樣：

// aboutController.js
angular.module("codeProject").controller('aboutController',
['$routeParams', '$location', function ($routeParams, $location) {
"use strict";
var vm = this;
this.initializeController = function () {
        vm.title = "About";
    }
}]);

如果在配置階段之後，你嘗試動態加載上述控制器，將會收到一個 Angular 錯誤。你需要做的是使用 $controllerProvider 服務器在配置階段之後，動態地加載控制器。Angular 使用 $controllerProvider 服務來創建新的控制器。這種方法允許通過註冊方法來實現控制器註冊。

// aboutController.js
angular.module("codeProject").register.controller('aboutController',
['$routeParams', '$location', function ($routeParams, $location) {
"use strict";
var vm = this;
this.initializeController = function () {
         vm.title = "About";
     }
}]);

上述有關控制器被修改爲執行 $controllerProvider 的寄存器方法。爲了使這種註冊方法有效，必須在配置階段配置這種註冊。下面的代碼片段在應用程序啓動之後，使用了 $controllerProvider 來使註冊方法有效。在下面的例子中，提供了一種用於註冊和動態加載兩個控制器和服務的註冊方法。如果你願意，也可以包括 Angular 全部庫和指令的註冊功能。

// CodeProjectBootStrap.js
(function () {
var app = angular.module('codeProject', ['ngRoute', 'ui.bootstrap', 'ngSanitize', 'blockUI']);

app.config(['$controllerProvider', '$provide', function ($controllerProvider, $provide) {
        app.register =
        {
             controller: $controllerProvider.register, 
             service: $provide.service
        }
    }
}

以上是如何在 ASP.NET MVC 中集成 AngularJS 的第一部分內容，後續內容會在本系列的後兩篇文章中呈現，敬請期待！

通過第一部分內容的學習，相信大家已經對實現在 ASP.NET MVC 中集成 AngularJS 的基本思路有所瞭解。當我們在進行 ASP.NET MVC 和 AngularJS 開始時，還可以藉助開發工具來助力開發過程。ASP.NET MVC開發時，可以藉助 ComponentOne Studio ASP.NET MVC 這一款輕量級控件，它與 Visual Studio 無縫集成，完全與 MVC6 和 ASP.NET 5.0 兼容，將大幅提高工作效率；AngularJS 開發時，可以藉助 Wijmo 這款爲企業應用程序開發而推出的一系列包含 HTML5 和 JavaScript 的開發控件集，無論應用程序是移動端、PC端、還是必須要支持IE6，Wijmo 均能滿足需求。

文章來源：By Mark J. Caplin

原文鏈接：http://www.codeproject.com/Articles/1033076/Integrating-AngularJS-with-ASP-NET-MVC

iteye_10020

發佈了7 篇原創文章 · 獲贊 1 · 訪問量 8924

私信關注

如何在 ASP.NET MVC 中集成 AngularJS（1）

介紹

概述

AngularJS VS ASP.NET Razor 視圖

ASP.NET MVC 捆綁和壓縮

使用 RequireJS 來實現 MVC 捆綁的動態加載

創建 MVC 項目並安裝 Angular NuGet 包

優美的URLS

目錄結構與配置

應用程序版本自動刷新和工程構建

使用 Angular 視圖和控制器更換聯繫我們和關於 Razor 視圖

主頁索引的 Razor 視圖和 MVC 路由

RouteConfig.cs

$ controllerProvider 和動態加載控制器

.NET 新標準介紹

Azure File Storage 基本用法 -- Azure Storage 之 File

最全的Windows Azure學習教程彙總

Azure SQL Database Active Geo-Replication簡介

WebStorm常用功能的使用技巧分享

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結