How to use Angular $location to set my new url location by changing its key-value params dynamically?

Let's say I have a RESTful endpoint that accepts a range of facets to query data. Here's a few examples:

example.com/search?type=Doctor&location=Boston,MA&radius=2  
example.com/search?type=Facility&location=Wayne,NJ&radius=3&gender=f  
example.com/search?type=Doctor&location=Patterson,NJ

My module accepts the query object to perform the search:

console.log(query);
{
  type:'Doctor',
  location:'Boston,MA',
  radius:'2'
}

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
  });
}

These facets are being passed through a local model in a web form:

 <input type="text" ng-model="query.location"/>
 <input type="text" ng-model="query.radius"/>
 <button type="button" ng-click="getSearch(query)">Search</button>

In the success callback of the getResults function, I'm trying to append the query parameters to the URL like in the examples above:

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
    search.appendQueryToURL(query);
  });
}

How do I append URL parameters dynamically in AngularJS?

Answers


Using $location

$location.path('/newValue').search({key: value});

For Non AngularJS applications:

You can use history.js to append parameters dynamically to the url. then split the url to retrieve the params and pass to angular:

History.replaceState({state:1}, "State 1", "?Param1=something");

I am suggesting history.js as IE until ver9 didnt support history object push state, if you are going to use IE10+ or google chrome, use the history state object to update the url. Hope it helps :)


For the example above, the path() of your $location would be

'/search' 

and the root is

'http://example.com' 

Going back to his question, he did not ask to update the location with new path, he asked to update the location with new key-value pairs query dynamically!

So to do that, it's just everyday jQuery $x(newX)!

$location.search({type: x, location: y, radius: z}); 

or

$location.search({type: x, location: y}); 

It's all jQuery !!

If he wants to change the path from search to something else, he can do:

$location.path('/otherPath'); 
//his new location would be 'example.com/otherPath' 

In fact, instead of using $location to call your data-service endpoint, a normal way to do that is

<form id='searchForm' ng-submit="getDataService()" ng-controller="aController">
<input ng-model="type"/>
<input ng-model="location"/>
<input ng-model="radius"/>
<input ng-model="gender"/>
<button type='submit'/>
</form>

and in getDataService() do a

$http.get( serviceUrl, config ).success( ...

with your serviceUrl being

example.com/search/Facility/Wayne,NJ/3/f

after parsing (using sprintf)


Need Your Help

Tomcat 6 JAVA_HOME

java tomcat batch-file tomcat6

I try to set the JAVA_HOME path as my Tomcat server is looking for it. I am trying to set it but it doesn't seem to work and causes an error when I do. I am trying to set the JAVA in the setclasspa...