使用带有 MVC 4 路由的 UIRouter 模板答案

【问题标题】：Using UIRouter templates with MVC 4 Routing使用带有 MVC 4 路由的 UIRouter 模板
【发布时间】：2015-01-14 06:51:17
【问题描述】：

我正在尝试使用 Ui-Router 创建一个 ASP MVC 4 项目，但是遇到了一个问题。

我当前的服务器端路由配置如下：

    // Controller/Action route
    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}");

    // Redirect any other routes to Site/Index so AngularJS can handle routing
    // Place routes above this otherwise they will be ignored
    routes.MapRoute(
        name: "Catch-All Redirect to Index",
        url: "{*url}",
        defaults: new { controller = "Site", action = "Index" }
    );

和客户端

angular.module('loluk.home')
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: '/home/index'
        });
    }]);

Site/Index，重定向操作，仅包含具有 ng-app 指令的 HTML 文件。任何其他操作/控制器都将返回 API 数据或模板。所以，就我而言，我有Home/Index，它返回一个包含<h1>Hello, World!</h1> 的模板。

如果我在 ui-router 中的一个状态通过 templateUrl 为我的应用程序请求“home/index”，这一切都很好。但是，我现在遇到的问题是，如果我浏览到http://localhost/Home/Index，我将看到原始形式的模板——而不是我期望看到的，即整个应用程序处于Home/Index 状态。这是有道理的，因为这就是我的配置方式。

我最初认为“好吧，我可以通过将所有人重定向到站点/索引（存储主文件的位置）并使用内联模板来解决这个问题”。好吧，这很好用，直到你考虑到这一点

包含 index.html 的 HTML 文件将变得异常庞大并包含所有模板
这会破坏 escaped_fragment 爬行

所以现在我不知道如何进行这项工作；我可以使用内联，但这会使网页加载缓慢并破坏 SEO。我可以坚持我所拥有的……但这会破坏最终用户创建的任何书签。

使模板调用 ChildActionOnly 运行良好，直到 ChildActionOnly 将返回服务器 500（而不是重定向），并且 UI-Router 似乎不符合“子操作”的条件，因为通过 templateUrl 请求模板也触发了服务器 500。

我确实遇到了this 问题，但是它并没有说明如何准确解决模板情况。

我刚刚追求的另一个途径是拥有一个包含我所有模板的模板区域，以及一个包含我所有 api 详细信息的 api 区域（分别为/templates/ 和/api/）。这解决了整个重新加载页面的问题，尽管从这个角度来看，我仍然不确定如何处理 escaped_fragment 爬行。

【问题讨论】：

标签： angularjs asp.net-mvc-4

【解决方案1】：

我通过在 MVC 中创建两个区域来实现这一点 - 一个用于路由到 /api/ 的 API，另一个用于路由到 /templates/ 的模板。 AngularJS 将调用/template/{controller}/{action}，这将返回一个纯 HTML 视图，并对/api/{controller} 进行 RESTful 调用以检索数据。

这不是一个完美的解决方案，但它确实有效。

【讨论】：