Thursday 23 April 2015

Get url parameter using angular js

Using $location.search() you can easily get the query parameter.

I have written the same using Angular 2(+) concept as well, check these links for that Get Url parameter using Angular 4 and 3 simple ways to share data through angular route.

For example


 //url
 http://www.sample.com/#/?username='samplename'&tocken='tocken'
 //Note '#/'
 
 //In your controller 
 
 $location.search();
 
 Result:
 {
 username : 'samplename',
 tocken:'tocken'
 }
 
 

Even you can try ,


$location.search().username 
$location.search().tocken 

//you can write your own logic 

if($location.search().username && $location.search().tocken){
 //do your logic
}

 

Check query parameter is existing


  if($location.search().yourQueryData.indexOf('?') > 0)
  {
 //query parameter existing 
  }
  else{
 //no
  }

Related Posts

1. Angular js client side pagination like google.

2. Angular Loader using font awesome icons

3. Angular js add class to active element


12 comments :

  1. not working. I get undefined from property($location.search().tab) that i needed and my url ends with "?tab=2"

    ReplyDelete
    Replies
    1. It should work ,did you added dependencies properly ($location)

      Delete
  2. html5Mode must be enabled for this to work.

    angular.module('myApp', [], function($locationProvider) {
    $locationProvider.html5Mode(true);
    });

    ReplyDelete
  3. the first your url demo is error, need use /# intead for #/

    ReplyDelete
    Replies
    1. that was a typo,corrected ,thanks

      Delete
    2. when i add the code..pages not working
      $locationProvider.html5Mode(true);

      Delete
    3. what error you are getting.

      Delete
  4. window.location = "/UIPortal/Transactions/RatingInfo.html?series=" + Series;
    the above is my url, i am getting undefined in the below line
    $location.search().series
    I applied below in module
    var TM = angular.module('app', ['datatables', 'datatables.buttons', 'datatables.columnfilter', 'datePicker'], function ($locationProvider) {
    $locationProvider.html5Mode(true);
    });

    ReplyDelete
  5. Only works with base-tag, correct?

    ReplyDelete
  6. Good article that provides a good example of the great use of Angular JS in HTML. Thanks for providing us this very unique example in your blog.

    ReplyDelete