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

在如何在 ASP.NET MVC 中集成 AngularJS(1)中，我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。

下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分。

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<string> codeProjectBundles = new List<string>();
    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>


"utf-8" />
"viewport" content="width=device-width, initial-scale=1.0">
"Cache-Control" content="no-cache, no-store, must-revalidate" />
"Pragma" content="no-cache" />
"Expires" content="0" />