title: How to use ASP.NET MVC and AngularJS routing?
body: <p>I’m working on a new ASP.NET MVC and AngularJS application that is intended to be a collection of SPAs.  I’m using the MVC areas concept to separate each individual SPA, and then I’m using AngularJS within each MVC area to create the SPA.</p>
  
  <p>Since I’m new to AngularJS and haven’t been able to find an answer regarding combining both MVC and AngularJS routing, I thought I’d post my question here to see if I could get some help.</p>
  
  <p>I have the standard MVC routing setup, which serves up each MVC area.</p>
  
  <pre><code>    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;
      }
  </code></pre>
  
  <p>This works fine and gives me URLs like:</p>
  
  <pre><code>http://servername/Application1/
  http://servername/Application2/
  </code></pre>
  
  <p>Now, within each application area, I’m trying to use AngularJS routing, also using $locationProvider.html5Mode(true); so that I get the client-side routing within each area, something like:</p>
  
  <pre><code>http://servername/Application1/view1
  http://servername/Application1/view2
  http://servername/Application2/view1/view1a
  http://servername/Application2/view2/view2a
  http://servername/Application2/view3
  </code></pre>
  
  <p>Here’s my AngularJS routing snippet for Application1:</p>
  
  <pre><code>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);
  }]);
  </code></pre>
  
  <p>So, initially, it seems to work (at least the URL looks correct).  But, when I start navigating between areas or views within an area, or even if I refresh, something gets “lost” and things don’t work.  The URL still looks correct but views aren’t found and aren’t getting loaded correctly.</p>
  
  <p>Any help/guidance on how to make ASP.NET MVC and AngularJS routing work together to give me the scenario described above?</p>
  
  <p>Thanks!!!</p>