How to use ASP.NET MVC and AngularJS routing?

Question

Im working on a new application ASP.NET MVC and AngularJS, which is designed to collect SPA. Im uses the concept of MVC areas to separate each individual SPA, and then Im, using AngularJS within each MVC area to create a SPA.

Since Im new for AngularJS and havent was able to find the answer about combining MVC routing and AngularJS, I thought Id put my question here to find out if I could help.

I have a standard MVC routing setting that serves every MVC area.

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; } 

This works fine and gives me urls like:

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

Now, within each area of ​​the application, I am trying to use AngularJS routing, also using $ locationProvider.html5Mode (true); so that I get client-side routing in each area, for example:

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

Here is my AngularJS routing snippet for 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); }]); 

So this initially works (at least the url looks right). But, when I start navigating between regions or views within the region, or even if I update, something is “lost” and everything does not work. The url still looks correct, but the arent found and arent properties load correctly.

Any help / guidance on creating collaboration between ASP.NET MVC and AngularJS to give me the above script?

Thank!!!

Answer 1

Thanks for the answer, agbenyezi. I looked at the article you provided, but it only brought me back to where I was anyway.

However, I was able to figure it out and make it work. The answer turned out to be relatively simple, but it took some time and a lot of searching. In any case, since I am using MVC areas, going to the URL http://servername/Application1/view[x] (where Application1 is the MVC controller (in the area) and view1, view2, view3, etc., They are Angularjs views), the MVC part of the general application got confused and tried to find an action called view [x] in the Application1 controller (which does not exist).

Thus, in the AreaRegistration area (where it defines specific routes for this area), I just needed to add some catch-all route to any MVC routes by default, to always force it into the Index action on the application controller, Something like:

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

Now, when I go to http://servername/Application1/view[x] , it routes to the Application1 MVC controller, the Index action, and then Angularjs takes the routes to the various views, all of which have an HTML5 routing design in the URL.

Hope this helps others.

Thank!