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

User · Answer

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)

User · Answer

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    gt   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

User · Answer

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    gt   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 amp param2 def  You can make it work by adding    in the URL  http   localhost test   param1 abc amp param2 def   location search   to return an object like       param1   abc     param2   def

User · Answer

To give a partial answer my own question  here is a working sample for HTML5 browsers    lt  DOCTYPE html gt   lt html ng-app  myApp  gt   lt head gt     lt script src  http   code angularjs org 1 0 0rc10 angular-1 0 0rc10 js  gt  lt  script gt     lt script gt      angular module  myApp       function  locationProvider           locationProvider html5Mode true               function QueryCntl  scope   location           scope target    location search    target             lt  script gt   lt  head gt   lt body ng-controller  QueryCntl  gt   Target    target   lt br  gt    lt  body gt   lt  html gt    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

User · Answer

you could also use  location   search yourparameter

User · Answer

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

User · Answer

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

User · Answer

location search   will work only with HTML5 mode turned on and only on supporting browser    This will work always    window location search

User · Answer

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    x000D   x000D  var myApp   angular module  myApp        x000D   x000D  function MyCtrl  scope   location    x000D   x000D       scope location    location  x000D       scope  watch  location search     function     x000D           scope target     location search    target  x000D         true   x000D   x000D       scope changeTarget   function name    x000D           location search  target   name   x000D        x000D    x000D   lt div ng-controller  MyCtrl  gt  x000D   x000D       lt a href     test  target Bob  gt Bob lt  a gt  x000D       lt a href     test  target Paul  gt Paul lt  a gt  x000D       x000D       lt hr  gt      x000D      URL  target  param getter    target   lt br gt  x000D      Full url    location absUrl     x000D       lt hr  gt  x000D       x000D       lt button ng-click  changeTarget  Pawel    gt target Pawel lt  button gt  x000D       x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  lt base href    gt  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

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

Examples related to angularjs

Examples related to ngroute