UI-Router Let URL Pass when not defined in a state

UPDATED: See update at the bottom.

From your comments I'm assuming the following:

• Your Angular app lives at the root of the domain foo.com/
• You are using HTML5 Mode so your app responds to "natural" urls like foo.com/thing1 and foo.com/thing2
• You have some other app (not your main Angular app) that lives at foo.com/admin

Unfortunately, you can't have a url "pass through" like you want it to. :(

Your options are:

• Move your Angular app into a subdirectory like foo.com/app. Then your app will respond to URLs like foo.com/app/thing1 and foo.com/app/thing2.
  • This is really the only choice if you want to use HTML5 routing mode to get "natural" looking urls.
• Turn off HTML5 routing mode so that your Angular app lives at http://foo.com/#/ and responds to urls like foo.com/#/thing1 and foo.com/#/thing2. Then when your user visits foo.com/admin the url will fall through to the server and get whatever app is served there.

NOTE: This applies to both regular Angular routing using $routeProvider as well as using Angular-UI's $stateProvider.

UPDATE:

In order to get this to work you have to get the url change to happen outstide of Angular. Here's one method that will work but it has quite a smell to it IMO and will likely be quite fragile and difficult to maintain.

angular.module('myApp', [])
   .run(function($rootScope, $window){
      $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl){
        // You'll probably want to just watch the path and build the full url
        // based on your environment, but this will get you started.
        if(newUrl === 'http://127.0.0.1/admin') {
          // prevent Angular from continuing with the location change
          event.preventDefault();
          // $window is an Angular wrapper around the global ``window`` object.
          // This causes the browser to go to the new url outside of Angular
          $window.location.href = newUrl;
        }
      });
});

Of course for this to work your server must be setup to serve some other app at the /admin path. Also, when your user navigates back to your Angular app it will lose all state as the Angular app will start up fresh again. Plus, your user will have to navigate back to the root of your Angular app. If the user goes from foo.com/ to foo.com/thing1 to foo.com/admin they will need to navigate back to foo.com/ to get back into your Angular app.