81

I'm using the angular-ui-router library and I have a problem with URLs.

I have the following code:

app.js:

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html:

<a href="#/state">STATE</a>

This works, but when I remove '#' from the <a> tag this doesn't work.

How can I delete the '#' sign from the URL?

A1rPun
  • 16,287
  • 7
  • 57
  • 90
Niezborala
  • 1,857
  • 1
  • 18
  • 27

3 Answers3

121

You need to enable HTML5Mode if you want navigation without hash tags:

app.config(["$locationProvider", function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

You will also need to tell angular the root URL of your app by adding the following code to the <head> of your HTML file:

<base href="/">

Be aware that support for HTML5 mode depends on the browser. For those who don't support the History API, Angular will fallback to hashbang.

Jamie Street
  • 1,527
  • 3
  • 14
  • 32
Simon Belanger
  • 14,752
  • 3
  • 41
  • 35
  • 5
    And i have another question. When I paste URL www.example.com/state, I don't have page with expected content. Can I make something with this? – Niezborala Feb 28 '14 at 18:45
  • 1
    It depends on your server. You need to show the same view as you would from the angular app root. AngularJs is smart enough to look at the URL and show the appropriate View / Controller. For example, if you usually go on to your app from /angular, you need to handle the case where going to /angular/state doesn't actually map to a real URL but is in fact a route in /angular and show the same view. – Simon Belanger Feb 28 '14 at 18:51
  • 37
    Also don't forget to put a `` tag inside index.html `` section – Saqueib Oct 22 '15 at 09:52
  • 8
    Or you can configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode(): $locationProvider.html5Mode({ enabled: true, requireBase: false }); See: https://docs.angularjs.org/error/$location/nobase – sigmapi13 Nov 07 '15 at 16:16
  • @SimonBelanger i am using mvc4 and in that i have created areas for user specific models controller and view my my landing page is in Areas/Admin/View/Home/Index which uses _Layout as master template how should i write url in base href ? – 3gth May 24 '16 at 11:13
  • For refresh loading issue add the .htaccess file in your root folder. – Abijith Ajayan Jul 20 '18 at 08:44
  • The question uses `app.config(function ($stateProvider, $urlRouterProvider)` and the accepted answer uses `app.config(["$locationProvider", function($locationProvider)` - is that in addition to, or instead of? – Mawg says reinstate Monica Dec 02 '20 at 14:37
11

If you are using Angular 1.6+, you will also need to remove the hashPrefix from the URL:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix(''); // by default '!'
  $locationProvider.html5Mode(true);
}]);

Don't forget to change the base as well:

<head>
    ...
    <base href="/">
</head>
Community
  • 1
  • 1
Mistalis
  • 17,793
  • 13
  • 73
  • 97
4
    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {

    $urlRouterProvider.otherwise('/home');

    //add this line in your routing code   
    $locationProvider.html5Mode(true);

    $stateProvider.state('web.home', {
                url: '/home',
                templateUrl: 'pages/home.html',
                controller: 'mainController'         
            })
    }

in your index.php or index.html in < head > tag insert 

< base href="/" >

for CodeIgniter : 

<base href=" < ?php echo base_url() ?  >" >
Vishal Nathbone
  • 41
  • 5