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

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

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

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

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

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

Обновить:

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

When should I use $location?

Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.

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

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

 rob23 дек. 2013 г., 03:40
Должно ли 't $ location.search () [' target '' работать?
 krispy22 мар. 2016 г., 02:21
@DanielF @rob, вы оба правы.$location.search()['target'] работает после$locationProvider.html5Mode(true) был вызван в современном браузере.
 Daniel F23 нояб. 2015 г., 20:39
Это не работает, потому что после пути нет хеша.http://127.0.0.1:8080/test.html#?target=bob будет работать, обратите внимание на# перед?. $location это метод маршрутизации второго уровня, который не отправляется на сервер.

Ответы на вопрос(10)

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

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

      $locationProvider.html5Mode(true);
 }]);
 24 авг. 2015 г., 02:13
Ага. Это было больно найти. Спасибо за комментарий.

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

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

ты имел

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

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

 12 мая 2016 г., 19:12
Это только если вы не включаете режим HTML5. # / Не всегда есть в угловых URL.
 11 янв. 2018 г., 01:10
Это если вы строите СПА. У всех моих URL есть #. А HTML5Mode означает: 1) 404 при обновлении страницы и 2) прямые URL-адреса не будут работать. Похоже на высокую цену.

что вам удалось заставить его работать в режиме 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);
    }
}
<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/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

 30 мая 2014 г., 16:00
вам нужны скобки вокруг $ location.search ()?
 25 июл. 2014 г., 11:36
Не забывайте, что если вы не используетеHTML5Mode(true) тогда доступны только параметры после # / или они добавляются в URL с # / в начале.
 31 июл. 2014 г., 18:37
@nandin: нет, вы делаетеnot нужны скобкиaround $location.search(), Я не уверен, почему этот ответ помещает их туда.
 04 июн. 2014 г., 16:03
@Magne: да, вам нужны скобки, $ location.search - это методdocs.angularjs.org/api/ng/service/$location
 23 дек. 2014 г., 19:35
Я чувствую, что @nandin неправильно понял & quot; Вам нужны скобки & quot; вопрос. Выdo нужны скобки после поиска, но не те, которые находятся вокруг$location.search().

вот рабочий пример для браузеров HTML5:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <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>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

Ключ должен был позвонить$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

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

 20 нояб. 2013 г., 10:01
Не долженng-controller атрибут<body> быть настроенным наMyApp?
 16 мая 2013 г., 04:48
Спасибо за это. Я выдернул свои волосы, пытаясь прочитать параметры запроса. Продолжал получать "неопределенный" как вы упомянули выше. Настройка режима на html5 сработала.
 10 июн. 2015 г., 19:03
Похоже, начиная с Angular 1.3, чтобы использовать html5Mode, вам также нужно либо добавить<base href="/" /> пометить или добавитьrequireBase: false в качестве другого параметра для вызова html5Mode.Details here

что для SPA HTML5Mode вызывает много проблем с ошибкой 404, и в этом случае нет необходимости заставлять $ location.search работать. В моем случае я хочу получить параметр строки URL-запроса, когда пользователь заходит на мой сайт, независимо от того, какая & quot; страница & quot; они изначально ссылаются на них и могут отправлять их на эту страницу после входа в систему. Поэтому я просто фиксирую все эти вещи в 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)

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <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>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

($location.search()).target

$ 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'}

РЕДАКТИРОВАТЬ: Вы также можете получить и установить параметры запроса с помощью$ место обслуживание (доступно вng), особенно егоsearch метод:$ Location.search ().

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

 02 апр. 2015 г., 17:46
это работает только если вы хотите использовать route в angularJS!
 Ellis Whitehead17 июн. 2012 г., 08:16
Спасибо за предложение и ссылку! Я прочитал страницу и также попытался настроить рабочий образец. Тем не менее, подход не сработает для меня, потому что я действительно не хочу использовать маршрутизацию в этом случае. Тем не менее, это было полезное предложение, и я добавлю его, как только у меня будет достаточно стека.
 08 февр. 2014 г., 22:54
Якуб прав. Это разные вещи. Когда вы используете & quot; поиск & quot; в угловом он добавляет запрос к хешу (конец URL). В спецификации RFC для URI указано, что параметры запроса должны предшествовать (а не добавлять) хэш. Таким образом, «поиск» это конструкция, которая только угловая будет экстраполировать и интерпретировать. Вот почему для решения выше будет работать только режим HTML5, поскольку вы делегируете все запросы одной странице (на уровне сервера) независимо от фактического URI.
 05 июн. 2013 г., 20:01
Я бы сказал, что ответ @ pkozlowski.opensource более точен в этой ситуации.
 09 авг. 2013 г., 16:22
Не совсем .. Параметры запроса включены в объект $ routeParams с обычными параметрами маршрута. и вы можете прочитать их / установить их с помощью $ location.search (). Я добавлю это к ответу.

Using $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;
  }
Using $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'
}
 01 окт. 2015 г., 22:25
Спасибо за ваш совет с # /

$locationProvider.html5Mode(true); не будет работать с новой версией angularjs без указания базового URL-адреса для приложения с<base href=""> пометить или установить параметрrequireBase вfalse

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

If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():

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

$ location.ри поддержке браузера.

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

$ window.location.search

Ваш ответ на вопрос