AngularJS - ui-router - MVC 5 - html5mode

Question

Sto cercando di creare una mini SPA con AngularJS e MVC 5. In aggiunta a ciò, voglio utilizzare il plugin per il router per AngularJS invece di ng-route e voglio abilitare html5mode.

Il mio problema è che ogni volta che clicco su un elemento di ancoraggio, aggiorna la pagina e invia la richiesta al controller ASP.NET MVC e mette la vista selezionata nel posto giusto, voglio che non si ricarichi.

Se cambio il meccanismo di routing AngularJS su ng-route, allora funziona come volevo, non aggiorna la pagina e instrada alla vista selezionata.

In MVC 5 RouteConfig.cs di file,

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

---

In app.js programma per 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); 
}]); 

---

In _Layout.cshtml file per ancore;

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

---

Nella stessa _Layout.cshtml di file per la visualizzazione segnaposto

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

---

Come posso fare tutte queste cose giocano insieme senza ricaricare la pagina? Qualche idea è apprezzata :)

Answer 1

Potrebbe aiutarti !!

In questo modo:

• Rimuovere la "app" percorso complessità, e utilizzare il percorso standard.
• Aggiungere la regola di riscrittura.
• Rimuovere la base href dal layout.

Ad esempio, assomiglia a questo.

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

e

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

ecc