AngularJS $ स्थान का उपयोग करके एक url में क्वेरी स्ट्रिंग से मान प्राप्त करना

Question

$ स्थान के बारे में। खोज, डॉक्स कहते हैं,

बिना किसी पैरामीटर के कॉल किए जाने पर वर्तमान url के खोज भाग (ऑब्जेक्ट के रूप में) पर लौटें।

मेरे url में, मेरे क्वेरी स्ट्रिंग में एक परम है? एक मान के बिना test_user_bLzgB '। इसके अलावा '$ location.search ()' एक वस्तु देता है। मुझे वास्तविक पाठ कैसे मिलेगा?

Comments

आपको क्या वस्तु मिलती है? क्या आपके पास एक प्लंकर या एक फील है जो आपके सामने आने वाली समस्या को प्रदर्शित करता है? जब आप उपयोग करते हैं तो आप सही होते हैं $location.search()लेकिन मैं "ऑब्जेक्ट" की जांच करना चाहता हूं जो आपको कॉल करने पर मिलता है ...

— callmekatootie

मुझे नहीं पता कि यह क्या वस्तु है। मैं गुणों की गणना करने की कोशिश की, लेकिन कोई भी प्रकट नहीं होता है।

— इयान वार्बटन

सुनिश्चित नहीं है कि एक क्वेरी कैसे करें जो एक क्वेरी स्ट्रिंग की जांच करती है।

— इयान वॉर्बर्टन

Answer 1

यह सुनिश्चित नहीं है कि स्वीकार किए गए उत्तर के बाद से यह बदल गया है, लेकिन यह संभव है।

$location.search()कुंजी-मूल्य जोड़े की एक वस्तु लौटाएगा, क्वेरी स्ट्रिंग के समान जोड़े। एक कुंजी जिसका कोई मूल्य नहीं है, वह वस्तु के रूप में सही है। इस मामले में, वस्तु होगी:

{"test_user_bLzgB": true}

आप इस मान को सीधे एक्सेस कर सकते हैं $location.search().test_user_bLzgB

उदाहरण (बड़ी क्वेरी स्ट्रिंग के साथ): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&alomething=Somethingelse

नोट: हैश के कारण (जैसा कि यह http://fiddle.jshell.net/#/url पर जाएगा , जो एक नई फ़ाइडल बनाएगा), यह फ़ेल्ड उन ब्राउज़र में काम नहीं करेगा जो js इतिहास का समर्थन नहीं करते हैं (काम नहीं करेगा) आईई में <10)

संपादित करें:
जैसा कि @Naresh और @DavidTchepak द्वारा टिप्पणियों में बताया गया है, को $locationProviderभी ठीक से कॉन्फ़िगर करने की आवश्यकता है: https://code.angularjs.org/1.2.23/docs/guide/oslocation#/location-service-configuration

Comments

जैसा कि नरेश ने उल्लेख किया है, इसे $locationProviderभी ठीक से कॉन्फ़िगर करने की आवश्यकता है: code.angularjs.org/1.2.23/docs/guide/… (यह मुझे उलझा देता है । उम्मीद है कि लिंक दूसरों को कुछ समय बचाता है।)

— डेविड टीचपक

लोकेशन प्रोवाइडर को कॉन्फ़िगर करने के लिए, आपको चाहिए: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] आपको HTML फ़ाइल में बेस टैग की भी आवश्यकता है: "<href =" / ">

— अमीन एरियाना

प्रेरणा और उपयोगी सुझावों के लिए धन्यवाद, बस मेरा मामला साझा करें। मैं एक निरंतरता बनाता हूं जिसे userConfig कहा जाता है और सब कुछ अंदर रख दिया जाता है, उपयोगकर्ता लचीलेपन के लिए कुछ सेटिंग्स क्वेरी स्ट्रिंग द्वारा ओवरराइड की जा सकती हैं। मैं इसका उपयोग करता हूं और क्वेरी को एक ग्लोबलकंट्रोलर स्कोप वैरिएबल में डाल देता हूं जो HTML टैग में है ताकि कोई भी चाइल्ड कंट्रोलर सर्विस सहित पैरामीटर ले सके। क्योंकि userConfig को भी सेवा में रखा गया है। तो वस्तुतः, वे एक साथ बातचीत कर सकते हैं।

— सिमोंगसीसी 14

मुझे यह आसान लगा कि मैं एक js फ़ंक्शन का उपयोग कर सकता हूं, $ location.search () में कई चलते हुए भाग हैं। क्वेरी स्ट्रिंग पैरामीटर प्राप्त करने के लिए बहुत सारे कोड उदाहरण हैं।

— नूंडर

@ TheSharpieOne यदि आपके पास एक पल है तो आप इस प्रश्न पर एक नज़र डाल सकते हैं? stackoverflow.com/questions/43121888/…

— लियोन गबन

Answer 2

यदि आपको क्वेरी स्ट्रिंग को पाठ के रूप में देखना है, तो आप इसका उपयोग कर सकते हैं: $window.location.search

Comments

यह उत्तर कैसे नहीं है? हो सकता है कि यह थोड़ा कम है, लेकिन यह करता है सवाल का जवाब देने लगते हैं।

— लेओ लाम

यदि आप टाइमस्टैम्प की जांच करते हैं, तो डैन की टिप्पणी के 2 घंटे बाद जवाब संपादित किया गया था। यह वास्तव में इतना महत्वपूर्ण नहीं है, लेकिन मुझे यह चौंकाने वाला लगा कि लीओ की टिप्पणी को खारिज किया जा रहा है, इसलिए मैंने सोचा कि मैं इसे इंगित करूंगा।

