What's the most concise way to read query parameters in AngularJS?

Question

I'd like to read the values of URL query parameters using AngularJS. I'm accessing the HTML with the following URL:

http://127.0.0.1:8080/test.html?target=bob

As expected, location.search is "?target=bob". For accessing the value of target, I've found various examples listed on the web, but none of them work in AngularJS 1.0.0rc10. In particular, the following are all undefined:

$location.search.target
$location.search['target']
$location.search()['target']

Anyone know what will work? (I'm using $location as a parameter to my controller)

Update:

I've posted a solution below, but I'm not entirely satisfied with it. The documentation at Developer Guide: Angular Services: Using $location states the following about $location:

When should I use $location?

Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.

For my scenario, my page will be opened from an external webpage with a query parameter, so I'm not "reacting to a change in the current URL" per se. So maybe $location isn't the right tool for the job (for the ugly details, see my answer below). I've therefore changed the title of this question from "How to read query parameters in AngularJS using $location?" to "What's the most concise way to read query parameters in AngularJS?". Obviously I could just use javascript and regular expression to parse location.search, but going that low-level for something so basic really offends my programmer sensibilities.

So: is there a better way to use $location than I do in my answer, or is there a concise alternate?

This does not work, because there is no hash after the path. `http://127.0.0.1:8080/test.html#?target=bob` would work, notice the `#` before the `?`. `$location` is a second level routing method which does not get sent to the server. — Daniel F, Nov 23 '15 at 19:39
@DanielF @rob, you're both right. `$location.search()['target']` works after `$locationProvider.html5Mode(true)` has been called in a modern browser. — krispy, Mar 22 '16 at 01:21

score 201 · Answer 1 · edited Mar 28 '18 at 15:24

201

You can inject $routeParams (requires ngRoute) into your controller. Here's an example from the docs:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

EDIT: You can also get and set query parameters with the $location service (available in ng), particularly its search method: $location.search().

$routeParams are less useful after the controller's initial load; $location.search() can be called anytime.

edited Mar 28 '18 at 15:24

Kurtis Jungersen

2,204
1
26
31

answered Jun 16 '12 at 14:57

Andrew Joslin

43,033
21
100
75

1

Thanks for the suggestion and link! I read the page and also attempted to set up a working sample. However, the approach won't work out for me, because I really don't want to use routing in this case. This was a helpful suggestion nonetheless, and I'll upvote it once I have enough stackoverflow rep. – Ellis Whitehead Jun 17 '12 at 06:16
1

I would say @pkozlowski.opensource 's answer is more accurate in this situation – Martín Coll Jun 05 '13 at 18:01
2

Not quite .. query paramaters are included in the $routeParams object with the normal route parameters. and you can read them/set them with $location.search(). I'll add that to the answer. – Andrew Joslin Aug 09 '13 at 14:22
5

Jakub is right. They are different things. When you use the "search" in angular, it appends the query to the hash (end of the URL). The RFC spec for URI states that the query params should prepend (not append) the hash. Thus the "search" is a construct that only angular will extrapolate and interpret. This is why only HTML5 mode will work for the solution above, because you are delegating all requests to one page (at the server level) regardless of the actual URI. – Steven Pena Feb 08 '14 at 21:54
2

this only works if you want to use route in angularJS ! – windmaomao Apr 02 '15 at 15:46
If this isn't working for you, check which router in Angular you are using. In my case I am using `$stateProvider` which means I would use `$stateParams` in my controller to get the URL params – luke Sep 19 '16 at 05:29

score 193 · Answer 2 · edited Oct 21 '15 at 15:50

193

Good that you've managed to get it working with the html5 mode but it is also possible to make it work in the hashbang mode.

You could simply use:

$location.search().target

to get access to the 'target' search param.

For the reference, here is the working jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $location) {

    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);

    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}

<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>
    
    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

edited Oct 21 '15 at 15:50

JDB

25,172
5
72
123

answered Jul 16 '12 at 17:56

pkozlowski.opensource

117,202
60
326
286

2

do you need the parentheses around $location.search() ? – Magne May 30 '14 at 14:00
2

@Magne: yes, you need parentheses, $location.search is a method https://docs.angularjs.org/api/ng/service/$location – nandin Jun 04 '14 at 14:03
4

Don't forget that if you do not use `HTML5Mode(true)` then only params after #/ are available or get added to url with #/ at the beginning. – Sebastian Jul 25 '14 at 09:36
21

@nandin: No, you do **not** need the parentheses *around* `$location.search()`. I'm not sure why this answer puts them there. – Dan Tao Jul 31 '14 at 16:37
2

@nandin, that is a strange argument – TaylorMac Aug 13 '14 at 21:41
@nandin Parentheses shouldn't be required. The method call return an object and the dot syntax interrogates that object. Akin to a fluent interface. – Ian Lewis Sep 05 '14 at 12:56
9

