как передать строку запроса в угловых маршрутах?

Я работаю с маршрутами AngularJS и пытаюсь понять, как работать со строками запросов (например, url.com?key=value). Angular не понимает маршрут, который содержит пару ключ-значение для одного и того же имени albums:

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
        ['$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
            when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
            otherwise({redirectTo: '/home'});
        }],
        ['$locationProvider', function($locationProvider) {
            $locationProvider.html5Mode = true;
        }]
    );

angularjs angularjs-routing
person Amb    schedule 01.03.2013    source источник

Ответы (5)


arrow_upward
26
arrow_downward

Я не думаю, что маршруты работают со строками запроса. Вместо url.com?key=value вы можете использовать более RESTful URL-адрес, например url.com/key/value? Тогда вы должны определить свои маршруты следующим образом:

.when('/albums', ...)
.when('/albums/id/:album_id', ...)

или, может быть

.when('/albums', ...)
.when('/albums/:album_id', ...)
person Mark Rajcok    schedule 01.03.2013
comment
Здесь вы получаете только часть правды. маршруты не работают со строками запроса, поскольку запрос не является частью маршрута. $location имеет хороший метод для строк запроса и отлично работает, как заявил Джош - person T.Z.; 09.12.2015

arrow_upward
65
arrow_downward

Верно то, что маршруты не работают со строками запросов, однако это не означает, что вы не можете использовать строки запросов для передачи данных между страницами при переключении маршрутов! Вопиющее ограничение параметров маршрута заключается в том, что их нельзя обновить без перезагрузки страницы. Иногда это нежелательно, например, после сохранения новой записи. Первоначальный параметр маршрута был равен 0 (чтобы обозначить новую запись), и теперь вы хотите обновить его с помощью правильного идентификатора, возвращенного через ajax, чтобы, если пользователь обновляет страницу, он видел свою недавно сохраненную запись. Это невозможно сделать с параметрами маршрута, но вместо этого это можно сделать, используя строки запроса.

Секрет в том, чтобы не включать строку запроса при изменении маршрута, потому что это приведет к тому, что он не будет соответствовать шаблону маршрута. Что вы можете сделать, так это изменить маршрут, а затем применить параметры строки запроса. В основном

$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...

Прелесть здесь в том, что служба $routeParams обрабатывает значения строки запроса идентично реальным параметрам маршрута, поэтому вам даже не придется обновлять свой код, чтобы обрабатывать их по-другому. Теперь вы можете обновить параметры без перезагрузки страницы, включив reloadOnSearch: false в определение маршрута.

person Josh    schedule 17.09.2014
comment
Спасибо за ответ. Интересно, что вы можете изменить маршрут, используя href тега привязки со строкой запроса (как показано в примере документации $route), но не с $location.path - person jEremyB; 11.11.2014
comment
Отличный ответ. Это был бы отличный пример для официальной документации, так как мне потребовалось некоторое время, чтобы понять, что параметры получения не проходят мимо маршрутизации. - person Filipe Silva; 23.06.2015

arrow_upward
14
arrow_downward

Вы можете посмотреть метод search в $location (документы) . Это позволяет вам добавлять некоторые ключи/значения к URL-адресу.

Например, $location.search({"a":"b"}); вернет этот URL: http://www.example.com/base/path?a=b.

person François Petitit    schedule 11.12.2013
comment
Спасибо! Было бы здорово, если бы вы добавили пример использования параметра a внутри контроллера с помощью $routeParams - person Jossef Harush; 06.04.2015
comment
@JossefHarush, просто используйте $location.search(), чтобы получить параметры. - person m.spyratos; 23.09.2016

arrow_upward
2
arrow_downward

использовать параметры маршрута

var Ctrl = function($scope, $params) {
  if($params.filtered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
};

Ctrl.$inject = ['$scope', '$routeParams'];

http://docs.angularjs.org/api/ng.%24routeParams

person wizztjh    schedule 01.03.2013
comment
Я должен вызывать две разные функции на обоих маршрутах. Я упомянул, какую функцию вызывать в своих html-файлах. Она хорошо отображает альбомы.html, но не отображает альбом_изображений.html.. поэтому ее функция также не вызывается. - person Amb; 01.03.2013

arrow_upward
0
arrow_downward

Я могу думать только о двух случаях использования строки запроса в URL:

1) Если вам нужна пара ключ/значение вашей строки запроса в вашем контроллере (например, чтобы напечатать Hello {{name}} и получить имя в строке запроса, например ?name=John), то, как сказал Франсиос, просто используйте $location. search, и вы получите строку запроса в виде объекта ({name:John}), который затем можно использовать, поместив его в область действия или что-то в этом роде (например, $scope.name = location.search().name;).

Если вам нужно перенаправить на другую страницу в вашем маршрутизаторе на основе того, что указано в строке запроса, например (?page=Thatpage.htm), создайте redirectTo: в вашем routerProvider.when(), и он получит объект поиска как свой. третий параметр. посмотрите 2:10 следующего видео EggHead: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

в основном, redirectTo: function (routeParams, path, search) {return search.page}

person Reza    schedule 02.01.2014