type in routes on angular-ui-router

Question

I'm playing around with this demo of the angular-ui-router using a WordPress site to host the javascript file (which isn't intended by the app author but demonstrates my problem nonetheless). The angular app has a /login route, which, if I click the link to on the homepage, loads the login template of the angular app. However, if I type in the url http://localhost:8888/login it shows the WordPress login page i.e. it's not handled by the angular-ui-router, which makes it kind of useless/unpredictable as a router.

Question: Is there a way to get angular-ui-router to handle a route that's typed in the browser, or is there an angular router that will handle typed in routes in the browser?

Background: I was going to use angular as a front-end for a WordPress site and it's pretty important that it be able to handle routes dropped in the browser, for example, for http:localhost:8888/2015/10/10/my-wordpress-post

This is the code that handles the login route

'use strict'; 
2 

3 routes.$inject = ['$stateProvider']; 
4 

5 export default function routes($stateProvider) { 
6   $stateProvider 
7     .state('login', { 
8       url: '/login', 
9       template: require('./login.html'), 
10       controller: 'LoginController', 
11       controllerAs: 'login' 
12     }); 
13 } 

Answer 1

The problem is that your server is listening for url-based requests. If you're on an Angular page and click a link, you're using HTML5 push-state. If you type in a URL, you're not, your server handles it before the angular ever does. The easiest solution would be to install the Wordpress app in a subdirectory, and use the root to serve an Angular app.