I feel like @nandin misunderstood the "Do you need parentheses" question. You *do* need the parentheses after search, but not the ones around the entirety of `$location.search()`. – Kevin McCarpenter Dec 23 '14 at 18:35
@K.Carpenter I agree. I edited the answer to fix the syntax. (I know it's an old one, but it's a good reference) – Nate Barbettini Jan 29 '15 at 23:47
Thanks! Yeah, given the large number of upvotes, I figured many people valued this question/answer. – Kevin McCarpenter Jan 30 '15 at 00:10
@pkozlowski.opensource Currently the JSFiddle link doesn't work. Do you by any chance still have the source code? – Uli Köhler Feb 15 '15 at 19:32
@UliKöhler you can use ellis-whitehead's code below, should be the same – csilk Apr 13 '15 at 05:48
A little off topic, but I'm really pleased to see an archive.org link for the jsfiddle – Cobus Kruger Jan 21 '16 at 13:41

score 57 · Answer 3 · edited Oct 09 '14 at 11:46

To give a partial answer my own question, here is a working sample for HTML5 browsers:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

The key was to call $locationProvider.html5Mode(true); as done above. It now works when opening http://127.0.0.1:8080/test.html?target=bob. I'm not happy about the fact that it won't work in older browsers, but I might use this approach anyway.

An alternative that would work with older browsers would be to drop the html5mode(true) call and use the following address with hash+slash instead:

http://127.0.0.1:8080/test.html#/?target=bob

The relevant documentation is at Developer Guide: Angular Services: Using $location (strange that my google search didn't find this...).

Thanks for this. I've been pulling my hair out trying to read in the query params. Kept getting 'undefined' as you mentioned above. Setting mode to html5 worked. — sthomps, May 16 '13 at 02:48
Shouldn't the `ng-controller` attribute of `` be set to `MyApp`? — Jago, Nov 20 '13 at 09:01
Looks like starting with Angular 1.3, in order to use html5Mode you also need to either add a `` tag, or add `requireBase: false` as another parameter to the call to html5Mode. [Details here](https://docs.angularjs.org/error/$location/nobase) — dae721, Jun 10 '15 at 17:03

Fizer Khan · Answer 4 · 2015-07-21T18:56:58.197

It can be done by two ways:

Using $routeParams

Best and recommended solution is to use $routeParams into your controller. It Requires the ngRoute module to be installed.

   function MyController($scope, $routeParams) {
      // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
      // Route: /Chapter/:chapterId/Section/:sectionId
      // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
      var search = $routeParams.search;
  }

Using $location.search().

There is a caveat here. It will work only with HTML5 mode. By default, it does not work for the URL which does not have hash(#) in it http://localhost/test?param1=abc&param2=def

You can make it work by adding #/ in the URL. http://localhost/test#/?param1=abc&param2=def

$location.search() to return an object like:

{
  param1: 'abc',
  param2: 'def'
}

Thanks for your advice with #/ – yonexbat Oct 01 '15 at 20:25 — yonexbat, Oct 01 '15 at 20:25

score 10 · Answer 5 · answered Jul 11 '15 at 13:08

10

$location.search() will work only with HTML5 mode turned on and only on supporting browser.

This will work always:

$window.location.search

answered Jul 11 '15 at 13:08

Illidan

4,047
3
39
49

score 6 · Answer 6 · edited Apr 19 '14 at 19:08

6

Just to summerize .

If your app is being loaded from external links then angular wont detect this as a URL change so $loaction.search() would give you an empty object . To solve this you need to set following in your app config(app.js)

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

edited Apr 19 '14 at 19:08

Sumurai8

20,333
11
66
100

answered Apr 19 '14 at 18:45

sapy

8,952
7
49
60

1

Yep. This was a pain to find. Thanks for the comment. – mikeborgh Aug 24 '15 at 00:13

score 2 · Answer 7 · answered Feb 11 '16 at 12:44

Just a precision to Ellis Whitehead's answer. $locationProvider.html5Mode(true); won't work with new version of angularjs without specifying the base URL for the application with a <base href=""> tag or setting the parameter requireBase to false

From the doc :

If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

score 1 · Answer 8 · answered Aug 05 '13 at 11:17

1

you could also use $location.$$search.yourparameter

answered Aug 05 '13 at 11:17

bogdanbujdea

594
8
22

19

The `$$search` is an internal variable, the use of which is not such a good idea. – kumarharsh Sep 02 '13 at 12:02

score 1 · Answer 9 · answered Jan 11 '18 at 00:51

I found that for an SPA HTML5Mode causes lots of 404 error problems, and it is not necessary to make $location.search work in this case. In my case I want to capture a URL query string parameter when a user comes to my site, regardless of which "page" they initially link to, AND be able to send them to that page once they log in. So I just capture all that stuff in app.run

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

then later after login I can say $state.go($rootScope.initialPage, $rootScope.initialParams)

score -3 · Answer 10 · answered Mar 10 '16 at 16:49

-3

It's a bit late, but I think your problem was your URL. If instead of

http://127.0.0.1:8080/test.html?target=bob

you had

http://127.0.0.1:8080/test.html#/?target=bob

I'm pretty sure it would have worked. Angular is really picky about its #/

answered Mar 10 '16 at 16:49

Octavio Kidd

5
4

That is only if you are not enabling HTML5 mode. The #/ is not always there in Angular urls. – LocalPCGuy May 12 '16 at 17:12
It is if you are building an SPA. All of my urls have a #. And HTML5Mode means 1) 404 on page refresh and 2) direct urls won't work. Seems like a high price to pay. – nuander Jan 11 '18 at 00:10

What's the most concise way to read query parameters in AngularJS?

10 Answers10

Linked

Related