AngularJS를 사용하여 URL 매개 변수를 얻는 방법

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두 가지 모두 위 URL에 대한 결과 로 테스트 를 반환 합니다. 이것이 올바른 방법입니까?

나는 이것이 오래된 질문이라는 것을 알고 있지만 드문 Angular 문서를 감안할 때 이것을 분류하는 데 약간의 시간이 걸렸습니다. RouteProvider 및 routeParams는 길을 가야하는 것입니다. 경로는 URL을 Controller / View에 연결하고 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;
  ...
}]);

이 방법을 사용하면 " http://www.example.com/view1/param1/param2 " 와 같은 URL과 함께 params를 사용할 수 있습니다.

라우팅은 실제로 응용 프로그램 수준 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와 호환되지 않음)에서 작동하는 이점이 있습니다. 잘.

ngRoute를 사용하는 경우 $routeParams컨트롤러에 주입 할 수 있습니다

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

각도 UI 라우터를 사용하는 경우 주사 할 수 있습니다 $stateParams

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

$ 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

}]);

이미 게시 된 답변이 도움이되지 않으면 $ location.search (). myParam; 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 "";
    }

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"

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

이것이 누군가를 도울 수 있기를 바랍니다!