Jak uzyskać parametry adresu URL za pomocą AngularJS

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?

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 ”

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.

Jeśli używasz ngRoute, możesz wstrzyknąć $routeParamsdo swojego kontrolera

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

Jeśli używasz routera kątowego, możesz wstrzykiwać $stateParams

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

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

}]);

Jeśli już opublikowane odpowiedzi nie pomogły, można spróbować za pomocą $ location.search (). MyParam; z adresami URL http: //example.domain#? myParam = paramValue

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

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"

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!