Remove # from URLs in angularjs using yii2 as server

Question

In anglarjs, I use $routeProvider to route various urls. Want to remove # from URLS but failed after trying all the established ways to do so (setting html5 to true with <base> option in main.php along with .htaccess).

I am using views/layouts/main.php from yii2 framework as standard page that instantiates ng-app.

Can you tell what steps should I follow...

When I run a url without hash, it returns 404 as it cannot find the route that it used to find after #

Please provide more details what have you done exactly. Like configuration of the provider, content of the htaccess. Normally this works: https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag — blacksheep_2011, Jan 30 '16 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

You need to set html5mode to true. See details here https://docs.angularjs.org/guide/$location

Also, you need to setup base attribute in your HTML, if you want to prevent 404 error. See the Stackoverflow answer here Issue with html5Mode in angularjs

edited May 23 '17 at 12:23

Community

1
1

answered Jan 30 '16 at 15:10

Bikas

2,709
14
32

This is an incomplete answer without mentioning that it requires server side configuration also to work – charlietfl Jan 30 '16 at 15:24
The first link explains the html5mode and entire $location, including server side configuration in detail. For sake or brevity, I've not explained that here as the original question only asked about #. If there's followup on that, I'll include in my answer. – Bikas Jan 30 '16 at 16:20

score 0 · Answer 2 · answered Jan 30 '16 at 15:17

You need to configure $locationProvider and set html5Mode to true:

angular.module('phonecat', []).
  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);

  }]);

you can see detail in this link.

This code works for me i hope it works for you too.

Remove # from URLs in angularjs using yii2 as server

2 Answers2