asp.net-mvc - ASP.NET MVC 和 AngularJS 路由

Question

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

我的Home/Index是我的 AngularJS 应用程序和 <div ui-view>在Index.cshtml中

我希望我的 URL 完全由我的 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

“这是一个 SPA，其中路由由 AngularJS UI-Router 控制” - 在应用程序实际加载之前，情况并非如此。

您需要使应用程序可以通过所有可能的途径使用。

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

• assets/* -> 忽略路由(将思想传递给文件)
• api/* -> Api 路由
• * ->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 框架的框架中定义的，因此具有流畅的语法和强类型 Controller 目标)

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

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

设置基本路径。