将 UIRouter 模板与 MVC 4 路由一起使用

Question

我正在尝试使用 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 文件。任何其他 actions/controllers 将 return API 数据或模板。因此，就我而言，我有 Home/Index 其中 return 是一个包含 <h1>Hello, World!</h1>.

的模板

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

我最初以为"OK, well I can solve this problem by redirecting everyone to Site/Index (where the main file is stored) and using inline templates"。好吧，这很好用，直到你考虑

包含 index.html 的 HTML 文件将变得非常大并且包含所有模板
这会中断 escaped_fragment 爬行

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

使模板调用 ChildActionOnly 效果很好，直到 ChildActionOnly 将 return 服务器 500（而不是重定向），并且 UI-Router 似乎不符合 "Child Action" 因为通过 templateUrl 请求模板也触发了服务器 500.

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

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

Answer 1

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

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

将 UIRouter 模板与 MVC 4 路由一起使用

Using UIRouter templates with MVC 4 Routing

asp.net-mvc-4

angularjs