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: scotch.io/quick-tips/… — blacksheep_2011
– blacksheep_2011, Commented Jan 30, 2016 at 15:08

Community · Accepted Answer · 2017-05-23 12:23:32Z

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, 2017 at 12:23

CommunityBot

11 silver badge

answered Jan 30, 2016 at 15:10

Bikas

2,76918 silver badges33 bronze badges

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

2 Comments

charlietfl Over a year ago

This is an incomplete answer without mentioning that it requires server side configuration also to work

Bikas Over a year ago

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.

Prashant Patil · Accepted Answer · 2016-01-30 15:17:35Z

0

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.

answered Jan 30, 2016 at 15:17

Prashant Patil

3712 silver badges13 bronze badges

Collectives™ on Stack Overflow

Remove # from URLs in angularjs using yii2 as server

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related