Javascript 用户界面路由器查询参数

我正在尝试学习如何在一个小型搜索应用程序中使用AngularJS UI路由器，但似乎无法获得正确的查询参数

在Chrome的地址栏中，它永远不会改变：

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

而不是

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

我为.config和.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;
  });

所以我的主页现在非常简单。只是一个提供自动完成功能的搜索框

我的家里有这个Ctrl:

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

my ng submit按钮调用search（），其代码如下：

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

我在尝试获取查询参数和ui路由器时哪里出错了

更新 我一直在做大量的阅读，以更好地了解UI路由器如何适合我正在尝试做的事情。我想我现在开始明白了。我的第一个错误是，我有两个控制器，它们都将ui.router作为依赖项加载，这似乎导致了

错误：无法从状态“home”解析“/search”，因为“search”状态尚未加载-只有1个控制器可以将ui.router声明为依赖项-但是，必须加载这两个js文件

所以。。。。我认为有必要让homeCtrl（自动完成）加载ui.router，然后让searchCtrl（搜索）加载homeCtrl。。。这有意义吗？我理解正确吗？制作一个“路由”模块，将ui.router作为一个依赖项加载，并让homeCtrl作为一个依赖项加载路由模块，这会更好吗？
当您定义
url:'/search？searchTerms'，
时，这意味着
search
状态接受名为
searchTerms
的查询参数

在
状态
定义中将名称更改为
q
：

url: '/search?q',

或者将
searchTerms
作为
URL
中的查询参数传递：

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

编辑：

当然，正如@sid所说，您应该使用
$state.go
在状态之间导航，而不是
$location.path

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

当您定义
url:'/search？searchTerms'时，
意味着
search
状态接受名为
searchTerms
的查询参数

在
状态
定义中将名称更改为
q
：

url: '/search?q',

或者将
searchTerms
作为
URL
中的查询参数传递：

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

编辑：

当然，正如@sid所说，您应该使用
$state.go
在状态之间导航，而不是
$location.path

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

您似乎试图将ui.router范例与直接使用$location.path混合使用。为什么不改为使用$state.go（'search'）。请阅读以下内容：


还有这个


此外，您在各州之间传递的searchParams看起来不正确。通过以下链接可以更好地理解这一点。您可能需要搜索状态下的resolve属性：




您似乎试图将ui.router范例与直接使用$location.path混合使用。为什么不改为使用$state.go（'search'）。请阅读以下内容：


还有这个


此外，您在各州之间传递的searchParams看起来不正确。通过以下链接可以更好地理解这一点。您可能需要搜索状态下的resolve属性：




是的，我似乎是，甚至没有意识到。还在学习。。。让我再试一次，我会让你知道我做得怎么样，谢谢你的努力！所以，如果我使用的是UI路由器，我根本不需要$location服务，对吗？对，应该不需要$location服务。看看这个网站的GitHub代码，这应该可以帮助你看看我的更新，让我知道这是否朝着正确的方向发展？是的，看起来我是，甚至都没有意识到。还在学习。。。让我再试一次，我会让你知道我做得怎么样，谢谢你的努力！所以，如果我使用的是UI路由器，我根本不需要$location服务，对吗？对，应该不需要$location服务。看看这个网站的GitHub代码。这应该可以帮助你看看我的更新，让我知道这是否朝着正确的方向发展？看起来我的代码（注释）中已经有了你的建议，所以我只需取消注释并注释错误的行，我仍然需要params{}吗？不太需要，
params:
用于
非url
参数。请查看我的更新，让我知道这是否是正确的方向？看起来我的代码（注释）中已经有了你的建议，所以我将取消注释并注释错误的行，我仍然需要params{}吗？不太需要，
参数：
用于
非url
参数。请查看我的更新，并告诉我这是否正确？