title: AngularJS: How to remove #!/ (bang prefix) from URL?
body: <p>I already have done <code>$locationProvider.html5Mode(true);</code> but it is not working. Whenever I access <code>http://example.com</code> it goes to <code>http://example.com/#!/</code>. Code is given here:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ui.router', 'ui.bootstrap']);
  
  myApp.config(['$qProvider', function ($qProvider) {
      $qProvider.errorOnUnhandledRejections(false);
  }]);
  
  myApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
      // For any unmatched url, redirect to EXTRANET home page
      $urlRouterProvider.otherwise('/');
      // Now set up the states
      $stateProvider
      .state('listrole', {
      url: "/list-role",
      views: {
        'main-content': {
          templateUrl: rootUrl+ 'views/main.html',
          controller: 'rolesCtrl'
        }
      }
      })
      $locationProvider.hashPrefix('');
      $locationProvider.html5Mode(true);
  });
  </code></pre>
  
  <p><strong>Update</strong>
  I added <code>$locationProvider.hashPrefix('');</code> as well but no difference. Also let me tell you that I am enter address in address bar and hitting enter. Am I doing right? how will browser find that it does not need to refresh from server?</p>
  
  <p><strong>Update #2</strong></p>
  
  <p>Ideally I want URL as <code>http://example.com</code> and <code>http://example.com/#!/list-role</code> to <code>http://example.com/list-role</code>. Right now <code>http://example.com/list-role</code> gives 404</p>
  
  <p><strong>Update #3</strong></p>
  
  <p>I am using nginx proxy, if that helps.</p>
  
  <p><strong>Update #4</strong></p>
  
  <p>Erased Cache. Now I can see <code>http://example.com</code> instead of <code>http://example.com/#!</code> but still <code>http://example.com/list-role</code> gives 404</p>