AngularJS - Remove hash # using $locationProvider

Question

I used $locationProvider to remove hashtag # from this url

http://localhost/angular-phonecat/app/#/phones

using the following code:

phonecatApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

  $routeProvider.
    when('/phones', {templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'}).
    when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'}).
    otherwise({redirectTo: '/phones'});

  $locationProvider.html5Mode(true);

}]);

and in index.html added this in the head

<base href="/angular-phonecat/app/">

this worked and my current url is:

http://localhost/angular-phonecat/app/phones

But when I directly access this url it is not showing the webpage because it is not calling the index.html file. Instead, it is showing the contents of /app/phones directory

I tried by creating an .htaccess file also

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

scotch.io/tutorials/… Try above tuts

Paresh Gami
– Paresh Gami

2016-03-11 08:18:45 +00:00
Commented Mar 11, 2016 at 8:18 — Paresh Gami
– Paresh Gami, Commented Mar 11, 2016 at 8:18

François-Xavier Aeberhard · Accepted Answer · 2016-03-11 12:14:30Z

1

There is a small error in your rule, the rewrite rule requires one more parameter.

Furthermore, when you write RewriteCond %{REQUEST_FILENAME} !-d you prevent redirection if a directory with this name exists. Since /anular-phonecat/app/phones exist you need to also remove this line.

You dont need the RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico) condition, since files won't be redirecte thanks to the RewriteCond %{REQUEST_FILENAME} !-f condition

The result is:

RewriteEngine   On
RewriteBase     /angular-phonecat/app/ 
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteRule     .* ./index.html [L]

Edited response based on comments

edited Mar 11, 2016 at 12:14

answered Mar 11, 2016 at 8:40

François-Xavier Aeberhard

6228 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

François-Xavier Aeberhard Over a year ago

You're app is a the root level of your server right? (e.g. localhost/index.html)? What's the error?

François-Xavier Aeberhard Over a year ago

Then you need to either remove RewriteBase or set it to '/angular-phonecat/app/'

François-Xavier Aeberhard Over a year ago

KK now you edited the post i see another issue. You also need to remove the RewriteCond %{REQUEST_FILENAME} !-d which prevents redirection when the folder exists

Adersh Over a year ago

RewriteBase /angular-phonecat/app/

Collectives™ on Stack Overflow

AngularJS - Remove hash # using $locationProvider

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related