Каков наиболее сжатый способ чтения параметров запроса в AngularJS?

Я хотел бы прочитать значения параметров URL-запроса, используя AngularJS. Я обращаюсь к HTML со следующим URL-адресом:

http://127.0.0.1:8080/test.html?target=bob

Как и ожидалось, location.search является "?target=bob" . Для доступа к значению цели я нашел несколько примеров, перечисленных в Интернете, но ни один из них не работает в AngularJS 1.0.0rc10. В частности, все undefined :

  • $location.search.target
  • $location.search['target']
  • $location.search()['target']

Кто-нибудь знает, что будет работать? (Я использую $location в качестве параметра для моего controllerа)


Обновить:

Я разместил решение ниже, но я не вполне доволен этим. Документация в Руководстве разработчика: Угловые сервисы. Используя $ location, укажите следующее $location :

Когда следует использовать $ location?

Каждый раз, когда ваше приложение должно реагировать на изменение текущего URL-адреса или если вы хотите изменить текущий URL-адрес в браузере.

В моем сценарии моя страница будет открыта с внешней веб-страницы с параметром запроса, поэтому я не буду реагировать на изменение текущего URL-адреса. Так что, может быть, $location – не лучший инструмент для работы (для уродливых деталей см. Мой ответ ниже). Поэтому я изменил название этого вопроса: «Как читать параметры запроса в AngularJS с помощью $ location?» на «Какой самый сжатый способ прочитать параметры запроса в AngularJS?». Очевидно, я мог бы просто использовать javascript и регулярное выражение для анализа location.search , но переход на тот уровень низкого уровня для чего-то такого базового действительно оскорбляет мою чувствительность программиста.

Итак: есть ли лучший способ использовать $location чем я, в моем ответе, или есть краткий запас?

    Вы можете ввести $ routeParams (требуется ngRoute ) в ваш controller. Вот пример из документов:

     // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:1, sectionId:2, search:'moby'} 

    EDIT: вы также можете получить и установить параметры запроса с помощью службы $ location (доступной в ng ), в частности, ее метода search : $ location.search () .

    $ routeParams менее полезны после начальной загрузки controllerа; $location.search() можно вызывать в любое время.

    Хорошо, что вам удалось заставить его работать с режимом html5, но также можно заставить его работать в режиме hashbang.

    Вы можете просто использовать:

     $location.search().target 

    чтобы получить доступ к параметру «целевого» поиска.

    Для справки, вот рабочий jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

     var myApp = angular.module('myApp', []); function MyCtrl($scope, $location) { $scope.location = $location; $scope.$watch('location.search()', function() { $scope.target = ($location.search()).target; }, true); $scope.changeTarget = function(name) { $location.search('target', name); } } 
     
    Bob Paul
    URL 'target' param getter: {{target}}
    Full url: {{location.absUrl()}}

    Чтобы дать частичный ответ на мой собственный вопрос, вот рабочий пример для браузеров HTML5:

            Target: {{target}}

    Ключ должен был вызвать $locationProvider.html5Mode(true); как сделано выше. Теперь он работает при открытии http://127.0.0.1:8080/test.html?target=bob . Я не доволен тем, что он не будет работать в старых браузерах, но я мог бы использовать этот подход в любом случае.

    Альтернативой, которая будет работать со старыми браузерами, было бы отказаться от html5mode(true) и вместо этого использовать следующий адрес с hash + slash:

    http://127.0.0.1:8080/test.html#/?target=bob

    Соответствующая документация находится в руководстве разработчика: Угловые сервисы: использование $ location (странно, что мой поиск в Google не нашел этого …).

    Это можно сделать двумя способами:

    1. Использование $routeParams

    Лучшее и рекомендуемое решение – использовать $routeParams в вашем controllerе. Он требует ngRoute модуля ngRoute .

      function MyController($scope, $routeParams) { // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'} var search = $routeParams.search; } 
    1. Использование $location.search() .

    Здесь есть оговорка. Он будет работать только в режиме HTML5. По умолчанию он не работает для URL-адреса, который не имеет хеша ( # ) в нем http://localhost/test?param1=abc&param2=def

    Вы можете заставить его работать, добавив #/ в URL. http://localhost/test#/?param1=abc&param2=def

    $location.search() чтобы вернуть объект, например:

     { param1: 'abc', param2: 'def' } 

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

    Это будет работать всегда:

    $ window.location.search

    Просто чтобы летать.

    Если ваше приложение загружается из внешних ссылок, то угловое не обнаружит это как изменение URL, поэтому $ loaction.search () даст вам пустой объект. Чтобы решить эту проблему, вам нужно установить следующие настройки приложения (app.js)

     .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); 

    Просто точность ответа Эллиса Уайтхеда. $locationProvider.html5Mode(true); не будет работать с новой версией angularjs без указания базового URL-адреса приложения с или установки параметра requireBase в значение false

    Из документа :

    Если вы настроите $ location для использования html5Mode (history.pushState), вам нужно указать базовый URL-адрес приложения с тегом или настроить $ locationProvider, чтобы не требовать базовый тег, передав объект определения с requireBase: false в $ locationProvider. html5Mode ():

     $locationProvider.html5Mode({ enabled: true, requireBase: false }); 

    вы также можете использовать $ location. $$ search.yourparameter

    это может помочь вам

    Каков наиболее сжатый способ чтения параметров запроса в AngularJS

     // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}        Target: {{target}}
    ($location.search()).target

    Я обнаружил, что для SPA HTML5Mode возникает множество проблем с ошибками 404, и нет необходимости делать работу $ location.search в этом случае. В моем случае я хочу захватить параметр строки запроса URL-адреса, когда пользователь приходит на мой сайт, независимо от того, к какой «странице» они изначально ссылаются, И иметь возможность отправлять их на эту страницу после входа в систему. Поэтому я просто фиксирую все этот материал в app.run

     $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) { if (fromState.name === "") { e.preventDefault(); $rootScope.initialPage = toState.name; $rootScope.initialParams = toParams; return; } if ($location.search().hasOwnProperty('role')) { $rootScope.roleParameter = $location.search()['role']; } ... } 

    то позже после входа я могу сказать $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

    Это немного поздно, но я думаю, что ваша проблема была в вашем URL. Если вместо

     http://127.0.0.1:8080/test.html?target=bob 

    ты имел

     http://127.0.0.1:8080/test.html#/?target=bob 

    Я почти уверен, что это сработало бы. Угловая действительно придирчивы к ее # /

    Давайте будем гением компьютера.