route - ¿Cómo usar el enrutamiento ASP.NET MVC y AngularJS?

select asp-for asp-items

Question

Estoy trabajando en una nueva aplicación ASP.NET MVC y AngularJS que pretende ser una colección de SPA. Estoy usando el concepto de áreas MVC para separar cada SPA individual, y luego estoy usando AngularJS dentro de cada área MVC para crear el SPA.

Como soy nuevo en AngularJS y no he podido encontrar una respuesta con respecto a la combinación de enrutamiento MVC y AngularJS, pensé en publicar mi pregunta aquí para ver si podía obtener ayuda.

Tengo la configuración de enrutamiento MVC estándar, que sirve cada área 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;
}

Esto funciona bien y me da URLs como:

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

Ahora, dentro de cada área de aplicación, estoy tratando de usar el enrutamiento AngularJS, también usando $ locationProvider.html5Mode (true); para obtener el enrutamiento del lado del cliente dentro de cada área, algo así como:

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

Aquí está mi fragmento de enrutamiento AngularJS para la Aplicación1:

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

Entonces, inicialmente, parece funcionar (al menos la URL parece correcta). Pero cuando empiezo a navegar entre áreas o vistas dentro de un área, o incluso si actualizo, algo se "pierde" y las cosas no funcionan. La URL aún se ve correcta, pero las vistas no se encuentran y no se cargan correctamente.

¿Alguna ayuda / orientación sobre cómo hacer que el enrutamiento de ASP.NET MVC y AngularJS funcione conjuntamente para ofrecerme el escenario descrito anteriormente?

¡¡¡Gracias!!!

Answer 1

Gracias por la respuesta, agbenyezi. Miré el artículo que me diste, pero solo me devolvió a donde estaba.

Sin embargo, pude resolverlo y ponerlo en funcionamiento. La respuesta resultó ser relativamente simple, pero llevó un tiempo y mucha búsqueda. De todos modos, dado que estoy usando áreas MVC, navego a una URL de http://servername/Application1/view[x] (donde Application1 es el controlador MVC (en el área) y view1, view2, view3, etc. son vistas de Angularjs ), la parte MVC de la aplicación general se estaba confundiendo y tratando de encontrar una acción llamada view [x] en el controlador Application1 (que no existe).

Entonces, en la clase AreaRegistration (donde está definiendo rutas específicas para el área), solo necesitaba agregar un tipo de ruta catch-all antes de cualquier ruta MVC predeterminada para forzarla siempre a la acción Index en el controlador de la aplicación. Algo como:

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

Ahora, cuando navego a http://servername/Application1/view[x] dirige al controlador Application1 MVC, acción Index, y luego Angularjs toma las rutas a las diferentes vistas, todo mientras tiene la construcción de enrutamiento HTML5 en la URL .

Espero que ayude a otros.

¡Gracias!