Angular JS: URL parameter appears before the `#!/` and doesn't appear in $

You just need to use

> "?returnUrl=/original/location/"

$ gives you values only if your route has defined it.

What is going on here? And why is the URL parameter before the #!/login?

You can think of querystring parameters before the #! as a server-side parameters, and querystring parameters after the #! as client-side parameters. This is perfectly valid:!angularRoute?angularParam=someValue

The server-side parameters allow you to configure how the page is served from the server and then, once server page is served and the Angular app is loaded, use the client-side parameters to supply what that particular Angular app is expecting.

Why does this prevent $ from returning anything? If I move the param to the end of the resulting URL, it works.

Because nothing was specified for the client-side parameters until you moved the values there.

What can I do to fix this?

  1. You could change the links to be like how you modified them to get them to work: <a href="!/login?returnUrl=/original/location">Login.</a> or duplicate the parameter so it's available on both the server and the client <a href="!/login?returnUrl=/original/location">Login.</a>
  2. You can inject $window and get the server-side values from $
  3. You can inject $location and use $location.absUrl()

Here is an example of how you can set the client-side parameters from the server-side parameters:

var app = angular.module('YOURAPPNAME', []);['$location', function($location) {
  // I'm going to fake out the url so it runs in the SnippetEditor.
  var url = "!/login"; //$location.absUrl();
  var hashbangIdx = url.indexOf('#!');
  var serverStr = hashbangIdx > -1 ? url.substring(0, hashbangIdx) : url;
  var qIdx = serverStr.indexOf("?");
  var p = qIdx > -1 ? serverStr.substring(qIdx).split(/[&||?]/) : [];
  for (var i = 0; i < p.length; i += 1) {
    if (p[i].indexOf('=') > -1) {
      var param = p[i].split('=');
      $[0], param[1]);

app.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {
  $scope.params = $;
<!DOCTYPE html>
<html ng-app="YOURAPPNAME">

  <meta charset="utf-8" />
  <script data-require="[email protected]" src="" data-semver="1.5.11"></script>
  <script src="app.js"></script>

<body ng-controller="MainCtrl">
  <p ng-repeat="(name, val) in params">
    {{name}}: {{val}}