AngularJS-使用$ 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]

Answer 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