tag route net mvc for asp asp.net-mvc angularjs angularjs-routing

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



select asp-for asp-items (1)

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!!!


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!