So erhalten Sie die URL-Parameter mit AngularJS


199

HTML-Quellcode

<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-Quellcode

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

Hier geben die Variablen locund loc1beide den Test als Ergebnis für die obige URL zurück. Ist das der richtige Weg?


1
Vielleicht möchten Sie $ routeParams auschecken .
— Nick Heiner

Nicht klar, was Sie hier fragen ... die Dokumente $ routeParams und $ location # sollten Ihnen den Einstieg erleichtern
— Deck

7
Bitte fügen Sie beim Abstimmen einen Kommentar hinzu, damit die Frage verbessert werden kann. Vielen Dank.
— Praveenpds

Antworten:


314

Ich weiß, dass dies eine alte Frage ist, aber angesichts der spärlichen Angular-Dokumentation habe ich einige Zeit gebraucht, um dies zu klären. Der RouteProvider und routeParams sind der richtige Weg. Die Route verbindet die URL mit Ihrem Controller / View und die routeParams können an den Controller übergeben werden.

Schauen Sie sich das Angular Seed- Projekt an. In der app.js finden Sie ein Beispiel für den Routenanbieter. Um Parameter zu verwenden, hängen Sie sie einfach wie folgt an:

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

Dann injizieren Sie in Ihren Controller $ routeParams:

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

Mit diesem Ansatz können Sie Parameter mit einer URL wie " http://www.example.com/view1/param1/param2 " verwenden.


2
Beachten Sie, dass die letzte Zeile dieses Beispiels });sein sollte}]);
— Andrew Lank

44
Kann auch andere beliebige Parameter in der Abfragezeichenfolge Form /view/1/2?other=12mit $routeParams.other
— DavidC

Ich denke, Sie haben die 'var param1' in Ihrem Controller wiederholt. Ich konnte eine so einfache Änderung nicht bearbeiten.
— Tom

Winkel machen es so einfach, und auch Ihre Antwort ist so schön beschreibend
— Mohammad Kermani

1
Beispiel zuweisen und senden: var param1 = "abc"; $ location.path ('/ view1 /:' + param1); $ route.reload ();
— Robot70

157

Während Routing in der Tat eine gute Lösung für das Parsen von URLs auf Anwendungsebene ist, möchten Sie möglicherweise den $locationDienst auf niedrigerer Ebene verwenden , der in Ihren eigenen Dienst oder Controller integriert ist:

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

Diese einfache Syntax funktioniert für http://example.com/path?myParam=paramValue. Allerdings nur, wenn Sie das konfiguriert haben$locationProvider im HTML 5-Modus haben:

$locationProvider.html5Mode(true);

Ansonsten schauen Sie sich die http://example.com/#!/path?myParam=someValue "Hashbang" -Syntax an, die etwas komplizierter ist, aber den Vorteil hat, mit alten Browsern (nicht HTML 5-kompatibel) zu arbeiten Gut.


16
Es scheint, als müssten Sie $ locationProvider.html5mode (true) als Modulkonfiguration wie folgt hinzufügen: angular.module ("myApp", []). config (Funktion ($ locationProvider) {$ locationProvider.html5Mode (true);});
— sq1020

4
Und html5Mode benötigt ein <base href="http://example.com/en/" />Tag in Ihrem index.html.
— Cespon

1
Was mir an Ihrer Lösung gefällt, ist, dass Sie sogar Objekte übergeben können und diese als Objekt erhalten.
— Shilan

2
Es ist auch möglich, das <base> -Tag nicht hinzuzufügen und wie folgt anzugeben:.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])
— Guillaume

1
In Angular 1.5.8 musste ich nicht konfigurieren $locationProvider, damit dies funktioniert. http://example.com/path#?someKey=someVal, dann $location.search().someKey // => 'someVal'
— jiminikiz


11

Ich habe eine Lösung gefunden, wie man $ location.search () verwendet, um Parameter von der URL abzurufen

Zuerst in der URL müssen Sie die Syntax "#" vor den Parametern wie in diesem Beispiel setzen

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

und dann setzen Sie in Ihrem Controller $ location in function und verwenden Sie $ location.search (), um den URL-Parameter für abzurufen

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

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

}]);

Seine Arbeit für Abfrageparameter und die folgende Antwort von @jeff ist für
— Pfadvariablen


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

Einfacher und einfacher Weg, um URL-Wert zu erhalten

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

Bei Verwendung von Angularjs mit Express

In meinem Beispiel habe ich anglejs mit Express verwendet, um das Routing durchzuführen, sodass die Verwendung von $ routeParams mein Routing durcheinander bringen würde. Ich habe den folgenden Code verwendet, um das zu erhalten, was ich erwartet hatte:

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

Dies erhält eine URL-Vorlage und den Pfad des angegebenen Speicherorts. Das nenne ich einfach mit:

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

Alles zusammen ist mein Controller:

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

Das Ergebnis wird sein:

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

Hoffe das hilft jemandem da draußen!

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.