Как получить параметры URL с помощью AngularJS

Исходный HTML-код

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

Исходный код AngularJS

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

Здесь обе переменные loc и loc1 возвращают test в качестве результата для вышеуказанного URL. Это правильный путь?


person praveenpds    schedule 01.08.2012    source источник
comment
Вы можете проверить $routeParams.   -  person Nick Heiner    schedule 09.11.2012
comment
Непонятно, о чем вы здесь спрашиваете... документы $routeParams и $location#methods должны помочь вам начать   -  person deck    schedule 06.09.2013
comment
Пожалуйста, рассмотрите возможность добавления комментария при голосовании против, чтобы вопрос можно было улучшить. Спасибо.   -  person praveenpds    schedule 13.08.2014


Ответы (8)


Я знаю, что это старый вопрос, но мне потребовалось некоторое время, чтобы разобраться с ним, учитывая скудную документацию по Angular. RouteProvider и routeParams — это то, что нужно. Маршрут связывает URL-адрес с вашим контроллером/представлением, а routeParams можно передать в контроллер.

Ознакомьтесь с проектом Angular seed. В app.js вы найдете пример поставщика маршрутов. Чтобы использовать параметры, просто добавьте их следующим образом:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

Затем в вашем контроллере введите $routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

При таком подходе вы можете использовать параметры с URL-адресом, например: "http://www.example.com/view1/param1/param2"

person Jeff    schedule 21.05.2013
comment
Обратите внимание, что последняя строка этого примера }); должна быть }]); - person Andrew Lank; 18.09.2013
comment
Также можно получить другие произвольные параметры в форме строки запроса /view/1/2?other=12 с $routeParams.other - person DavidC; 18.08.2014
comment
Я думаю, что в вашем контроллере повторяется «var param1». Я не мог отредактировать такое простое изменение. - person Tom; 14.05.2016
comment
Angular делает это так просто, а также ваш ответ такой приятный описательный - person Mohammad Kermani; 03.08.2016
comment
Пример назначения и отправки: var param1 = abc; $location.path('/view1/:' + param1);$route.reload(); - person Robot70; 03.08.2016
comment
Отлично подходит, когда у вас есть несколько интерфейсных маршрутов, излишество, если вы просто хотите проанализировать параметры. - person jiminikiz; 31.03.2017

Хотя маршрутизация действительно является хорошим решением для синтаксического анализа URL-адресов на уровне приложения, вы можете захотеть использовать более низкоуровневую службу $location, внедренную в вашу собственную службу или контроллер:

var paramValue = $location.search().myParam; 

Этот простой синтаксис будет работать для http://example.com/path?myParam=paramValue. Однако, только если вы ранее настроили $locationProvider в режиме HTML 5:

$locationProvider.html5Mode(true);

В противном случае взгляните на http://example.com/#!/path?myParam=someValue " Синтаксис Hashbang», который немного сложнее, но имеет преимущество работы в старых браузерах (несовместимых с HTML 5).

person Javarome    schedule 20.10.2013
comment
похоже, вам нужно добавить $locationProvider.html5mode(true) в качестве конфигурации модуля, например: angular.module(myApp, []). config(function($locationProvider) { $locationProvider.html5Mode(true); }); - person sq1020; 04.08.2014
comment
А для html5Mode требуется тег <base href="http://example.com/en/" /> в файле index.html. - person cespon; 31.03.2015
comment
что мне нравится в вашем решении, так это то, что вы даже можете передавать объекты и получать их как объект. - person Shilan; 26.11.2015
comment
Также можно не добавлять тег ‹base› и указать его так: .config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }]) - person Guillaume; 12.11.2016
comment
В Angular 1.5.8 мне не нужно было настраивать $locationProvider, чтобы это работало. http://example.com/path#?someKey=someVal, затем $location.search().someKey // => 'someVal' - person jiminikiz; 31.03.2017


Я нашел решение, как использовать $location.search() для получения параметра из URL

сначала в URL вам нужно поставить синтаксис " # " перед параметром, как в этом примере

"http://www.example.com/page#?key=value"

а затем в вашем контроллере вы помещаете $location в функцию и используете $location.search(), чтобы получить параметр URL для

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);
person Mekha Lomlao    schedule 30.05.2018
comment
Он работает для параметров запроса, а приведенный ниже ответ @jeff предназначен для переменных пути. - person Abdeali Chandanwala; 01.07.2019

Если уже опубликованные ответы не помогли, можно попробовать $location.search().myParam; с URL-адресами http://example.domain#?myParam=paramValue

person ak1    schedule 26.02.2016
comment
Это второе решение с наибольшим количеством голосов здесь... И опубликовано за 3 года до этого... - person JustCarty; 25.01.2018

Простой и легкий способ получить значение URL

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"
person Rohit Parte    schedule 27.06.2019

При использовании angularjs с Express

В моем примере я использовал angularjs с экспресс-маршрутизацией, поэтому использование $routeParams могло испортить мою маршрутизацию. Я использовал следующий код, чтобы получить то, что я ожидал:

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

Это получает шаблон URL и путь к данному местоположению. Я просто называю это с помощью:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

Собрав все вместе, мой контроллер:

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

Результат будет:

{ table: "users", id: "1", place_id: "43", interval: "week" }

Надеюсь, это поможет кому-то там!

person Antonio    schedule 17.10.2019

person    schedule
comment
window.location.href на самом деле то, что мне нужно в моем случае. Не всегда должно быть какое-то причудливое решение Angular. Это сделало трюк для меня. - person Gishas; 02.02.2021