Issue with html5Mode in angularjs

html url angularjs location-provider
Alavaros picture Alavaros · Oct 27, 2013 · Viewed 13.8k times · Source

I'm trying to remove index.html of the url using html5Mode(true) in angularjs, this is the code:

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/home', {templateUrl: 'views/home.html'});
  $routeProvider.when('/about', {templateUrl: 'views/about.html'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

If I dont write $locationProvider.html5Mode(true); the url shows:

localhost:(port)/MyApplication/index.html

If I write $locationProvider.html5Mode(true); the url shows:

localhost:(port)

MyApplication is removed of the url. And I want the url shows:

localhost:(port)/MyApplication/

What I'm doing wrong? What's the problem?

UPDATE:

How should show my <a> tags? Right now I have:

<a href="#/about">About</>

When I click on the link, the url shows:

localhost:(port)/MyApplication/index.html#/about

I'm lost with this.

Thanks in advance!

Answer

Reto Aebersold picture Reto Aebersold · Oct 30, 2013

If your application runs under /MyApplication/ try to set the base path in your index.html and switch on html5Mode:

<html>
  <head>
    <base href="/MyApplication/index.html" />
    ...

See Using $location.

Related questions

How do I modify the URL without reloading the page?

Is there a way I can modify the URL of the current page without reloading the page? I would like to access the portion before the # hash if possible. I only need to change the portion after the domain, so …

Read More
How can I get the Google cache age of any URL or web page?

In my project I need the Google cache age to be added as important information. I tried to search sources for the Google cache age, that is, the number of days since Google last re-indexed the page listed. Where can …

Read More
Absolute vs relative URLs

I would like to know the differences between these two types of URLs: relative URLs (for pictures, CSS files, JS files, etc.) and absolute URLs. In addition, which one is better to use?

Read More