AngularJS - ui-router - MVC 5 - html5mode

Question

Я пытаюсь создать мини-SPA с AngularJS и MVC 5. В дополнение к этому, я хочу использовать ui-router плагин для AngularJS вместо 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 } 
     ); 

---

В 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 файл для r анкеры;

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

---

В то же _Layout.cshtml файл для просмотра заполнителем

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

---

Как я могу сделать все эти вещи играют вместе без перезагрузки страницы? Любые идеи оцениваются :)

Answer 1

Это может помочь вам!

Делая это:

• Удалить «приложение» сложность маршрута, а также использовать стандартный маршрут.
• Добавить правило перезаписи.
• Снимите базовую ссылку с макета.

Например, посмотрите.

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

т.д.