Custom sharable and bookmarkable url with anglular ui - router request params

Question

Currently, am storing my data in cookies and passing it via ajax call to fetch data from the server.

So, currently my webapp is specific to single client machine and url is not sharable. So I want to pass request params to dynamically generate url to fetch and update the data from my node server.

How can I generate links like the below one and pass it as part of $http service in angular to fetch data from node express.

https://www.opendoor.com/homes/phoenix?min_bedrooms=2&min_price=25000000&max_price=40000000&pool=Any&active=1

Current code:

AngularJS $http.post('/getPropertyData',data).success(function(data,status) { $scope.parseData(data); }); .state('listProperties', { url:'/listProperties', templateUrl : 'list.html', controller : 'listControl' })

Node Backend:

router.post('/',function(req,res) {
  var finalResp = [];
  var asyncIterator = 0;
  MongoClient.connect(url, function(err, db) {
  ...........
  function sendResponse(asyncIterator,length,finalResp,db) {
    if(asyncIterator==length) {
      res.send(finalResp);
      db.close();
    }
  }
}

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

When you pass the data as the second argument to $http.post angular will put that JS data into the payload/body for the request instead of encoding it in the URL. So your options are either to read the parameters from the body on the node side or to change the $http post request to use URL query parameters instead of the body/payload of the request for the data.

AngularJS - Any way for $http.post to send request parameters instead of JSON?

Something like this should work: $http.post('/getPropertyData',$httpParamSerializer(data))

angular.module('myApp', []).run(function($http, $httpParamSerializer){
  var data = {some:'stuff', in:'here'}
  console.log($httpParamSerializer(data))
  //$http.post('/getPropertyData',$httpParamSerializer(data)) actually use this line
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
</div>

edited May 23 '17 at 10:30

Community

1
1

answered Jul 19 '16 at 18:01

shaunhusain

19,630
4
38
51

so how can I get the data from the params in the url to post data to the server? I need the sharable url as well. Thanks in advance. – Suresh Kumar S Jul 19 '16 at 18:08
Typically the way I handle this is I setup a state in angular (typically using ui-router not ngRoute but either works) that will accept the parameters it needs to restore the state of the page and that would include any data that it will ultimately use to make a call to the backend. Can see the link in the answer for how to transform the data into query params if necessary. – shaunhusain Jul 19 '16 at 18:28
Thanks for the help bro, if you dont mind can you share me an small code snippet bro which will change the url as well as send $http request to the server – Suresh Kumar S Jul 19 '16 at 18:31
@SureshKumarS updated the answer, found in poking around that if you pass the second param as a string then it doesn't do any transformation and it should be appended to the URL, if not can still use that $httpParamSerializer service to transform the JS object to a query param and manually concat them (with a + ) – shaunhusain Jul 19 '16 at 18:45
Instead of passing the data directly as params to $http request how can I use the state params as part of the url to pass – Suresh Kumar S Jul 19 '16 at 19:12
Basically the same way if your state config has the params in the URL then you can access them with the $stateParams service from ui-router – shaunhusain Jul 19 '16 at 19:35
Thanks brother. I have done it partially. One more query in this is how can I generate the url state params dynamically only for the applied filters params. – Suresh Kumar S Jul 20 '16 at 06:45
You can use optional query params then check the $stateParams to conditionally update things in the view and make the request with the correct query params. You're basically just passing through the query parameters but can do any extra logic you need to in the view ahead of doing the actual request to the backend. – shaunhusain Jul 20 '16 at 21:41

Custom sharable and bookmarkable url with anglular ui - router request params

1 Answers1