ui routerクエリパラメータ

Question

AngularJS UI Routerを小さな検索アプリケーションで使用する方法を学習しようとしていますが、クエリパラメータを正しく取得できないようです。 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; 
    }); 

だから私のホーム・ページ今は本当に簡単です。オートコンプリート機能を提供する検索ボックス。

私はhomeCtrlでこれを持っている：

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

そして、私のNG-submitボタンは、このコードがある検索（）を呼び出します：

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

をどこで取得しようとして間違っているつもりですクエリパラメータとUIルータ？

UPDATE 私は、UIルータが私がしようとしているものにどのように適合するかを理解するために、たくさんの読書をしてきました。私は今、 "それを得る"ようになっていると思う。私の最初の間違いは2台のコントローラーがあり、どちらもui.routerを依存関係としてロードしていました。これはError: Could not resolve '/search' from state 'home'のように見えます。なぜなら '検索'状態はまだロードされていないからです。そして、1つしかui.routerを依存関係として宣言できません。両方のjsファイルをロードする必要があります。

だから私はhomeCtrl（オートコンプリート）ロードui.routerを持って、それからsearchCtrl（検索）ロードhomeCtrlを持っていることが理にかなっていると思います。 ui.routerを依存関係としてロードする "routes"モジュールを作成し、homeCtrlにルートモジュールを依存関係としてロードさせる方がよいでしょうか？

Answer 1

url: '/search?searchTerms',を定義すると、の状態でsearchTermsという名前のクエリパラメータを受け入れることを意味します。

どちらかstate定義でqに名前を変更します。

url: '/search?q', 

それともURLでクエリのparamとしてsearchTermsを渡す：

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

はEDIT：

そしてもちろん、 @sidが述べたように、$state.goを使用して状態間を移動する必要があります。$location.path。

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

Answer 2

あなたは、$ location.pathを直接使用してui.routerパラダイムを混在させようとしているようです。代わりに$ state.go（ 'search'）を使わないでください。これを読む：

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

も

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

THIS

を、状態間のsearchParamsのあなたの通過が正しく見えません。これをよりよく理解するには、次のリンクを参照してください。私はすでに私のコード（コメント）にご提案していたよう

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