AngularJS - ui-router - MVC 5 - html5mode

Posted 2023-03-05

【中文标题】AngularJS - ui-router - MVC 5 - html5mode

【英文标题】：

【发布时间】：2014-12-21 20:50:26

【问题描述】：

我正在尝试使用 AngularJS 和 MVC 5 创建一个迷你 SPA。除此之外，我想为 AngularJS 使用 ui-router 插件而不是 ng-route，并希望启用 html5mode。

我的问题是，每当我单击锚元素时，它都会刷新页面并向 ASP.NET MVC 控制器发送请求并将所选视图放在正确的位置，我希望它不要重新加载。

如果我将 AngularJS 路由机制更改为 ng-route，那么它会按我的意愿工作，不会刷新页面，而是路由到选定的视图。

在 MVC 5 RouteConfig.cs 文件中，

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

        routes.MapRoute(
            name: "SpaUI",
            url: "SpaUI/*catchall",
            defaults: new  controller = "SpaUI", action = "Index", id = UrlParameter.Optional 
        );

        routes.MapRoute(
            name: "Default",
            url: "controller/action/id",
            defaults: new  controller = "SpaUI", action = "Index", id = UrlParameter.Optional 
        );

---

在 AngularJS 的 app.js 文件中，

app.config(['$stateProvider', '$provide', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $provide, $locationProvider, $urlRouterProvider) 

    $urlRouterProvider.otherwise('/Dashboard');

    $stateProvider
    .state("dashboard", 
        url: "/Dashboard",
        templateUrl: "AngularViews/dashboard.html"
    )

    .state("test", 
        url: "/Test",
        templateUrl: "AngularViews/test.html"
    );

    $locationProvider.html5Mode(true);
 ]);

---

在 _Layout.cshtml 文件中用于锚点；

 <a data-ui-sref="dashboard" title="Dashboard">

---

在同一 _Layout.cshtml 文件中用于视图占位符

 <div id="content" data-ui-view="" class="view-animate"></div>

---

如何在不重新加载页面的情况下让所有这些内容一起播放？ 任何想法表示赞赏:)

【参考方案1】：

它可能对你有帮助！

通过这样做：

去除“app”路由的复杂性，使用标准路由。 添加重写规则。 从布局中删除基本 href。

例如看起来像这样。

public static class RouteConfig

    public static void RegisterRoutes(RouteCollection routes)
    
        routes.IgnoreRoute("resource.axd/*pathInfo");
        routes.LowercaseUrls = true;
        routes.MapRoute("Default", "controller/action/id", new
        
            controller = "Home",
            action = "Index",
            id = UrlParameter.Optional
        ).RouteHandler = new DashRouteHandler();
    

和

public class DashRouteHandler : MvcRouteHandler

    /// <summary>
    ///     Custom route handler that removes any dashes from the route before handling it.
    /// </summary>
    /// <param name="requestContext">The context of the given (current) request.</param>
    /// <returns></returns>
    protected override IHttpHandler GetHttpHandler(RequestContext requestContext)
    
        var routeValues = requestContext.RouteData.Values;

        routeValues["action"] = routeValues["action"].UnDash();
        routeValues["controller"] = routeValues["controller"].UnDash();

        return base.GetHttpHandler(requestContext);
    

等等