Jak uzyskać parametry adresu URL za pomocą AngularJS


199

Kod źródłowy 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>

Kod źródłowy 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>

Tutaj zmienne loci loc1oba zwracają wynik testu dla powyższego adresu URL. Czy to właściwy sposób?


1
Może chcesz sprawdzić $ routeParams .
Nick Heiner,

Nie wiadomo, co pytasz tutaj ... dolarów routeParams i $ # Lokalizacja metody docs powinno Ci zacząć
pokład

7
Zastanów się nad dodaniem komentarza podczas głosowania w celu poprawienia pytania. Dzięki.
praveenpds

Odpowiedzi:


314

Wiem, że to stare pytanie, ale zajęło mi to trochę czasu, aby to rozwiązać, biorąc pod uwagę rzadką dokumentację kątową. RouteProvider i routeParams jest droga. Trasa łączy adres URL do kontrolera / widoku, a routeParams można przekazać do kontrolera.

Sprawdź projekt nasion Angular . W pliku app.js znajdziesz przykład dostawcy trasy. Aby użyć parametrów, po prostu dołącz je w następujący sposób:

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

Następnie do kontrolera wstrzyknij $ routeParams:

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

Dzięki takiemu podejściu możesz używać parametrów z adresem URL, takich jak: „ http://www.example.com/view1/param1/param2


2
Zauważ, że ostatnia linijka w tym przykładzie });powinna brzmieć}]);
Andrew Lank

44
Można również uzyskać inne dowolne parametry w postaci ciągu zapytania /view/1/2?other=12z $routeParams.other
DavidC

Wydaje mi się, że w kontrolerze powtórzono „var param1”. Nie mogłem edytować tak prostej zmiany.
Tom

Angular sprawia, że ​​jest to łatwe, a twoja odpowiedź jest tak ładna opisowa
Mohammad Kermani

1
Przypisz i wyślij przykład: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
Robot70

158

Chociaż routing jest rzeczywiście dobrym rozwiązaniem do analizowania adresów URL na poziomie aplikacji, możesz chcieć skorzystać z bardziej niskiego poziomu $locationusługi, wprowadzonej we własnej usłudze lub kontrolerze:

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

Ta prosta składnia będzie działać http://example.com/path?myParam=paramValue. Jednak tylko jeśli wcześniej skonfigurowałeś $locationProvidertryb HTML 5:

$locationProvider.html5Mode(true);

W przeciwnym razie spójrz na http://example.com/#!/path?myParam=someValue Składnia „Hashbang”, która jest nieco bardziej skomplikowana, ale ma tę zaletę, że działa na starych przeglądarkach (niezgodnych z HTML 5), ponieważ dobrze.


16
wygląda na to, że musisz dodać $ locationProvider.html5mode (true) jako konfigurację modułu, taką jak: angular.module („myApp”, []). config (function ($ locationProvider) {$ locationProvider.html5Mode (true);});
sq1020

4
I html5Mode wymaga <base href="http://example.com/en/" />tagu w twoim index.html.
cespon

1
to, co podoba mi się w twoim rozwiązaniu, to to, że możesz nawet przepuszczać obiekty i otrzymujesz je jako obiekt.
Shilan

2
Możliwe jest również, aby nie dodawać tagu <base> i określać go w następujący sposób:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
Guillaume,

1
W Angular 1.5.8 nie musiałem konfigurować $locationProvider, aby to działało. http://example.com/path#?someKey=someVal, a następnie $location.search().someKey // => 'someVal'
jiminikiz


11

Znalazłem rozwiązanie, jak użyć $ location.search (), aby uzyskać parametr z adresu URL

najpierw w adresie URL należy wstawić składnię „#” przed parametrem takim jak ten przykład

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

a następnie w kontrolerze umieść $ location w funkcji i użyj $ location.search (), aby uzyskać parametr URL dla

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

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

}]);

Działa w zakresie parametrów zapytań, a poniższa odpowiedź @jeff dotyczy zmiennych ścieżek
Abdeali Chandanwala


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

Prosty i najłatwiejszy sposób na uzyskanie wartości adresu 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

Podczas korzystania z angularjs z express

W moim przykładzie korzystałem z angularjs z routingiem ekspresowym, więc użycie $ routeParams popsuło mi routing. Użyłem następującego kodu, aby uzyskać to, czego się spodziewałem:

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;
};

Otrzymuje szablon adresu URL i ścieżkę do określonej lokalizacji. Po prostu nazywam to z:

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

Podsumowując, mój kontroler to:

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

Wynik będzie:

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

Mam nadzieję, że to pomoże komuś tam!

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.