用戶界面路由器查詢參數

我想學習如何在小型搜索應用中使用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; 
    });

所以我的主頁現在真的很簡單。只是一個提供自動完成功能的搜索框。

我有這個在我的homeCtrl：

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

我的NG-提交按鈕調用搜索（），其中有這樣的代碼：

$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作爲依賴的「路由」模塊做成更好的做法，讓homeCtrl將路由模塊加載爲依賴項？

來源

2016-04-04 user3125823

當你定義url: '/search?searchTerms',這意味着search狀態接受名爲searchTerms的查詢參數。

無論是在state定義名稱更改爲q：

url: '/search?q',

或者通過searchTerms作爲URL的查詢參數：

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

編輯：

，當然還有，正如@sid所說，你應該使用$state.go在狀態之間導航，而不是在之間導航。

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

來源

2016-04-04 18:34:58 Daniel

它看起來像我已經有了你的建議，在我的代碼（評論），所以我只是取消註釋和評論的錯誤的線路，我仍然需要params {}？ – user3125823

不是，'params：'是用於'非url'的參數。 – Daniel

請看看我的更新，讓我知道如果這是朝着正確的方向？ – user3125823

看來你正在試圖將ui.router範例與直接使用$ location.path混合使用。爲什麼不使用$ state.go（'search'）來代替。閱讀：

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

和本

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

此外，您searchParams的通過狀態之間看起來並不正確。通過以下鏈接來更好地理解這一點。您可能需要一個resolve屬性在你的搜索狀態：

來源

2016-04-04 18:37:19 Sid

是啊，似乎我是，甚至沒有意識到它。還在學習Angular ......讓我再試一遍，我會讓你知道我是怎麼做出來的，謝謝你的努力！ – user3125823

所以它似乎如果我使用UI路由器，我根本不需要$ location服務，這是否正確？ – user3125823

正確的是，不應該爲此需要$ location服務。 – Sid

用戶界面路由器查詢參數

回答

相關問題