如何將查詢字符串追加到Angular UI中的URL

Question

我是AngularJS的新手。我使用ui-router和node.js作爲我的UI服務器來調用另一臺服務器的API。現在，我無法將查詢字符串附加到URL，具體取決於用戶輸入（下拉選擇）。

我AngularJS控制器代碼：

app.factory('server', ['$http', function($http){ 
    return { 
     getResults : function(color, size) { 
      var req = {}; 
      req.color = color; 
      req.size = size; 

      return $http({ 
       method: 'GET', 
       url: 'results', 
       params : req 
      }); 
     } 
    } 
}]); 

UI路由器在角：

$stateProvider.state('home', { 
    url: '/home', 
    templateUrl: '/home.html', 
    controller: 'MainCtrl', 
    data:{ 
     pageTitle: 'blah' 
    } 
}) 

在Node.js的，我有上述功能

$scope.getResults = function() { 
    server.getResults($scope.myColor, $scope.mySize) 
    .success(function(data) { 
     results = data; 
    }); 
}; 

AngularJS服務我的路線是這樣的：

app.get("/results", function (req, res) { 

    var api = 'some api call/' + req.query.color + '/' + req.query.size; 

    request(api, function (error, response, api) { 

     if (!error && response.statusCode == 200) { 
      res.json({ 
       Color: req.query.color, 
       Size: req.query.size, 
       Answer: api 
      }); 
     } 
    }); 
}); 

我想有瀏覽器的URL去從/家/家？顏色=紅色& &大小=大

顯然我不是這樣做的權利，在瀏覽器的URL現在是不是動態的。請說明如何正確執行此操作。

Answer 1

使用reloadOnSearch: false選項可以在狀態參數發生更改時停止重新加載當前路由。

$stateProvider.state('home', { 
    url: '/home?color&size', 
    templateUrl: '/home.html', 
    controller: 'MainCtrl', 
    data:{ 
     pageTitle: 'blah' 
    }, 
    reloadOnSearch: false //would not refresh state, for location changes. 
}) 

控制器

$scope.getResults = function() { 
    //change parameter of URL usingn $location.search. 
    $location.search('color', $scope.myColor); 
    $location.search('size', $scope.mySize); 
    server.getResults($scope.myColor, $scope.mySize) 
    .success(function(data) { 
     results = data; 
    }); 
};