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

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

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

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

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

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


Обновление:

Я опубликовал решение ниже, но оно меня не совсем устраивает. В документации в [Developer Guide: Angular Services: Using $location][1] говорится следующее о $location:

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

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

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

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

[1]: http://docs.angularjs.org/guide/ $location

Комментарии к вопросу (3)

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

// 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 менее полезны; $location.search() может быть вызван в любое время.

Комментарии (6)

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

Для этого можно просто использовать:

$location.search().target

для получения доступа к параметру '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);
    }
}
<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>

    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>

    target=Pawel

</div>
Комментарии (12)

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




  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>



Target: {{target}}<br/>


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

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

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

Соответствующая документация находится в [Developer Guide: Angular Services: Using $location][1] (странно, что мой поиск в google не нашел этого...).

[1]: https://docs.angularjs.org/guide/ $location

Комментарии (3)

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

  1. С помощью $routeParams

Лучшим и рекомендуемым решением является использование $routeParams. на ваш контроллер. Это требует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. Используя $расположение.поиск().

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

Вы можете заставить его работать путем добавления #/ в URL. http://localhost/test#/?param1=abc&параметр2=деф

$расположение.поиск() возвращает объект типа:

{
  param1: 'abc',
  param2: 'def'
}
Комментарии (1)

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

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

$окно.расположение.поиск

Комментарии (0)

Просто собрать описание .

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

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

      $locationProvider.html5Mode(true);
 }]);
Комментарии (1)

Просто точность Эллис Уайтхед'ы ответ. $locationProvider.html5Mode(true); в выиграл'т работать с новой версией в AngularJS без указания базовый URL-адрес для приложения С в <база с href=" и" и> тег или параметрrequireBaseнаfalse`

Доктор :

если вы настраиваете $расположение использовать html5Mode (история.pushState), необходимо указать базовый URL-адрес для приложения с <база с href=" и" и> бирка или настроить $locationProvider не требует фундамента теге путем передачи определение объекта с requireBase:false в $locationProvider.html5Mode():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
Комментарии (0)

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

Что'с самым кратким образом, чтобы прочитать параметры запроса на 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'}




  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>



Target: {{target}}<br/>




($location.search()).target
Комментарии (0)

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

Комментарии (1)

Я обнаружил, что для СПА HTML5Mode вызывает много 404 ошибки, и не надо, чтобы $расположение.поиск работы в этом случае. В моем случае я хочу, чтобы захватить URL в качестве параметра строки запроса, когда пользователь заходит на мой сайт, независимо от того, какой "в разделе" они изначально по ссылке, и сможете отправить их на эту страницу после того, как они войти в систему. Так что я просто захватить все, что написано в приложении.запустить

$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'];
    }
    ...
}

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

Комментарии (0)

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

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

у вас

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

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

Комментарии (2)