Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with html5Mode in angularjs

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!

like image 496
Alavaros Avatar asked Oct 27 '13 10:10

Alavaros


People also ask

What is html5Mode in AngularJS?

html5Mode specifies, we catch all urls on the server, similar to the otherwise route in angular, and return the same html as the root domain. But if I then check the $location object from within the run function of angular, it tells me that http://www.site.com is my host and that /archive is my path .

What is the use of $state in AngularJS?

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.

What is routeProvider in AngularJS?

Routing allows us to create Single Page Applications. To do this, we use ng-view and ng-template directives, and $routeProvider services. We use $routeProvider to configure the routes. The config() takes a function that takes the $routeProvider as a parameter and the routing configuration goes inside the function.


1 Answers

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.

like image 193
Reto Aebersold Avatar answered Oct 20 '22 10:10

Reto Aebersold