AngularJS का उपयोग करके url पैरामीटर कैसे प्राप्त करें

Question

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>

यहां उपरोक्त URL के परिणाम के रूप में चर locऔर loc1रिटर्न दोनों का परीक्षण किया गया है। क्या यह सही तरीका है?

Comments

आप $ मार्गपार्म्स की जाँच करना चाहते हैं ।

— निक हेनर

स्पष्ट नहीं है कि आप यहाँ क्या पूछ रहे हैं ... $ मार्गप्रेम और $ स्थान # विधियाँ डॉक्स आपको आरंभ करनी चाहिए

— डेक

कृपया नीचे मतदान करते समय एक टिप्पणी जोड़ने पर विचार करें ताकि प्रश्न को बेहतर बनाया जा सके। धन्यवाद।

— अक्टूबर को प्रातः

Answer 1

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन मुझे इस समय को सुलझाने में कुछ समय लगा, जो कि विरल कोणीय दस्तावेज था। RouteProvider और routeParams जाने का रास्ता है। मार्ग आपके नियंत्रक / दृश्य के लिए URL को तार करता है और मार्गप्राम नियंत्रक में पारित किया जा सकता है।

की जाँच करें कोणीय बीज परियोजना। App.js के भीतर आप मार्ग प्रदाता के लिए एक उदाहरण मिल जाएगा। परम का उपयोग करने के लिए बस उन्हें इस तरह संलग्न करें:

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

फिर अपने कंट्रोलर में $ मार्गप्रेम इंजेक्ट करें:

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

इस दृष्टिकोण के साथ आप एक यूआरएल के साथ params का उपयोग कर सकते हैं जैसे: " http://www.example.com/view1/param1/par2 "

Comments

ध्यान दें कि इस उदाहरण की अंतिम पंक्ति });होनी चाहिए}]);

— एंड्रयू लैंक

इसके अलावा क्वेरी स्ट्रिंग के रूप में अन्य मनमाना पैरामीटर प्राप्त कर सकते हैं /view/1/2?other=12के साथ $routeParams.other

— DavidC

मुझे लगता है कि आपके पास आपके नियंत्रक में दोहराया गया 'var param1' है। मैं इस तरह के एक साधारण बदलाव को संपादित नहीं कर सका।

— टॉम

कोणीय इसे इतना आसान बनाते हैं, और साथ ही आपका उत्तर इतना अच्छा वर्णनात्मक है

— मोहम्मद कार्मानी

असाइन करें और उदाहरण भेजें: var param1 = "abc"; $ स्थान.पथ ('/ view1 /:' + param1); $ मार्ग। लोड ();

— रोबॉट 70

Answer 2

रूटिंग वास्तव में एप्लिकेशन-स्तरीय 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 "हैशबंग" सिंटैक्स पर एक नज़र डालें जो थोड़ा अधिक जटिल है, लेकिन पुराने ब्राउज़रों (गैर- HTML 5 संगत) पर काम करने का लाभ है कुंआ।

Comments

ऐसा लगता है जैसे आपको एक मॉड्यूल कॉन्फ़िगर के रूप में $ locationProvider.html5mode (true) जोड़ना होगा: angular.module ("myApp", [])। कॉन्फिग (फंक्शन ($ locationProvider) {$ locationProvider.html5Mode (true);});

— sq1020 16

और html5Mode को <base href="http://example.com/en/" />आपके लिए एक टैग की आवश्यकता होती है index.html।

— सेस्पॉन

आपके समाधान के बारे में मुझे जो पसंद है वह यह है कि आप वस्तुओं को पास भी कर सकते हैं, और आप उन्हें वस्तु के रूप में प्राप्त कर सकते हैं।

— शिलान

: यह इस तरह <आधार> टैग नहीं जोड़ सकते हैं और यह निर्दिष्ट करने के लिए भी संभव है.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])

— Guillaume

कोणीय 1.5.8 में, मुझे इसे $locationProviderकाम करने के लिए कॉन्फ़िगर करने की आवश्यकता नहीं थी । http://example.com/path#?someKey=someVal, उसके बाद $location.search().someKey // => 'someVal'

— जमैकीज़

Answer 3

यदि आप ngRoute का उपयोग कर रहे हैं, तो आप $routeParamsअपने नियंत्रक में इंजेक्ट कर सकते हैं

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

यदि आप कोणीय-यूआई-राउटर का उपयोग कर रहे हैं, तो आप इंजेक्ट कर सकते हैं $stateParams

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

Comments

$stateParamsक्वेरी मापदंडों को दिखाने के लिए, मुझे राज्यों को परिभाषित करते समय उन्हें निर्दिष्ट करना था, जैसा कि github.com/angular-ui/ui-router/wiki/…

— Parziphal

Answer 4

मुझे URL से पैरामीटर प्राप्त करने के लिए $ location.search () का उपयोग करने का समाधान मिला

इस तरह के पैरामीटर से पहले URL यू में पहले सिंटैक्स "#" डालना चाहिए

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

और फिर अपने कंट्रोलर में फ़ंक्शन में $ लोकेशन डालें और इसके लिए URL पैरामीटर प्राप्त करने के लिए $ location.search () का उपयोग करें

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

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

}]);

Comments

क्वेरी पैरामीटर के लिए अपने काम करता है और @jeff का जवाब नीचे पथ चर के लिए है

— Abdeali Chandanwala

Answer 5

यदि पहले से पोस्ट किए गए उत्तर मदद नहीं करते हैं, तो कोई $ स्थान के साथ प्रयास कर सकता है। खोज ()। MyParam; URLs http के साथ : //example.domain#? myParam = paramValue

Comments

यह यहाँ पर दूसरा सबसे ज्यादा मतदान किया गया समाधान है ... और इस से 3 साल पहले पोस्ट किया गया ... stackoverflow.com/a/19481865/3578036

— JustCarty

Answer 6

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

Answer 7

यूआरएल मान प्राप्त करने के लिए सरल और आसान तरीका

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"

Answer 8

एक्सप्रेस के साथ कोणीय का उपयोग करते समय

मेरे उदाहरण पर मैं एंगुलरज का इस्तेमाल कर रहा था, ताकि रूटिंग का इस्तेमाल कर $ मार्गप्रेम का इस्तेमाल कर अपनी रूटिंग में गड़बड़ कर सकूं। मैंने जो उम्मीद की थी, उसे पाने के लिए मैंने निम्नलिखित कोड का उपयोग किया:

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

उम्मीद है कि इससे वहां किसी को मदद मिलेगी!