web-dev-qa-db-fra.com

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.

Depuis que je suis nouveau sur AngularJS et que je n’ai pas pu trouver de réponse concernant la combinaison du routage MVC et AngularJS, j’ai pensé poser ma question ici pour voir si je pouvais obtenir de l’aide.

J'ai la configuration de routage MVC standard, qui dessert chaque zone 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;
    }

Cela fonctionne bien et me donne des URL comme:

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

Dans chaque domaine d’application, j’essaie d’utiliser le routage AngularJS, en utilisant également $ locationProvider.html5Mode (true); de sorte que je reçois le routage côté client dans chaque zone, quelque chose comme:

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). Cependant, 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/conseils sur la façon de faire en sorte que le routage ASP.NET MVC et AngularJS fonctionnent ensemble pour me donner le scénario décrit ci-dessus?

Merci!!!

asp.net-mvcangularjsangularjs-routing
51
lmttag

Merci pour la réponse, agbenyezi. J'ai jeté un coup d'œil à l'article que vous avez fourni, mais cela ne m'a fait que revenir 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 un certain temps et beaucoup de recherches. Quoi qu’il en soit, comme j’utilise les zones MVC, je navigue vers une URL de 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 tentait de trouver une action nommée view [x] dans le contrôleur Application1 (qui n'existe pas).

Ainsi, dans la classe AreaRegistration de la zone (où elle définit des routes spécifiques pour la zone), je devais simplement ajouter une sorte de route fourre-tout avant toute route MVC par défaut pour toujours la forcer à l'action Index du 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, quand je navigue vers http://servername/Application1/view[x] il route vers le contrôleur Application1 MVC, action Index, puis Angularjs prend en charge les itinéraires vers les différentes vues, tout en ayant la construction de routage HTML5 dans l'URL.

J'espère que cela aide les autres.

Merci!

58
lmttag