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

回答

相关问题