Extracting URL parameters with AngularJS using hashbang method

Question

Currently, I am using AngularJS html4mode to extract URL parameters. I would like to change to using hashbang method because my routing got screwed up after enabling html4mode.

For extracting URL parameters using html4mode, the URL is http://127.0.0.1/webroot/start.html?Venue=XXX

The configuration code for $locationProvider is as follows;

$locationProvider.html5Mode(true);  //configure $location

Inside the controller;

var url_param = ($location.search()).Venue;

I failed when I tried to convert to hashbang. I am at a loss now

To convert to hashbang, how would the URL look like and what changes need to be made to the controller and configuration of $locationProvider?

Thank you very much for your help.

guagay_wk · Accepted Answer · 2014-04-27 14:58:40Z

1

if you turn off html5mode the URL:

http://127.0.0.1/webroot/start.html?Venue=XXX

becomes

http://127.0.0.1/webroot/start.html#/?Venue=XXX

if you want use hashbang URL (for SEO, Facebook or whatever) you should add the "!" prefix to your URL, with:

$locationProvider.html5Mode(false).hashPrefix('!');

And your URL becomes:

http://127.0.0.1/webroot/start.html#!/?Venue=XXX

the search method of $location should work, following the documentation

Move from html5Mode to hashbang (or vice versa) needs you to refactor the links in your app. To avoid this kind of situation I prefer using ui-router and modify links in terms of state transition (i.e. using ui-sref). In this way, it's ui-router that modify the URL with or without the hash for you

edited Apr 27, 2014 at 14:58

guagay_wk

28.3k64 gold badges202 silver badges311 bronze badges

answered Apr 27, 2014 at 12:40

wilver

2,1161 gold badge21 silver badges26 bronze badges

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

1 Comment

guagay_wk Over a year ago

Thanks for the answer. I made some slight modification to get the right answer which I have tested and confirmed on my side. See the edited URL.

Collectives™ on Stack Overflow

Extracting URL parameters with AngularJS using hashbang method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related