AngularJS passing data to $http.get request


#1

I want to generate dynamic url in angularjs where I will get parameters from input fields and save the values in {{origin.name}} and {{destination.name}}

My question is i want to use this variable value in url

http://something.com/app_bus_available.php?origin={{origin.name}}&destination={{destination.name}}

And also pass this url to another controller

How to make this ?


#2

To get the query parameters in an angular app you need to use something like:

$location.search()['origin']

$location is a service injected into your component.


#3

I hope you have two different controllers. One is for manipulating the form. And the other is where you wish to get the url created by the form data. Correct me if i didn’t understood what you actually mean.
In order to get this to work, you need to use a service as an intermediate to store the url. Once you get the form data from the form fields, then you can set the url something similar to
var url = http://something.com/app_bus_available.php?origin={{origin.name}}&destination={{destination.name}}
Here you are getting the origin.name and destination.name from the form. And then save this to the service, which will be available across the app. So when you go to the second controller then you will be able to access the url using the service to which you have saved the url from the first controller.

Hope the following code might help you.

app.controller('Controller1', function(urlService){
  var url = //you can form the url as you get the data from the form
  urlService.setUrl(url);
})

app.controller('Controller2', function(urlService){
  var url = urlService.getUrl();
})

app.service('urlService', function(){
  this.url = '';

  this.setUrl = function(url){
    this.url = url;
  }

  this.getUrl = function(){
    return this.url;
  }
})

```

You can also use the localStorage to accomplish this task.