Question

我在ASP.NET MVC应用程序中使用AngularJS，但我遇到嵌套路由问题。我使用ASP.NET MVC路由，但在SPA内我使用UI-Router。

我的Home/Index是我的AngularJS应用，<div ui-view>位于Index.cshtml

我希望我的网址完全由我的AngularJS SPA控制（html5Mode = true）。

我在ASP.NET MVC中设置了我的RouteConfig，如下所示：

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
    name: "DefaultHome",
    url: "",
    defaults: new { controller = "Home", action = "Index" }
);

routes.MapRoute(
    name: "Default",
    url: "{.*}",
    defaults: new { controller = "Home", action = "Index" }
);

我使用的是UI-Router，但这是无关紧要的，因为这是一个ASP.NET MVC路由问题。然而，AngularJS路由代码如下：

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise("/");

    $stateProvider
    .state('home', {
      url: "/",
      templateUrl: "Scripts/app/partials/home.html",
      controller: "HomeController"
    })
    .state('login', {
      url: "/login",
      templateUrl: "Scripts/app/partials/login.html",
      controller: "AccountController"
    })
    .state('login.list', {
      url: "/list",
      templateUrl: "Scripts/app/partials/login.list.html",
      controller: "AccountController"
    });

    $locationProvider.html5Mode(true);

});

当我转到/或/login时，这非常有效，但当我转到/login/list时，我从ASP.NET MVC应用程序中获得了404：

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

有什么问题？我已经指定了{.*}规则，因此应该将其定向到AngularJS应用程序。

Answer 1

“这是一个由AngularJS UI-Router控制路由的SPA” - 在实际加载应用之前不行。

您需要从每个可以想到的路线提供应用程序。

我通常做的是在服务器上有这样的结构：

assets / * - ＆gt;忽略路由（将思想传递给文件）
api / * - ＆gt; Api路线
* - ＆gt; index.html / index.cshtml / ???

以下是按顺序排列的一组路线示例，这对我来说很常见。

router
.Route("assets/{*ignore}").Through()
.Route("api/search").To<SearchController>()
.Route("api/content/{contentType}/{id}").To<ContentController>(x => x.Set.Defaults(new {id = RouteParameter.Optional}))
.Route("api/file/{contentType}/{id}/{head}").To<FileController>(x => x.Set.Defaults(new {id = RouteParameter.Optional, head = RouteParameter.Optional}))
.Default().To<TController>();

（请注意，它们是在包含WebAPI框架的框架中定义的，因此流畅的语法和强类型的控制器定位）

如果您使用Razor作为主视图，我通常会这样做：

<base href="@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~/"))" />

设置基本路径。

ASP.NET MVC和AngularJS路由

1 个答案: