Как получить параметры URL, используя AngularJS


199

Исходный код 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. Это правильный путь?


1
Вы можете проверить $ routeParams .
Ник Хейнер,

Непонятно, что вы спрашиваете здесь ... Документы $ routeParams и $ location # method должны помочь вам начать
колода

7
Пожалуйста, рассмотрите возможность добавления комментария при голосовании вниз, чтобы вопрос мог быть улучшен. Спасибо.
praveenpds

Ответы:


314

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

Проверьте угловой проект семени . В 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;
  ...
}]);

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


2
Обратите внимание, что последняя строка этого примера });должна быть}]);
Эндрю Ланк

44
Также можно получить другие произвольные параметры в виде строки запроса /view/1/2?other=12с помощью $routeParams.other
DavidC

Я думаю, что у вас есть 'var param1' в вашем контроллере. Я не мог редактировать такие простые изменения.
Том

Угловые сделать это так легко, а также ваш ответ так хорошо описательный
Мохаммад Кермани

1
Пример назначения и отправки: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
Robot70

158

Хотя маршрутизация действительно является хорошим решением для парсинга 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): хорошо.


16
кажется, что вы должны добавить $ locationProvider.html5mode (true) в качестве конфигурации модуля, например так: angular.module ("myApp", []). config (function ($ locationProvider) {$ locationProvider.html5Mode (true);});
sq1020

4
И html5Mode требует <base href="http://example.com/en/" />тег в вашем index.html.
отрываться

1
что мне нравится в вашем решении, так это то, что вы можете даже передавать объекты, и вы получаете их как объект.
Шилан

2
Также возможно не добавлять тег <base> и указывать его так:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Гийом

1
В Angular 1.5.8 мне не пришлось настраивать, $locationProviderчтобы это работало. http://example.com/path#?someKey=someValзатем $location.search().someKey // => 'someVal'
jiminikiz

32

Если вы используете ngRoute, вы можете ввести $routeParamsв свой контроллер

http://docs.angularjs.org/api/ngRoute/service/$routeParams

Если вы используете angular-ui-router, вы можете ввести $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing


1
Чтобы $stateParamsпоказать параметры запроса, мне нужно было указать их при определении состояний, как показано в github.com/angular-ui/ui-router/wiki/…
Parziphal

11

Я нашел решение, как использовать $ 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

}]);

Он работает для параметров запроса, а ответ @jeff ниже - для переменных пути
Абдеали Чанданвала


1
function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }

0

Простой и простой способ получить значение 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"

0

При использовании 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" }

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.