— बिल तारबेल

Answer 3

$location.search()एक ऑब्जेक्ट देता है, जिसमें चर और मान के रूप में कुंजी शामिल हैं। इसलिए: यदि आप अपनी क्वेरी स्ट्रिंग इस तरह लिखते हैं:

?user=test_user_bLzgB

आप आसानी से इस तरह से पाठ प्राप्त कर सकते हैं:

$location.search().user

यदि आप एक कुंजी का उपयोग नहीं करना चाहते हैं, जैसे मान? फू = बार, मैं हैश #test_user_bLzgB का उपयोग करने का सुझाव देता हूं,

और बुला रहा है

$location.hash()

वह 'test_user_bLzgB' लौटाएगा जो वह डेटा है जिसे आप पुनः प्राप्त करना चाहते हैं।

अतिरिक्त जानकारी:

यदि आपने क्वेरी स्ट्रिंग विधि का उपयोग किया है और आपको $ location.search () के साथ एक खाली ऑब्जेक्ट मिल रहा है, तो यह संभवत: इसलिए है क्योंकि html5 के बजाय कोणीय हैशबंग रणनीति का उपयोग कर रहा है ... इसे काम करने के लिए, इस कॉन्फिगर को अपने ऐड में जोड़ें मापांक

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

Answer 4

क्वेरी स्ट्रिंग उपयोग # प्राप्त करने के लिए सबसे पहले URL प्रारूप को सही बनाएं ? Q = string जो मेरे लिए काम करती है

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

नियंत्रक में $ स्थान सेवा इंजेक्ट करें

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

तो आउट पुट एब्सकांड होना चाहिए

Answer 5

आप इसे भी उपयोग कर सकते हैं

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');

Comments

आपने एक अन्य SOF उत्तर से उस फ़ंक्शन को कॉपी किया है ... अपने स्रोत को संदर्भित करने के लिए सबसे अच्छा।

— आर्केल्डन

हां यह वही है जो मैं उपयोग करता हूं, इसे एसओ

— न्यूंडर

Answer 6

यदि आपका $location.search()काम नहीं हो रहा है, तो सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

1) html5Mode(true)ऐप के मॉड्यूल कॉन्फिगर में कॉन्फ़िगर किया गया है

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

2) <base href="https://stackoverflow.com/">आपके HTML में मौजूद है

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

संदर्भ:

1. आधार href = "/"
2. html5Mode

Comments

"html5Mode (सच) एप्लिकेशन के मॉड्यूल कॉन्फिगर में कॉन्फ़िगर किया गया है" - समझाएं

— 15ee8f99-57ff-4f92-890c-b56153

@EdPlunkett - क्षमा करें, मेरा कहने का मतलब यह है कि यह कोणीय ऐप ऑब्जेक्ट के कॉन्फिग विधि में कॉन्फ़िगर किया गया है। जैसे यहां यह है: var appModule = angular.module ('myAppModule', []);

— महेश

धन्यवाद, मैं

— एंगुलर के

हां, यह इतना महत्वपूर्ण है, एक ही मुद्दे का सामना करना पड़ा

— बहादुर तस्दिमीर

Answer 7

कोणीय इस तरह के क्वेरी स्ट्रिंग का समर्थन नहीं करता है।

URL का क्वेरी भाग &कुंजी-मूल्य जोड़े का एक- निर्धारित अनुक्रम माना जाता है , इस प्रकार एक वस्तु के रूप में पूरी तरह से व्याख्या योग्य है।

क्वेरी स्ट्रिंग्स को प्रबंधित करने के लिए कोई भी एपीआई नहीं है जो कुंजी-मूल्य जोड़े के सेट का प्रतिनिधित्व नहीं करता है।

Answer 8

मेरे NodeJS उदाहरण में, मेरे पास एक यूआरएल है "लोकलहोस्ट: 8080 / सूचियाँ / सूची 1.html। X1 = y" जो मैं मान लेना चाहता हूं और मान प्राप्त करना चाहता हूं।

X1 = y प्राप्त करने के लिए $ location.search () के साथ काम करने के लिए, मैंने कुछ चीजें की हैं

1. स्क्रिप्ट स्रोत कोणीय-मार्ग ।js के लिए
2. अपने एप्लिकेशन मॉड्यूल की निर्भरता में 'ngRoute' इंजेक्षन करें
3. अपने स्थान को कॉन्फ़िगर करें Provider
4. $ स्थान के लिए आधार टैग जोड़ें (यदि आप नहीं, आपकी खोज) () X1 कुछ भी नहीं या अपरिभाषित लौटाएगा। या यदि आधार टैग में गलत जानकारी है, तो आपका ब्राउज़र स्क्रिप्ट के अंदर आपकी फ़ाइलों को खोजने में सक्षम नहीं होगा। आपकी .html ज़रूरत है। अपनी फ़ाइल स्थानों का परीक्षण करने के लिए हमेशा पृष्ठ का दृश्य स्रोत खोलें!)
5. स्थान सेवा को खोजें (खोज)

मेरी सूची 1 .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();
    });

और मेरी सूची 1.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

Answer 9

मेरा फिक्स अधिक सरल है, एक कारखाना बनाना, और एक चर के रूप में लागू करना। उदाहरण के लिए

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>