Come utilizzare il routing di ASP.NET MVC e AngularJS?

Question

Sto lavorando a una nuova applicazione ASP.NET MVC e AngularJS destinata a essere una raccolta di SPA. Sto usando il concetto di aree MVC per separare ogni singola SPA, e quindi sto usando AngularJS all'interno di ciascuna area MVC per creare la SPA.

Dato che sono nuovo di AngularJS e non sono riuscito a trovare una risposta per quanto riguarda la combinazione di entrambi i percorsi MVC e AngularJS, ho pensato di pubblicare la mia domanda qui per vedere se potevo ottenere aiuto.

Ho la configurazione di routing MVC standard, che serve su ciascuna area MVC.

public static void RegisterRoutes(RouteCollection routes) 
    { 
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
     routes.MapMvcAttributeRoutes(); 
     routes.MapRoute(
      name: "Default", 
      url: "{controller}/{action}/{id}", 
      defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
     ); 
     routes.AppendTrailingSlash = true; 
    } 

Questo funziona bene e mi dà URL come:

http://servername/Application1/ 
http://servername/Application2/ 

Ora, all'interno di ogni area di applicazione, sto cercando di usare AngularJS routing, anche usando $ locationProvider.html5Mode (true); in modo che ottengo il percorso sul lato client all'interno di ciascuna area, qualcosa di simile:

http://servername/Application1/view1 
http://servername/Application1/view2 
http://servername/Application2/view1/view1a 
http://servername/Application2/view2/view2a 
http://servername/Application2/view3 

Ecco il mio AngularJS di routing frammento per Application1:

app1.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
    var viewBase = '/Areas/Application1/app/views/'; 
    $routeProvider 
     .when('/Application1/view1', { 
      controller: 'View1Controller', 
      templateUrl: viewBase + 'view1.html' 
     }) 
     .when('/Application2/view2', { 
      controller: 'View2Controller', 
      templateUrl: viewBase + 'view2.html' 
     }) 
     .otherwise({ redirectTo: '/Application1/view1' }); 
    $locationProvider.html5Mode(true); 
}]); 

Quindi, inizialmente, sembra funzionare (almeno il L'URL sembra corretto). Ma, quando inizio a navigare tra aree o viste all'interno di un'area, o anche se aggiorno, qualcosa viene "perso" e le cose non funzionano. L'URL sembra ancora corretto ma le viste non vengono trovate e non vengono caricate correttamente.

Qualsiasi aiuto/guida su come far funzionare il routing di ASP.NET MVC e AngularJS per fornirmi lo scenario sopra descritto?

Grazie !!!

Answer 1

Grazie per la risposta, agbenyezi. Ho guardato l'articolo che hai fornito ma mi ha riportato solo dove ero comunque.

Tuttavia, sono stato in grado di capirlo e farlo funzionare. La risposta si è rivelata relativamente semplice, ma ci sono voluti un po 'di tempo e un sacco di ricerche in giro. Comunque, dal momento che sto usando le aree MVC, navigando verso un URL di http://servername/Application1/view[x] (dove Application1 è il controller MVC (nell'area) e view1, view2, view3, ecc. Sono viste Angularjs), la parte MVC dell'applicazione complessiva stava diventando confuso e cercando di trovare un'azione denominata view [x] nel controller Application1 (che non esiste).

Quindi, nella classe AreaRegistration dell'area (dove si definiscono percorsi specifici per l'area), ho solo dovuto aggiungere un tipo di percorso catch-all prima di qualsiasi route MVC predefinita per forzarlo sempre all'azione Index sull'applicazione controller. Qualcosa di simile:

 // Route override to work with Angularjs and HTML5 routing 
     context.MapRoute(
      name: "Application1Override", 
      url: "Application1/{*.}", 
      defaults: new { controller = "Application1", action = "Index" } 
     ); 

Ora, quando ci si dirige verso http://servername/Application1/view[x] percorsi al controller Application1 MVC, l'azione indice e quindi Angularjs prende il sopravvento rotte per i diversi punti di vista, il tutto pur avendo il costrutto di routing HTML5 nell'URL.

La speranza che aiuta gli altri.

Grazie!