ASP.NET MVC 中集成 AngularJS的应用例子

// 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 均能满足需求。

ASP.NET 捆绑和压缩
CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一。捆绑和压缩降低了 HTTP 请求和有效载荷的大小，结果是可以更快和更好的执行 ASP.NET MVC 的网站。有许多可以减少 CSS 和 JavaScript 合并的大小的方法。

捆绑可以很容易地将多个文件合并或捆绑到一个文件中。您可以创建 CSS，JavaScript 和其他包。压缩可以优化脚本和 CSS 代码，如去除不必要的空格和注释，缩短变量名到一个字符。由于捆绑和压缩降低你的 JavaScript 和 CSS 文件的大小，发送的 HTTP 的字节也会显著降低。

当配置包文件时，你需要考虑一个捆绑策略以及如何组织你的包文件。下面的 BundleConfig 类是内置的 ASP.NET 捆绑功能的配置文件。在 BundleConfig 类，我决定通过功能模块来组织我的文件。我为工程中的每一个文件设置了一个独立的捆绑，包括对脚本的单独捆绑，Angular 的核心文件，共享的 JavaScript 文件和主目录单，客户目录和产品目录。

我创建了客户和产品目录的独立包，带着这种想法，当用户请求应用程序的这些源文件时，应以将会动态的加载这些捆绑。由于 AngularJS 是一个纯客户端框架，可以动态加载 ASP.NET 包和服务器端技术，所以这两项技术相结合，成为了这个要求具有发布调试模块的实例应用的最大开发挑战。

// BundleConfig.cs
using System.Web;
using System.Web.Optimization;

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js"
        ));

        bundles.Add(new StyleBundle("~/Content/css").Include(
           "~/Content/bootstrap.css",
           "~/Content/site.css",
           "~/Content/SortableGrid.css",
           "~/Content/angular-block-ui.min.css",
           "~/Content/font-awesome.min.css"
        ));

        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
           "~/Scripts/angular.min.js",
           "~/Scripts/angular-route.min.js",
           "~/Scripts/angular-sanitize.min.js",
           "~/Scripts/angular-ui.min.js",
           "~/Scripts/angular-ui/ui-bootstrap.min.js",
           "~/Scripts/angular-ui/ui-bootstrap-tpls.min.js",
           "~/Scripts/angular-ui.min.js",
           "~/Scripts/angular-block-ui.js"
        ));

        bundles.Add(new ScriptBundle("~/bundles/shared").Include(
           "~/Views/Shared/CodeProjectBootstrap.js",
           "~/Views/Shared/AjaxService.js",
           "~/Views/Shared/AlertService.js",
           "~/Views/Shared/DataGridService.js",
           "~/Views/Shared/MasterController.js"
        ));

        bundles.Add(new ScriptBundle("~/bundles/routing-debug").Include(
           "~/Views/Shared/CodeProjectRouting-debug.js"
        ));

        bundles.Add(new ScriptBundle("~/bundles/routing-production").Include(
           "~/Views/Shared/CodeProjectRouting-production.js"
        ));

        bundles.Add(new ScriptBundle("~/bundles/home").Include(
           "~/Views/Home/IndexController.js",
           "~/Views/Home/AboutController.js",
           "~/Views/Home/ContactController.js",
           "~/Views/Home/InitializeDataController.js"
        ));

　
        bundles.Add(new ScriptBundle("~/bundles/customers").Include(
           "~/Views/Customers/CustomerMaintenanceController.js",
           "~/Views/Customers/CustomerInquiryController.js"
        ));

　
        bundles.Add(new ScriptBundle("~/bundles/products").Include(
           "~/Views/Products/ProductMaintenanceController.js",
           "~/Views/Products/ProductInquiryController.js"
        ));
    }
}

缓存与 ASP.NET 捆绑
使用 ASP.NET 捆绑的优势是它的“cache busting”的辅助方法，一旦你改变了 CSS 和 JavaScript 的缓存方式，这种方法将会使用自动引导的方式使捆绑的文件能够更容易的进行缓存。下面的代码示例是在一个 MVC 的 Razor 视图中执行的（通常情况下，是在 _Layout.cshtml 母版页）。所述的 Scripts.Render 方法将会在客户端渲染，并且当在非调试模式下执行时，它将会产生包的虚拟路径和结束包的序列号。当你更改包的内容并重新发布你的应用程序时，包将会生成一个新的版本号，这有助于客户端上的浏览器缓存，并生成一个新的下载包。

