AngularJS $ location을 사용하여 URL의 쿼리 문자열에서 값 가져 오기

Question 1

$ location.search와 관련하여 문서 는 다음과 같이 말합니다.

매개 변수없이 호출되면 현재 URL의 검색 부분 (객체)을 반환합니다.

내 URL에 내 쿼리 문자열에 값이없는 매개 변수 '? test_user_bLzgB'가 있습니다. 또한 '$ location.search ()'는 객체를 반환합니다. 실제 텍스트는 어떻게 얻습니까?

Question 2

수락 된 답변이 수락 된 후 변경되었는지 확실하지 않지만 가능합니다.

$location.search()쿼리 문자열과 동일한 쌍인 키-값 쌍의 개체를 반환합니다. 값이없는 키는 객체에 true로 저장됩니다. 이 경우 개체는 다음과 같습니다.

{"test_user_bLzgB": true}

이 값에 직접 액세스 할 수 있습니다. $location.search().test_user_bLzgB

예 (더 큰 쿼리 문자열 포함) : http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

참고 : 해시 ( http://fiddle.jshell.net/#/url 로 이동하여 새 바이올린을 만들 것임)로 인해이 바이올린은 js 기록을 지원하지 않는 브라우저에서 작동하지 않습니다 (작동하지 않음). IE <10에서)

편집 :
@Naresh 및 @DavidTchepak의 의견에서 지적했듯이 https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration도$locationProvider 올바르게 구성해야합니다.

Question 3

쿼리 문자열을 텍스트로보기 만하면되는 경우 다음을 사용할 수 있습니다. $window.location.search

Question 4

$location.search()키는 변수로, 값은 그 값으로 구성된 객체를 반환합니다. 따라서 다음과 같이 쿼리 문자열을 작성하면 :

?user=test_user_bLzgB

다음과 같은 텍스트를 쉽게 얻을 수 있습니다.

$location.search().user

키, 값 (예 :? foo = bar)을 사용하지 않으려면 #test_user_bLzgB 해시를 사용하는 것이 좋습니다.

그리고 전화

$location.hash()

검색하려는 데이터 인 'test_user_bLzgB'를 반환합니다.

추가 정보:

쿼리 문자열 메서드를 사용하고 $ location.search ()로 빈 개체를 얻는 경우 Angular가 html5 전략 대신 해시 뱅 전략을 사용하고 있기 때문일 수 있습니다. 작동하려면이 구성을 사용자의 기준 치수

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);

Question 5

먼저 쿼리 문자열 사용을 얻기위한 URL 형식이 올바른지 확인 #? Q = 문자열 이 나를 위해 작품

http://localhost/codeschool/index.php#?foo=abcd

$ location 서비스를 컨트롤러에 삽입

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

따라서 출력은 abcd 여야합니다.

Question 6

이것도 사용할 수 있습니다

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');

Question 7

귀하의 $location.search()작동하지 않는 다음이 있는지 확인하십시오.

1) html5Mode(true)앱의 모듈 구성에서 구성됩니다.

appModule.config(['$locationProvider', function($locationProvider) {
   $locationProvider.html5Mode(true);
}]);

2) <base href="https://stackoverflow.com/">HTML에 있습니다.

<head>
  <base href="/">
  ...
</head>

참조 :

Question 8

Angular는 이러한 종류의 쿼리 문자열을 지원하지 않습니다.

URL의 쿼리 부분은 &키-값 쌍 의 -분리 된 시퀀스 여야 하므로 객체로 완벽하게 해석 할 수 있습니다.

키-값 쌍 집합을 나타내지 않는 쿼리 문자열을 관리하는 API는 전혀 없습니다.

Question 9

내 NodeJS 예제에는 값을 탐색하고 획득하려는 "localhost : 8080 / Lists / list1.html? x1 = y"라는 URL이 있습니다.

$ location.search ()를 사용하여 x1 = y를 얻기 위해 몇 가지 작업을 수행했습니다.

angular-route.js에 대한 스크립트 소스
앱 모듈의 종속성에 'ngRoute'삽입
locationProvider 구성
$ location에 대한 기본 태그를 추가합니다 (그렇지 않으면 search (). x1은 아무것도 반환하지 않거나 정의되지 않습니다. 또는 기본 태그에 잘못된 정보가있는 경우 브라우저가 src 스크립트 내에서 파일을 찾을 수 없습니다. .html이 필요합니다. 항상 페이지의보기 소스를 열어 파일 위치를 테스트하세요!)
위치 서비스 호출 (search ())

내 list1.js에는

    var app = angular.module('NGApp', ['ngRoute']);  //dependencies : ngRoute
    app.config(function ($locationProvider) { //config your locationProvider
         $locationProvider.html5Mode(true).hashPrefix('');
    });

    app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
        //var val = window.location.href.toString().split('=')[1];
        var val = $location.search().x1;    alert(val);
        $scope.xout = function () {
           datasvc.out(val)
           .then(function (data) {
              $scope.x1 = val;
              $scope.allMyStuffs = data.all;
           });
        };
        $scope.xout();
    });

내 list1.html에는

<head>
    <base href=".">
    </head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>

가이드 : https://code.angularjs.org/1.2.23/docs/guide/$location

Question 10

내 수정은 더 간단하고 공장을 만들고 하나의 변수로 구현합니다. 예를 들면

angular.module('myApp', [])

// This a searchCustom factory. Copy the factory and implement in the controller
.factory("searchCustom", function($http,$log){    
    return {
        valuesParams : function(params){
            paramsResult = [];
            params = params.replace('(', '').replace(')','').split("&");
            
            for(x in params){
                paramsKeyTmp = params[x].split("=");
                
                // Si el parametro esta disponible anexamos al vector paramResult
                if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && 
                    paramsKeyTmp[1] !== null){          
                    
                    paramsResult.push(params[x]);
                }
            }
            
            return paramsResult;
        }
    }
})

.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){
    $ctrl = this;
    
    var valueParams = searchCustom.valuesParams($routeParams.value);
    valueParams = valueParams.join('&');

    $http({
        method : "GET",
        url: webservice+"q?"+valueParams
    }).then( function successCallback(response){
        data = response.data;
        $scope.cantEncontrados = data.length; 
        $scope.dataSearch = data;
        
    } , function errorCallback(response){
        console.log(response.statusText);
    })
      
})

<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="SearchController">
<form action="#" >
                          
                            
                            <input ng-model="param1" 
                                   placeholder="param1" />
                            
                            <input  ng-model="param2" 
                                    placeholder="param2"/>
                        
<!-- Implement in the html code 
(param1={{param1}}&param2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->          
                        <a href="#seach/(param1={{param1}}&param2={{param2}})">
                            <buttom ng-click="searchData()" >Busqueda</buttom>
                        </a>
                    </form> 
</div>
</body>

스 니펫 확장