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.

Answer 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