AngularJS - ui-router - MVC 5 - html5mode

Question

Tôi đang cố gắng tạo SPA mini với AngularJS và MVC 5. Bên cạnh đó, tôi muốn sử dụng ui-router plugin cho AngularJS thay vì ng-tuyến đường và muốn kích hoạt html5mode.

Vấn đề của tôi là, bất cứ khi nào tôi nhấp vào phần tử neo, nó làm mới trang và gửi yêu cầu tới bộ điều khiển ASP.NET MVC và đặt chế độ xem được chọn vào đúng vị trí, tôi không muốn tải lại.

Nếu tôi thay đổi cơ chế định tuyến AngularJS thành ng-route, thì nó hoạt động như tôi muốn, không làm mới trang và các tuyến đến chế độ xem đã chọn.

Trong MVC 5 RouteConfig.cs tập tin,

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

---

Trong app.js tập tin cho 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); 
}]); 

---

Trong _Layout.cshtml tập tin fo r neo;

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

---

Trong cùng _Layout.cshtml tập tin để xem placeholder

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

---

Làm thế nào tôi có thể làm tất cả những điều chơi với nhau mà không cần tải lại trang? Bất kỳ ý tưởng nào được đánh giá cao :)

Answer 1

Nó có thể giúp bạn !!

Bằng cách này:

• Tháo "ứng dụng" phức tạp tuyến đường, và sử dụng các tuyến đường chuẩn.
• Thêm quy tắc ghi lại.
• Xóa href cơ sở khỏi bố cục.

Ví dụ như thế này.

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

và

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

, vv