Comment utiliser le routage ASP.NET MVC et AngularJS?

Je travaille sur une nouvelle application ASP.NET MVC et AngularJS destinée à constituer une collection de SPA. J’utilise le concept de zones MVC pour séparer chaque SPA, puis j’utilise AngularJS dans chaque zone MVC pour créer le SPA.

Étant donné que je suis nouveau sur AngularJS et que je n’ai pas été en mesure de trouver une réponse concernant la combinaison du routage MVC et AngularJS, j’ai pensé poster ma question pour voir si je pouvais obtenir de l’aide.

J’ai la configuration de routage MVC standard, qui sert chaque zone MVC.

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

Cela fonctionne bien et me donne des URL comme:

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

Maintenant, dans chaque domaine d’application, j’essaie d’utiliser le routage AngularJS, en utilisant également $ locationProvider.html5Mode (true); de sorte que j’obtiens le routage côté client dans chaque domaine, par exemple:

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

Voici mon extrait de routage AngularJS pour 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); }]);

Donc, au début, cela semble fonctionner (au moins, l’URL semble correcte). Mais lorsque je commence à naviguer entre des zones ou des vues dans une zone, ou même si je rafraîchit, quelque chose est «perdu» et les choses ne fonctionnent pas. L’URL semble toujours correcte mais les vues ne sont pas trouvées et ne sont pas chargées correctement.

Toute aide / conseil sur la façon de faire fonctionner ensemble le routage ASP.NET MVC et AngularJS pour me donner le scénario décrit ci-dessus?

Merci!!!

Merci pour la réponse, agbenyezi. J’ai regardé l’article que vous m’aviez fourni mais cela ne m’a ramené que là où j’étais.

Cependant, j’ai pu le comprendre et le faire fonctionner. La réponse s’est avérée relativement simple, mais il a fallu du temps et beaucoup de recherche. Quoi qu’il en soit, depuis que j’utilise les zones MVC, naviguer vers une URL http://servername/Application1/view[x] (où Application1 est le contrôleur MVC (dans la zone) et view1, view2, view3, etc. sont des vues Angularjs ), la partie MVC de l’application globale devenait confuse et essayait de trouver une action nommée view [x] dans le contrôleur Application1 (qui n’existe pas).

Donc, dans la classe AreaRegistration de la zone (où il définit des routes spécifiques pour la zone), je devais simplement append une sorte de route fourre-tout avant toute route MVC par défaut pour la forcer toujours à l’action Index sur le contrôleur d’application. Quelque chose comme:

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

Maintenant, lorsque je navigue vers http://servername/Application1/view[x] il achemine vers le contrôleur MVC Application1, l’action Index, puis Angularjs reprend les routes vers les différentes vues, tout en ayant la structure de routage HTML5 dans l’URL. .

Espérons que cela aide les autres.

Merci!