// _Layout.cshtml
@Scripts.Render("~/bundles/customers")
@Scripts.Render("~/bundles/products")
该 Scripts.Render 功能是一个很好的功能，但在此示例应用程序，我想使用在客户端一侧动态加载的客户和产品，所以我不能用渲染功能来渲染我的一些包，这是挑战的开始。这个问题是以如何使用 AngularJS 从客户端 JavaScript 渲染服务器端的 ASP.NET 包开始的？

_Layout.cshtml - 服务器端启动代码
一个使用 ASP.NET MVC 来引导 AngularJS 应用程序的好处是，你可以通过 _Layout.cshtml 主页中服务器端的代码，来加载和执行 AngularJS 的代码。这是第一步，帮助解决我通过客户端代码渲染服务器端捆绑的窘境。当然，你可以简单地嵌入脚本来标记客户端的代码，但我需要一种方法来渲染一个包和引用，并维护被追加到清除了缓存的包的目的自动版本号。

开始的时候，我在 _Layout.cshtml 母版页的顶部编写了一些服务器端代码。我所做的头两件事情就是让从程序集信息类中获取应用的序列号，从应用程序设置中获取检索的基本 URL。这两个都将被之后 HTML 中的 Razor 视图引擎所解析。

下面的代码段，产生了我想根据需求动态加载的一些包，我不想当应用启动时加载所有的前期的包。我需要的信息中的最重要一块是虚拟路径和每一次捆绑的长版本号。幸运的是，访问捆绑信息的方法，本身就是一种捆绑的功能。

下面的代码行的关键行引用了 BundleTable。这行代码执行了 ResolveBundleUrl， 返回了该方法的虚拟路径以及每个引用的捆绑和版本号。这些代码基本上生成一个包的列表并且将该列表转换成一个 JSON 集合。后来这个 JSON 集被添加到 AngularJS。有一个 JSON 集合中的包的信息是，允许从客户端 AngularJS 应用程序加载服务器端捆绑的最初的方法。

// _Layout.cshtml
@using CodeProject.Portal.Models
@{
    string version = typeof(CodeProject.Portal.MvcApplication).Assembly.GetName().Version.ToString();
    string baseUrl = System.Configuration.ConfigurationManager.AppSettings["BaseUrl"].ToString();

    List bundles = new List();
    CodeProject.Portal.Models.CustomBundle customBundle;

    List codeProjectBundles = new List();
    codeProjectBundles.Add("home");
    codeProjectBundles.Add("customers");
    codeProjectBundles.Add("products");

    foreach (string controller in codeProjectBundles)
    {
        customBundle = new CodeProject.Portal.Models.CustomBundle();
        customBundle.BundleName = controller;
        customBundle.Path = BundleTable.Bundles.ResolveBundleUrl("~/bundles/" + controller);
        customBundle.IsLoaded = false;
        bundles.Add(customBundle);
    }

    BundleInformation bundleInformation = new BundleInformation();
    bundleInformation.Bundles = bundles;
    string bundleInformationJSON = Newtonsoft.Json.JsonConvert.SerializeObject(
    bundleInformation, Newtonsoft.Json.Formatting.None);

}

ASP.NET 的捆绑类有很多的功能。例如，如果你想通过捆绑所有文件进行迭代，你可以执行 EnumerateFiles 方法，返回一个特定的包内的每个文件的虚拟路径。

foreach (var file in bundle.EnumerateFiles(new BundleContext(
         new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, "~/bundles/shared")))
{
    string filePath = file.IncludedVirtualPath.ToString();
}
_Layout.cshtml - 标题
在 HTML 文档的标题部分，有一个 RequireJS 的参考。该应用程序通过客户端 AngularJS 代码使用了 RequireJS 动态的加载包。RequireJS 是一个加载了 JavaScript API 模块的异步模块定义（AMD）。RequireJS 有许多功能，但是对于实例应用的目的，仅需要来自于 RequireJS 的请求功能以便在后面应用程序的使用。

此外，Scripts.Render 和 Styles.Render 方法将在开始部分被执行。当应用程序以调试模式执行或者 EnableOptimizations 被指为 false 时，渲染的方法将会在每一次捆绑中生成多个脚本。当在发布模式和启用优化时，渲染方法将生成一个脚本标记来代表整个捆绑的版本戳。

这就导致了另外一个挑战，那就是应用需要支持发布模式下生成捆绑脚本标签的能力，和调试模式下生成独特文件的脚本标签的能力。如果你想要在调试模式下为 JavaScript 代码设置断点，这点是很重要的。因为如果在发布模式下，使用 JavaScript 代码的优化捆绑版本是不可能的。

最后，在标题部分，使用 Razor 语法的基本 URL 被早早地设定为服务器侧的基本 URL 变量。

!DOCTYPE html>