Angularjs 将UIRouter模板与MVC4路由一起使用

我试图用Ui路由器创建一个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，它返回一个包含Hello，World！的模板

如果我在ui路由器中的状态之一通过我的应用程序的templateUrl请求home/index，那么这一切都很好。然而，我现在的问题是，如果我浏览到http://localhost/Home/Index，我将看到它的原始形式的模板-而不是我期望看到的，这是在主/索引状态下的整个应用程序。这很有意义，因为我就是这样配置的

我最初认为可以，我可以通过将每个人重定向到存储主文件的站点/索引并使用内联模板来解决这个问题。嗯，这很好，直到你认为

包含index.HTML的HTML文件将变得非常大，并且包含所有模板 这打破了碎片的爬行 所以现在我不知道该怎么做；我可以使用内联，但这会使网页加载缓慢，破坏SEO。我可以坚持我所拥有的。。但这将破坏最终用户创建的任何书签

在ChildActionOnly将返回服务器500而不是重定向之前，将模板调用设置为ChildActionOnly运行良好，并且UI路由器似乎不符合子操作的条件，因为通过templateUrl请求模板也触发了服务器500

我确实遇到了这个问题，但它并没有说明如何准确地解决模板问题

---

我刚才采用的另一种方法是有一个包含所有模板的模板区域，以及一个分别包含所有api详细信息/templates/和/api/的api区域。这解决了整个重新加载页面的问题，尽管我仍然不确定如何从这个角度来处理转义的_片段爬行。

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

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