如何将查询字符串追加到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; 
    }); 
};