title: AngularJS: can't get html5 mode urls with ui-route $state
body: <p>I'm using <a href="https://github.com/angular-ui/ui-router" rel="noreferrer">ui-router</a> for state management but I think I'm having trouble with my .htaccess rewrite rules. All my states worked when using /#/account style urls. Now I've enabled html5 mode but my app isn't rendering as it was before. It seems to load my index.html and all my js and css files, etc. but not actually initialise any states.</p>
  
  <p>Here is my folder structure:</p>
  
  <pre><code>root/
      app/
          components/
              angular/
              ...
          images/
          scripts/ 
              controllers/
              directives/
              ...
              app.js       
          styles/
          views/
          .htaccess
          ...
  </code></pre>
  
  <p>My vhosts DocumentRoot points to my <code>app/</code></p>
  
  <p>Here is my app.js with my states:</p>
  
  <pre><code>'use strict';
  
  angular.module('appointeddPortalApp',  ['ngResource', 'ui.state', 'ui.compat', 'fundoo.services', 'ui.date', 'ngCookies'])
  .config(function ($stateProvider, $routeProvider, $locationProvider, $httpProvider) {
  
      var access = routingConfig.accessLevels;
  
      delete $httpProvider.defaults.headers.common["X-Requested-With"];
      $httpProvider.defaults.useXDomain = true;
      $locationProvider.html5Mode(true);
  
      $stateProvider
      .state('root', {
          abstract: true,
          url: '',
          views: {
              'header': {
                  templateUrl: 'views/partials/header.html'
              },
              'search': {
                  templateUrl: 'views/partials/search.html',
                  controller: 'SearchCtrl'
              },
              'main': {
                  templateUrl: 'views/main.html',
                  controller: 'MainCtrl'
              },
              'footer': {
                  templateUrl: 'views/partials/footer.html'
              },
          },
      })
      .state('root.home', {
          url: '',
          views: {
              'content': {
                  templateUrl: 'views/home/index.html',
                  controller: 'MainCtrl',
              }
          },
          access: access.anon
      })
      .state('root.about', {
          url: '/about',
          parent: 'root',
          views: {
              'content': {
                  templateUrl: 'views/about.html',
                  controller: 'StaticCtrl'
              },
              'search@': {}
          },
          access: access.anon
      })
      .state('root.search', {
          url: '/search/:city/:category',
          views: {
              'content': {
                  templateUrl: 'views/search.html',
                  controller: 'SearchCtrl'
              }
          },
          access: access.anon
      })
      .state('root.salons_profile', {
          url: '/salons/{id}',
          views: {
              'content': {
                  templateUrl: 'views/salons.profile.html',
                  controller: 'SalonCtrl',
              },
              'search@': {}
          },
          access: access.anon
      })
      .state('root.account', {
          url: '/account',
          abstract: true,
          views: {
              'content': {
                  templateUrl: 'views/user/account.html',
                  controller: 'AccountCtrl'
              }
          },
      })
      .state('root.account.info', {
          url: '',
          views: {
              'account_head': {
                  templateUrl: 'views/user/account.head.html',
              },
              'account_body': {
                  templateUrl: 'views/user/account.my_appointedd.html',
              },
          },
          menus: {
              'account': {
                  identifier: 'my_appointedd',
                  class: 'active'
              }
          },
          access: access.user
      })
      .state('root.account.appointments', {
          url: '/appointments',
          views: {
              'account_head': {
                  templateUrl: 'views/user/account.head.html',
              },
              'account_body': {
                  templateUrl: 'views/user/account.appointments.html',
              },
          },
          menus: {
              'account': {
                  identifier: 'appointments',
                  class: 'active'
              }
          },
          access: access.user
      })
      .state('root.account.details', {
          abstract: true,
          views: {
              'account_head': {
                  templateUrl: 'views/user/account.head.html',
              },
              'account_body': {
                  templateUrl: 'views/user/account.details.html',
              },
          },
          access: access.user
      })
      .state('root.account.details.account', {
          url: '/details',
          views: {
              'right': {
                  templateUrl: 'views/user/account.details.account.html',
              },
          },
          menus: {
              'account': {
                  identifier: 'details',
                  class: 'active'
              },
              'settings': {
                  identifier: 'account',
                  class: 'active'
              }
          },
          access: access.user
      })
      .state('root.account.details.profile', {
          url: '/profile',
          views: {
              'right': {
                  templateUrl: 'views/user/account.details.profile.html',
              },
          },
          menus: {
              'account': {
                  identifier: 'details',
                  class: 'active'
              },
              'settings': {
                  identifier: 'profile',
                  class: 'active'
              }
          },
          access: access.user
      });
  
  
  })
  .run( [ '$location', '$state', '$stateParams', '$rootScope', '$cookies', 'Auth', function( $location, $state, $stateParams, $rootScope, $cookies, Auth){
  
      $rootScope.client_id = '51a741eb3152c3ae7e000103';
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
      $rootScope.$cookies = $cookies;
  
      $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
          if (!Auth.authorize(toState.access)) {
              if(Auth.isLoggedIn()) $state.transitionTo('root.account');
              else                  $state.transitionTo('root.home');
          }
      });
  </code></pre>
  
  <p>Here is my rewrite code that sits in .htaccess in /app. I think this is might be wrong.</p>
  
  <pre><code>&lt;IfModule mod_rewrite.c&gt;
    Options +FollowSymLinks 
    RewriteEngine On 
    RewriteBase / 
    RewriteRule ^(components|images|scripts|styles|views)($|/) - [L]
    RewriteRule ^(.*)$ index.html [L]
  &lt;/IfModule&gt;
  </code></pre>