ui router query parameters

Question

I'm trying to learn how to use AngularJS UI Router in a small search app but can't seem to get the query parameters right.

In Chrome's address bar, it never changes from this:

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

Instead of http://localhost:8000/app/search?q=typeduserinput

I have this for .config and .run:

    searchApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {


    $locationProvider.html5Mode(true);/*for browser history, back and forward buttons*/

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

}]);
  searchApp.run(function ($rootScope, $location) {
    $rootScope = $location;
  });

So my home page is real simple for now. Just a searchbox that provides autocomplete functionality.

I have this in my homeCtrl:

$scope.searchTerms = null;
$scope.searchTerms = $stateParams.searchTerms;

And my ng-submit button calls a search(), which has this code:

$location.path('/search').search({'q': 'searchTerms'});//chaining location, state and url parameters

Where am I going wrong trying to get the query parameters and ui router?

UPDATE I've been doing lots of reading to better understand how UI Router fits into what I'm trying to do. I think I'm starting to "get it" now. My first mistake was that I have 2 controllers and both were loading ui.router as a dependency which seems to cause Error: Could not resolve '/search' from state 'home' because the the 'search' state has not been loaded yet - and only 1 can declare ui.router as dependency - however, but both js files must be loaded.

So.... I think it makes sense to have homeCtrl (autocomplete) load ui.router and then have searchCtrl (searching) load homeCtrl... does that make sense, am I understanding this correctly? Would it make better practice to make a "routes" module that loads ui.router as a dependency as well and have homeCtrl load the routes module as a dependency?

Daniel · Accepted Answer · 2016-04-05T07:40:48.900

1

When you define url: '/search?searchTerms', it means that search state accepts query params named searchTerms.

Either change the name to q in the state definition:

url: '/search?q',

Or pass searchTerms as the query param in the URL:

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

EDIT:

And of course, as @sid said, you should use $state.go to navigate between states and not $location.path.

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

edited Apr 05 '16 at 07:40

answered Apr 04 '16 at 18:34

Daniel

6,194
7
33
59

it looks like I already had your suggestion in my code(comment), so I will just uncomment and comment the wrong line out, do I still need params {} ? – user3125823 Apr 04 '16 at 20:58
Not really, `params:` is for `non-url` parameters. – Daniel Apr 05 '16 at 07:37
please take a look at my UPDATE and let me know if that is going in the right direction? – user3125823 Apr 05 '16 at 17:19

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

It seems that you are trying to mix the ui.router paradigm with using $location.path directly. Why not use $state.go('search') instead. Read this:

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

AND THIS

https://stackoverflow.com/a/23455158/559095

Also, your passing of searchParams between states doesn't look correct. Go through the following links to understand this better. You may need a resolve property in your search state:

edited May 23 '17 at 12:33

Community

1
1

answered Apr 04 '16 at 18:37

Sid

7,511
2
28
41

yea it seems I was, and did not even realize it. Still learning Angular... let me try go over this again and I will let you know how I make out, thanks for your efforts! – user3125823 Apr 04 '16 at 20:36
so it seems if I'm using UI Router, I don't really need $location service at all, is that correct? – user3125823 Apr 04 '16 at 20:55
1

Correct, there should be no need of $location service for this purpose. – Sid Apr 04 '16 at 20:56
1

Take a look at this GitHub code https://github.com/sidazad/angularjstutor for the site http://angularjstutor.com/coursedes This should help you – Sid Apr 04 '16 at 20:57
please take a look at my UPDATE and let me know if that is going in the right direction? – user3125823 Apr 05 '16 at 17:20
@user3125823 ui router should be loaded as a dependency of the top level module and not of any individual controller. You can load it where you are calling angular.module. – Sid Apr 05 '16 at 17:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108314/discussion-between-user3125823-and-sid). – user3125823 Apr 05 '16 at 17:35
@user3125823 Maybe go through this example: https://github.com/sidazad/angularjstutor/blob/master/static/app/js/app.js – Sid Apr 05 '16 at 17:39

ui router query parameters

2 Answers2