UI and request parameters

Question

I built a small search application using Angular, UI Router and Elasticsearch, and I'm trying to get the UI Router request parameters in the URL on the results page.

I'm trying to achieve this

domain.com/search?user_search_terms 

with this

 .state('search', { url: '/search?q', 

and I initialize searchTerms and $ stateParams like this in my controller

 vm.searchTerms = $stateParams.q || ''; 

and then in my search function in my controller I have this

  vm.search = function() { $state.go('search', {q: vm.searchTerms}); ... 

Everything works fine until I try to implement the UI route request parameters. I can still get search suggestions, transition from state to state, but search breaks.

I thought I needed to implement Angular $ http get params in config {}, but then I realized that I was just trying to get request parameters using the UI Router. It seems that I have everything I need to configure using the UI Router to get the request parameters, but ... what am I doing wrong?

Answer 1

For query parameters, you should use $state.params instead of $stateParams

Plunker demo

STATE CONFIG:

 stateProvider.state({ name: 'search', url: '/search?q', //... } 

CONTROLLER FROM:

 function fromCtrl ($state) { $state.go('search', {q: vm.searchTerms}); } 

CONTROLLER TO:

 function toCtrl ($state) { vm.searchTerms = $state.params.q || ''; } 

---

If your search for Terms is an object, you can use JSON.stringify() and JSON.parse()


Check out these messages if you still have doubts:
How to extract request parameters using ui-router for AngularJS?
AngularJS: pass an object to state using ui-router