AngularJS - ui路由器 - MVC 5 - html5mode

我想創建一個迷你SPA與AngularJS和MVC 5。除此之外，我想使用ui-router插件而不是ng-route，並且想要啓用html5mode。AngularJS - ui路由器 - MVC 5 - 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 } 
     );

在app.js文件AngularJS，

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文件fo船錨;

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

在同一_Layout.cshtml文件視圖佔位

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

我怎樣才能使所有的這些東西一起玩無需重新加載頁面？任何想法都讚賞:)

來源

2014-10-26 Osman GUMUS

它可能會幫助你！

通過這樣做：

刪除「應用程序」路線複雜度，並使用標準的路線。
添加重寫規則。
從佈局中刪除基礎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); 
    } 
}

等

來源

2015-01-14 09:46:32

AngularJS - ui路由器 - MVC 5 - html5mode

回答

相關問題