AngularJS - ui-router - MVC 5 - html5mode

Question

我正在嘗試使用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>

---

如何在不重新加載頁面的情況下將所有這些內容組合在一起？ 任何想法都贊賞:)

Answer 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);
    }
}

等等