UI Router Query Parameters with Named Views

Question

I am having trouble with using query parameters with UI Router for a small search app.

Its real simple right now until I better understand Angular, just a home and results page. Home page just has a search box on it with autocomplete functionality. Search page has same search box and then results. On my search box, I have ng-submit on the button which calls search(). In search(), I have $state.go('state', {q: 'searchTerms'}), searchTerms being my ng-model on the input.

Going from the home page to results page, url stays the same:

http://localhost:8000/app/search?q=searchTerms

INSTEAD OF http://localhost:8000/app/search?q=usertypedinput

WHY?

My states (routes)

$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'home/home.html', controller: 'homeCtrl'})
  .state('search', {
    url: '/search?q',
    views: {
      '' : { templateUrl: 'search/search.html', controller: 'searchCtrl' }
      //add more views here when necessary
    }
  });

As you can see I'm using named views INSTEAD of nested views. A lot of examples use nested views, so I'm curious to know if that is causing the issue or if I'm missing something?

Would it be better to use nested views with a search app?

user3125823 · Accepted Answer · 2016-08-20T14:35:21.630

1

I figured it out, everything was correct except for some stinking syntax in state.go :((

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

SHOULD HAVE BEEN

$state.go('search', {q: $scope.searchTerms});

searchTerms WITHOUT the single quotes AND $scope

HTH anyone else not waste time on something so simple.

edited Aug 20 '16 at 14:35

answered Apr 06 '16 at 22:22

user3125823

1,846
2
18
46

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

So the URL of the home page is http://localhost:8000/app/home and the URL of the Search page(result page) will be http://localhost:8000/app/search?q=searchTerms.

From home you're submittig the query to go to the search result page. So search result page will have the queryParams in the url.

It doesn't matter if you're using nested views or not. URL is fully configurable in UI-Router. If you don't want to see the query params in thesearch page URL. You can pass it as a non-URL parameter, so that you'll get the param data but not seen in the URL. Check this for more info on non-URL params.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 06 '16 at 17:35

Manoj

497
7
13

I DO want to see the query params in the url on the search page, but their not showing up! Instead it stays q=searchTerms when I'm trying to get q=userTypedInput – user3125823 Apr 06 '16 at 17:49

UI Router Query Parameters with Named Views

2 Answers2