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

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

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

У меня есть стандартная настройка маршрутизации 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-адрес по-прежнему выглядит корректно, но свойства arent found и arent загружаются правильно.

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

Спасибо!!!

Ответ 1

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

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

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

        // 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, действие Index, а затем Angularjs берет маршруты к различным представлениям, причем все они имеют конструкцию маршрутизации HTML5 в URL.

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

Спасибо!