Как передать запрос в маршрутах 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}