Как использовать Angular $ location для установки моего нового местоположения URL, динамически изменяя его параметры ключа?

Скажем, у меня есть конечная точка RESTful, которая принимает ряд фасетов для запроса данных. Вот несколько примеров:

example.com/search?type=Doctor&location=Boston,MA&radius=2  
example.com/search?type=Facility&location=Wayne,NJ&radius=3&gender=f  
example.com/search?type=Doctor&location=Patterson,NJ

Мой модуль принимает объект запроса для выполнения поиска:

console.log(query);
{
  type:'Doctor',
  location:'Boston,MA',
  radius:'2'
}

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
  });
}

Эти грани передаются через локальную модель в виде веб-формы:

 <input type="text" ng-model="query.location"/>
 <input type="text" ng-model="query.radius"/>
 <button type="button" ng-click="getSearch(query)">Search</button>

В getResults функции getResults я пытаюсь добавить параметры запроса к URL-адресу, как в приведенных выше примерах:

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
    search.appendQueryToURL(query);
  });
}

Как добавить параметры URL динамически в AngularJS?

Ответы

Ответ 1

Использование $ location

$location.path('/newValue').search({key: value});

Для приложений Non AngularJS:

Вы можете использовать history.js для динамического добавления параметров в url. затем разделить URL-адрес для получения параметров и перейти к угловому:

History.replaceState({state:1}, "State 1", "?Param1=something");

Я предлагаю history.js как IE до тех пор, пока ver9 не будет поддерживать состояние push-объекта истории, если вы собираетесь использовать IE10+ или google chrome, используйте объект состояния истории для обновления URL-адреса. Надеюсь, поможет :)

Ответ 2

В приведенном выше примере путь() вашего местоположения $ будет

'/search'

и корень

'http://example.com'

Возвращаясь к его вопросу, он не просил обновить местоположение новым путем, он попросил динамически обновить местоположение с помощью новых запросов пары ключ-значение!

Чтобы сделать это, это просто ежедневный jQuery $ x (newX)!

$location.search({type: x, location: y, radius: z});

или

$location.search({type: x, location: y});

Все это jQuery !!

Если он хочет изменить путь от поиска к чему-то еще, он может сделать:

$location.path('/otherPath'); 
//his new location would be 'example.com/otherPath'

Ответ 3

Фактически вместо того, чтобы использовать $ location для вызова конечной точки службы данных, обычный способ сделать это

<form id='searchForm' ng-submit="getDataService()" ng-controller="aController">
<input ng-model="type"/>
<input ng-model="location"/>
<input ng-model="radius"/>
<input ng-model="gender"/>
<button type='submit'/>
</form>

и в getDataService() выполните

$http.get( serviceUrl, config ).success( ...

с вашим сервисом

example.com/search/Facility/Wayne,NJ/3/f

после разбора (используя sprintf)