title: AngularJS Ui-Router with ASP.Net MVC RouteConfig. How does it work?
body: <p>I'm reading <a href="http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P" rel="noreferrer">this article</a> and I still can't get around my head on how Angular's UI Router is working with ASP.Net routing.</p>
  
  <p>Can someone explain in an easy and clear way, the full life cycle from when a URL is typed into the browser manually (ex: <a href="http://myapp/stateOne" rel="noreferrer">http://myapp/stateOne</a> ). Who handles the request, ASP.Net? If not, how does angular intercept a URL request if the page is being served by ASP before it can step in? And when does AngularJS come in with the state provider?</p>
  
  <p>I'm very confused on this and can't find much on the idea.</p>
  
  <p>In addition to the question, I have a couple of other things I can't understand. I'm writing an app where:</p>
  
  <ul>
  <li>Home/Index.cshtml -> Landing page serves content based on states (ie: it has a ui-view="content", which should in turn serve Categories/Index.cshtml in it, for example). So, how would I go around setting the "Default state" so that navigating to index would load the home page and the ng-view content with default categories in it?</li>
  <li>Login/Index.cshtml -> A modal form which I'm hiding and showing using modal.show() and modal.hide(). Served from a ui-view. This is working. However, if the user types <a href="http://myapp/login" rel="noreferrer">http://myapp/login</a> what should I do? Can I somehow intercept the request and show the index page with the open modal form in it? or even better, the current page and just open up the modal form? (ie: Is it possible to set a state without a templateURL)?</li>
  <li>What if I have a page which has multiple lists in it? I've seen people set the state to state.childState for instance, but what if I need to load multiple lists (and therefore, multiple states-> views) at once?</li>
  </ul>
  
  <p><strong>Edit</strong>:
  Special attention to this part, which uses black magic to cause <code>routeTwo/6</code> to load the index page with the routeTwo page loaded in a UI-View if I'm understanding correctly.</p>
  
  <blockquote>
    <p>HTML5 mode is working, but only in a very superficial way. A refresh
    of the page is sending the full URL to the server (as we have removed
    the scotch) which doesn't know what to do. We can fix this by
    reconfiguring MVC's RouteCollection properly. We need to be explicit
    about the route for each of our views, and then add a catch-all which
    sends all other URL's to our landing page, to be handled by Angular.</p>
    
    <p>Update the RegisterRoutes method inside App_Start => RouteConfig.cs
    like so:</p>
  </blockquote>
  
  <pre><code>public static void RegisterRoutes(RouteCollection routes)
  {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
      routes.MapRoute(
          name: "routeOne",
          url: "routesDemo/One",
          defaults: new { controller = "RoutesDemo", action = "One" });
  
      routes.MapRoute(
          name: "routeTwo",
          url: "routesDemo/Two/{donuts}",
          defaults: new { controller = "RoutesDemo", action = "Two", donuts = UrlParameter.Optional });
  
      routes.MapRoute(
          name: "routeThree",
          url: "routesDemo/Three",
          defaults: new { controller = "RoutesDemo", action = "Three" });
  
      routes.MapRoute(
          name: "login",
          url: "Account/Login",
          defaults: new { controller = "Account", action = "Login" });
  
      routes.MapRoute(
          name: "register",
          url: "Account/Register",
          defaults: new { controller = "Account", action = "Register" });
  
      routes.MapRoute(
          name: "Default",
          url: "{*url}",
          defaults: new { controller = "Home", action = "Index" });
  }
  </code></pre>