title: Angular: Reloading/URL navigation reverts to default route
body: <p>I'm using Angular 1.3.10, ui-router 0.2.10, and Express 4.14.0 for a basic Reddit clone, and I'm having trouble with routing. </p>
  
  <p>My (abbreviated) Express routes:</p>
  
  <pre><code>router.get('/api/home', function (req, res, next) {
    res.render('index', {
      title: 'Meanit'
    });
  });
  
  router.get('*', function (req, res, next) {
    res.redirect('/api/home');
  });
  </code></pre>
  
  <p>My Angular state configuration:</p>
  
  <pre><code>app.config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: '/views/home.html',
          controller: 'MainCtrl',
          resolve: {
            postPromise: [
              'posts',
              function (posts) {
                return posts.getAllPosts();
              }
            ]
          }                      
        })
        .state('posts', {
          url: '/posts/{id}',
          templateUrl: '/views/posts.html',
          controller: 'PostsCtrl',
          resolve: {
            post: [
              '$stateParams',
              'posts',
              function ($stateParams, posts) {
                return posts.getPost($stateParams.id);
              }
            ]
          }
        })
        .state('register', {
          url: '/register',
          templateUrl: '/views/register.html',
          controller: 'AuthCtrl',
          onEnter: [
            '$state',
            'auth',
            function ($state, auth) {
              if (auth.isLoggedIn())
                $state.go('home')
            }
          ]
        })
        .state('login', {
          url: '/login',
          templateUrl: '/views/login.html',
          controller: 'AuthCtrl',
          onEnter: [
            '$state',
            'auth',
            function ($state, auth) {
              if (auth.isLoggedIn())
                $state.go('home')
            }
          ]
        });
  
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise('home');
    }
  ]);
  </code></pre>
  
  <p>My folder hierarchy looks like this:</p>
  
  <pre><code>meanit
    public
      js
        app.js (Angular)
    routes
      index.js (Express routes)
    views (Angular templates)
      index.html
      home.html
      posts.html
      register.html
      login.html
    server.js
  </code></pre>
  
  <p>All the routes work as intended, but when I reload the page while on one of the routes or navigate directly to the route URL (/posts/579d17934b0f5f6b2ff5c72c), I'm redirected first to /api/home through Express (intended, I think) and then to /home through Angular instead of the /posts/579d17934b0f5f6b2ff5c72c route (NOT intended). </p>
  
  <p>How do I force URL navigation/reloading to stay on the sub-route?</p>
  
  <p>(I've looked at <a href="https://stackoverflow.com/questions/30297941/angularjs-retain-state-after-page-reload?rq=1&amp;newreg=ca6847e7430148cfa716de5d5b5671f8">AngularJS. Retain state after page reload</a>, but I don't understand how to set up the URL parsing/how to adapt the code from the accepted answer to fit my project.)</p>