Как передать запрос в маршрутах angular?
Я работаю с маршрутами 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;
}]
);
Ответы
Ответ 1
Я не думаю, что маршруты работают с строками запроса. Вместо url.com?key=value
вы можете использовать более URL-адрес RESTful, например url.com/key/value?
. Затем вы определяете свои маршруты следующим образом:
.when('/albums', ...)
.when('/albums/id/:album_id', ...)
или, возможно,
.when('/albums', ...)
.when('/albums/:album_id', ...)
Ответ 2
Правильно, что маршруты не работают с строками запросов, однако это не означает, что вы не можете использовать строки запроса для передачи данных между страницами при переключении маршрутов! Вопиющее ограничение с параметрами маршрута заключается в том, что они не могут быть обновлены без перезагрузки страницы. Иногда это нежелательно, например, после сохранения новой записи. Первоначальный параметр маршрута был 0 (для обозначения новой записи), и теперь вы хотите обновить его с правильным идентификатором, возвращаемым через ajax, чтобы, если пользователь обновляет страницу, они видят свою новую сохраненную запись. Невозможно сделать это с помощью параметров маршрута, но это можно сделать, используя вместо этого строки запроса.
Секрет состоит в том, чтобы не включать строку запроса при изменении маршрута, поскольку это не приведет к тому, что он не будет соответствовать шаблону маршрута. Что вы можете сделать, это изменить маршрут, а затем применить параметры строки запроса. В основном
$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...
Красота заключается в том, что служба $routeParams обрабатывает значения строки запроса одинаково с реальными параметрами маршрута, поэтому вам даже не придется обновлять свой код, чтобы обрабатывать их по-разному. Теперь вы можете обновить параметры без перезагрузки страницы, включив reloadOnSearch: false в определение маршрута.
Ответ 3
Вы можете посмотреть метод search
в $location
( docs). Он позволяет добавлять некоторые ключи/значения в URL.
Например, $location.search({"a":"b"});
вернет этот URL-адрес: http://www.example.com/base/path?a=b
.
Ответ 4
использовать параметры маршрута
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.$routeParams
Ответ 5
Я могу думать только о двух usecases для строки запроса в URL:
1) Если вам нужна пара ключей/значений вашего запроса в вашем контроллере (например, для печати Hello {{name}} и получения имени в querystring, такого как? name = John), то, как сказал Франциус, просто используйте $location.search, и вы получите querystring как объект ({name: John}), который затем можно использовать, поместив его в область видимости или что-то в этом роде (например, $scope.name = location.search(). name;).
Если вам нужно перенаправить на другую страницу вашего маршрутизатора на основе того, что указано в querystring, например (? page = Thatpage.htm), создайте redirectTo: в вашем маршрутизатореProvider.when() и он получит запрос объект в качестве третьего параметра. посмотрите на 2:10 следующего видео EggHead:
http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto
в основном, redirectTo: function (routeParams, path, search) {return search.page}