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?

Answer 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'});

Answer 2

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:

ui router query parameters

2 个答案: