Как пользоваться ASP.NET MVC и AngularJS маршрутизации?

Я работаю над новым ASP.NET MVC и AngularJS приложение, которое предназначено, чтобы быть коллекцией спа. Я использую концепцию областей MVC для разделения каждого отдельного СПА, а затем я использую AngularJS в каждой области MVC для создания СПА.

поскольку я новичок в AngularJS и не смог найти ответ относительно объединения маршрутизации MVC и AngularJS, я подумал, что отправлю свой вопрос здесь, чтобы узнать, могу ли я получить некоторую помощь.

у меня есть стандартный MVC настройка маршрутизации, которая обслуживает каждую область 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;
    }

это прекрасно работает и дает мне URL-адреса, такие как:

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

теперь, в каждой области приложения, я пытаюсь использовать AngularJS маршрутизации, а также с помощью $locationProvider.html5Mode (true); так что я получаю маршрутизацию на стороне клиента в каждой области, что-то вроде:

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

вот мой фрагмент маршрутизации AngularJS для 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);
}]);

Итак, изначально, похоже, это работает (по крайней мере, URL выглядит правильный.) Но, когда я начинаю перемещаться между областями или представлениями в пределах области, или даже если я обновляю, что-то "теряется", и все не работает. URL-адрес по-прежнему выглядит правильно, но представления не найдены и не загружаются правильно.

любая помощь / руководство о том, как сделать ASP.NET MVC и AngularJS routing работают вместе, чтобы дать мне сценарий, описанный выше?

спасибо!!!

1 51
asp.net-mvc angularjs angularjs-routing

1 ответ:

Спасибо за ответ, agbenyezi. Я посмотрел на статью, которую вы предоставили, но это только вернуло меня туда, где я был в любом случае.

тем не менее, я смог понять это и заставить его работать. Ответ оказался относительно простым, но потребовалось некоторое время и много поисков вокруг. В любом случае, поскольку я использую области MVC, переход к URL-адресу http://servername/Application1/view[x] (где Application1-это контроллер MVC (в области) и view1, view2, view3 и т. д. являются AngularJS представления), часть MVC общее приложение запуталось и пытается найти действие с именем view[x] в контроллере Application1 (которого не существует).

Итак, в классе AreaRegistration области (где он определяет конкретные маршруты для области) мне просто нужно было добавить какой-то маршрут catch-all перед любыми маршрутами MVC по умолчанию, чтобы всегда заставлять его индексировать действие на контроллере приложения. Что-то вроде:

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

Теперь, когда я перехожу к http://servername/Application1/view[x] это маршруты на Контроллер Application1 MVC, действие индекса, а затем Angularjs берет на себя маршруты к различным представлениям, все время имея конструкцию маршрутизации HTML5 в URL.

надеюсь, что это помогает другим.

спасибо!

58