如何在 ASP.NET MVC 中集成 AngularJS
介紹
當涉及到計算機軟件的開發時，我想運用所有的最新技術。例如，前端使用最新的 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.jsangular.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.csusing System.Reflection;using System.Runtime.CompilerServices;using System.Runtime.InteropServices; [assembly: AssemblyTitle("CodeProject.Portal")] [assembly: AssemblyProduct("CodeProject.Portal")] [assembly: AssemblyCopyright("Copyright © 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.jsangular.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.csusing 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.jsangular.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.csusing 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.jsangular.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.jsangular.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
.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注
總結
以上是生活随笔為你收集整理的如何在 ASP.NET MVC 中集成 AngularJS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.net Core 使用MyCat
- 下一篇： 微软BUG Bounty悬赏项目扩展至.