Como usar o roteamento ASP.NET MVC e AngularJS?

Estou trabalhando em um novo aplicativo ASP.NET MVC e AngularJS que se destina a ser uma coleção de SPAs. Estou usando o conceito de áreas do MVC para separar cada SPA individual e, em seguida, estou usando o AngularJS dentro de cada área do MVC para criar o SPA.

Como sou novo no AngularJS e não consegui encontrar uma resposta sobre a combinação de roteamento MVC e AngularJS, pensei em postar minha pergunta aqui para ver se poderia obter alguma ajuda.

Eu tenho a configuração de roteamento MVC padrão, que serve para 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; } 

Isso funciona bem e me fornece URLs como:

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

Agora, dentro de cada área de aplicação, estou tentando usar o roteamento AngularJS, também usando $ locationProvider.html5Mode (true); para que eu obtenha o roteamento do lado do cliente dentro de cada área, algo como:

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

Aqui está o meu trecho de roteamento AngularJS para o 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); }]); 

Então, inicialmente, parece funcionar (pelo menos a URL parece correta). Mas, quando eu começo a navegar entre áreas ou pontos de vista dentro de uma área, ou mesmo se eu atualizar, algo fica “perdido” e as coisas não funcionam. O URL ainda parece correto, mas as visualizações não são encontradas e não estão sendo carregadas corretamente.

Qualquer ajuda / orientação sobre como fazer o roteamento ASP.NET MVC e AngularJS trabalhar juntos para me dar o cenário descrito acima?

Obrigado!!!

Obrigado pela resposta, agbenyezi. Eu olhei para o artigo que você forneceu, mas só me levou de volta para onde eu estava.

No entanto, eu fui capaz de descobrir e fazer funcionar. A resposta acabou sendo relativamente simples, mas demorou algum tempo e muita pesquisa ao redor. De qualquer forma, desde que eu estou usando áreas MVC, navegando para uma URL de http://servername/Application1/view[x] (onde Application1 é o controlador MVC (na área) e view1, view2, view3, etc. são visualizações Angularjs ), a parte MVC do aplicativo em geral estava ficando confusa e tentando localizar uma ação chamada view [x] no controlador Application1 (que não existe).

Portanto, na class AreaRegistration da área (onde está definindo rotas específicas para a área), eu só precisava adicionar uma espécie de rota catch-all antes de qualquer rota MVC padrão para forçá-la sempre à ação Index no Application controller. Algo como:

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

Agora, quando eu navego para http://servername/Application1/view[x] ele roteia para o controlador Application1 MVC, ação Índice e, em seguida, Angularjs assume as rotas para as diferentes visualizações, tudo isso tendo a construção de roteamento HTML5 na URL .

Espero que ajude os outros.

Obrigado!