Deep linking to AngularJS app doesn't work consistently... what's up?

Question

I have an AngularJS app that uses ui.route. This is hosted within ASP.NET MVC, which is intended to only serve a single View that points to this app and ideally links into it as needed. My state provider looks like the following:

$stateProvider
  .state('root', {
    url: '',
    abstract: true,
    templateUrl: 'root.html'
  })
  .state('internal', {
    url: '/internal/',
    abstract: true,
    templateUrl: 'root.html'
  })    
  .state('root.home', {
    url: '/',
    templateUrl: 'rootHome.html'
  })
  .state('root.about', {
    url: '/about',
    templateUrl: 'rootAbout.html'
  })
  .state('internal.home', {
    url: '/internal/home',
    templateUrl: 'internalHome.html'
  });

Within my app.js, I also specify that html5Mode is set to true and have this router provider in there (though it might be unnecessary):

$locationProvider.html5Mode(true);
$urlRouterProvider.when("", "/");

My RouteConfig.cs looks like the following:

public static void RegisterRoutes(RouteCollection routes)
{
  routes.MapRoute(
    name: "Home",
    url: "home",
    defaults: new { controller = "Home", action = "Index" });

  routes.MapRoute(
    name: "About",
    url: "about",
    defaults: new { controller = "Home", action = "Index" });

  routes.MapRoutes(
    name: "InternalHome",
    url: "internal/home",
    defaults: new { controller = "Home", action = "Index" });

  routes.MapRoutes(
    name: "Root",
    url: "",
    defaults: new { controller = "Home", action = "Index" });
}

Now, if I visit http://localhost:123/ by typing it into my browser URL bar, I will get to the rootHome in my app (within the root.html file) just as I expect. If I visit http://localhost:123/about the browser URL bar, I'll find myself on the About page as I expect.

If I visit http://localhost:123/internal/home, I'll find myself at this link, but looking at a blank page. I can put a breakpoint in Chrome on the $stateChangeStart event it won't even get hit.

If I visit http://localhost:123/nonexistantpage, I'll find myself on a blank page here too.

First, how do I set up my routes so that if I type to an address that isn't a child from the root abstract state, it will still show the proper state? Is it related to the parents at all or is there something else I'm missing?

Second, how can I capture all those routes that I haven't explicitly given (at least in terms of the first and second arguments of the path after the host (e.g. /internal/home) and redirect all of those to the Home controller and the Index action, but in a way that it points to the root on the Angular application?

Thanks!

Answer 1

If you try going to internal/internal/home you will arrive at the expected route, here is why, you have the internal state:

 .state('internal', {
    url: '/internal/',
    abstract: true,
    templateUrl: 'root.html'
  })    

Which has a url of /internal, now internal.home, a child state of internal, should not be declaring the /internal bit in it's url again, ui.router realises form the internal prefix in inernal.home that this is a child state of internal, and will automatically append /internal to the child states URL, so your internal.home state should have the following url:

 .state('internal.home', {
    url: '/home',
    templateUrl: 'internalHome.html'
  })