AngularJS में क्वेरी मापदंडों को पढ़ने का सबसे संक्षिप्त तरीका क्या है?

Question

मैं AngularJS का उपयोग करके URL क्वेरी मापदंडों के मूल्यों को पढ़ना चाहता हूं। मैं निम्नलिखित URL के साथ HTML तक पहुँच रहा हूँ:

http://127.0.0.1:8080/test.html?target=bob

जैसी उम्मीद थी, location.searchहै "?target=bob"। लक्ष्य के मूल्य तक पहुँचने के लिए , मैंने विभिन्न उदाहरणों को वेब पर सूचीबद्ध पाया है, लेकिन उनमें से कोई भी AngularJS 1.0.0rc10 में काम नहीं करता है। विशेष रूप से, निम्नलिखित सभी हैं undefined:

• $location.search.target
• $location.search['target']
• $location.search()['target']

किसी को पता है कि क्या काम करेगा? (मैं $locationअपने नियंत्रक के लिए एक पैरामीटर के रूप में उपयोग कर रहा हूं )

---

अपडेट करें:

मैंने नीचे एक समाधान पोस्ट किया है, लेकिन मैं इससे पूरी तरह संतुष्ट नहीं हूं। डेवलपर गाइड पर प्रलेखन : कोणीय सेवाएँ: $ स्थान का उपयोग करने के बारे में निम्नलिखित बताता है $location:

मुझे $ स्थान का उपयोग कब करना चाहिए?

किसी भी समय आपके एप्लिकेशन को वर्तमान URL में परिवर्तन या यदि आप ब्राउज़र में वर्तमान URL को बदलना चाहते हैं तो प्रतिक्रिया करने की आवश्यकता है।

मेरे परिदृश्य के लिए, मेरा पृष्ठ एक क्वेरी पैरामीटर के साथ एक बाहरी वेबपेज से खोला जाएगा, इसलिए मैं "वर्तमान URL में परिवर्तन के प्रति प्रतिक्रिया नहीं दे रहा हूं"। तो शायद $locationनौकरी के लिए सही उपकरण नहीं है (बदसूरत विवरण के लिए, नीचे मेरा जवाब देखें)। इसलिए मैंने इस प्रश्न का शीर्षक "$ स्थान का उपयोग करके AngularJS में क्वेरी पैरामीटर कैसे पढ़ें?" से बदल दिया है। "AngularJS में क्वेरी पैरामीटर पढ़ने के लिए सबसे संक्षिप्त तरीका क्या है?"। जाहिर है मैं सिर्फ जावास्क्रिप्ट और नियमित अभिव्यक्ति को पार्स करने के लिए उपयोग कर सकता था location.search, लेकिन कुछ बुनियादी के लिए निम्न-स्तर पर जाना वास्तव में मेरी प्रोग्रामर संवेदनाओं को प्रभावित करता है।

तो: क्या उपयोग करने के लिए एक बेहतर तरीका है $locationकी तुलना में मैं अपने जवाब में करते हैं, या वहाँ एक संक्षिप्त वैकल्पिक है?

Comments

$ स्थान नहीं होना चाहिए। खोज () ['लक्ष्य'] काम?

— लूट

यह काम नहीं करता है, क्योंकि मार्ग के बाद कोई हैश नहीं है। http://127.0.0.1:8080/test.html#?target=bobकाम करेंगे, #इससे पहले नोटिस ?। $locationएक दूसरी स्तर की रूटिंग विधि है जो सर्वर को नहीं भेजी जाती है।

— डेनियल एफ

@DanielF @rob, आप दोनों सही हैं। $location.search()['target']के बाद काम करता $locationProvider.html5Mode(true)है एक आधुनिक ब्राउज़र में बुलाया गया है।

— krispy

Answer 1

आप अपने कंट्रोलर में $ मार्गप्रेम ( एनकाउंटर की आवश्यकता है ) को इंजेक्ट कर सकते हैं। यहाँ डॉक्स से एक उदाहरण है:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

संपादित करें: आप $ लोकेशन सर्विस ( ngविशेष रूप से उपलब्ध ), विशेषकर इसकी searchविधि: $ location.search () के साथ क्वेरी पैरामीटर प्राप्त और सेट कर सकते हैं ।

नियंत्रक के प्रारंभिक भार के बाद $ मार्गप्रेम कम उपयोगी हैं; $location.search()कभी भी बुलाया जा सकता है।

Comments

सुझाव और लिंक के लिए धन्यवाद! मैंने पृष्ठ पढ़ा और एक कार्य नमूना स्थापित करने का भी प्रयास किया। हालाँकि, दृष्टिकोण मेरे लिए कारगर नहीं होगा, क्योंकि मैं वास्तव में इस मामले में रूटिंग का उपयोग नहीं करना चाहता। यह एक उपयोगी सुझाव था फिर भी, और जब मैं पर्याप्त स्टैकओवरफ़्लो प्रतिनिधि होगा, तो मैं इसे बढ़ा दूंगा।

— एलिस व्हाइटहेड

मैं कहूंगा @ pkozlowski.opensource का जवाब इस स्थिति में अधिक सटीक है

— कोल

बिलकुल नहीं .. क्वेरी पैरामाटर्स को सामान्य रूट पैरामीटर के साथ $ मार्गप्रेम ऑब्जेक्ट में शामिल किया गया है। और आप उन्हें पढ़ सकते हैं / $ ठिकाने के साथ सेट कर सकते हैं। खोज () मैं जवाब में जोड़ दूँगा।

— एंड्रयू जोसलिन

जकुब सही है। वे अलग चीजें हैं। जब आप कोणीय में "खोज" का उपयोग करते हैं, तो यह क्वेरी को हैश (URL के अंत) में जोड़ देता है। URI के लिए RFC की युक्ति बताती है कि क्वेरी परम को हैश नहीं (प्रीपेन्ड) करना चाहिए। इस प्रकार "खोज" एक निर्माण है जो केवल कोणीय व्याख्या और व्याख्या करेगा। यही कारण है कि उपरोक्त समाधान के लिए केवल HTML5 मोड काम करेगा, क्योंकि आप वास्तविक URI की परवाह किए बिना सभी अनुरोधों को एक पृष्ठ (सर्वर स्तर पर) में सौंप रहे हैं।

— स्टीवन पेना

यह तभी काम करता है जब आप कोणीयज में मार्ग का उपयोग करना चाहते हैं!

— हवामहलओ

Answer 2

अच्छा है कि आप इसे html5 मोड के साथ काम करने में कामयाब रहे हैं, लेकिन इसे हैशबैंग मोड में काम करना भी संभव है।

आप बस उपयोग कर सकते हैं:

$location.search().target

'लक्ष्य' खोज परम तक पहुंचने के लिए।

संदर्भ के लिए, यहां कार्यरत jsFiddle: http://web.archive.org/web/2013031706565234/http://jsfiddle.net/PHnLb/7/ है।

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $location) {

    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);

    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}

<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>
    
    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

Comments

क्या आपको $ location.search () के आसपास कोष्ठकों की आवश्यकता है?

— मैग्ने

@Magne: हाँ, आपको कोष्ठकों की आवश्यकता है, $ location.search एक विधि है docs.angularjs.org/api/ng/service/$location

— नंदिन

यह मत भूलो कि यदि आप उपयोग नहीं करते हैं HTML5Mode(true)तो # के बाद केवल परम / उपलब्ध हैं या शुरुआत में # के साथ यूआरएल में जुड़ जाते हैं।

— सेबेस्टियन

@ नंदिन: नहीं, आपको चारों ओर कोष्ठक की आवश्यकता नहीं है । मुझे यकीन नहीं है कि यह जवाब उन्हें वहाँ क्यों डालता है। $location.search()

— दान ताओ

मुझे लगता है कि @nandin ने "क्या आपको कोष्ठक की आवश्यकता है" प्रश्न गलत समझा। आप कर खोज के बाद कोष्ठकों, लेकिन नहीं की सम्पूर्णता के आसपास लोगों की जरूरत है $location.search()।

— । कारपेंटर

Answer 3

आंशिक रूप से मेरे स्वयं के प्रश्न का उत्तर देने के लिए, यहां HTML5 ब्राउज़रों के लिए एक नमूना काम कर रहा है:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

कुंजी को $locationProvider.html5Mode(true);ऊपर के रूप में कॉल करना था । यह अब खुलने पर काम करता है http://127.0.0.1:8080/test.html?target=bob। मैं इस तथ्य से खुश नहीं हूं कि यह पुराने ब्राउज़रों में काम नहीं करेगा, लेकिन मैं इस दृष्टिकोण का उपयोग कर सकता हूं।

एक विकल्प जो पुराने ब्राउज़रों के साथ काम करेगा वह html5mode(true)कॉल को छोड़ देगा और इसके बजाय हैश + स्लैश के साथ निम्न पते का उपयोग करेगा:

http://127.0.0.1:8080/test.html#/?target=bob

संबंधित दस्तावेज़ डेवलपर गाइड पर है: कोणीय सेवाएँ: $ स्थान का उपयोग करना (अजीब बात है कि मेरी Google खोज को यह नहीं मिला ...)।

Comments

इसके लिए धन्यवाद। मैं अपने बालों को बाहर खींच रहा हूँ, क्वेरी परम में पढ़ने की कोशिश कर रहा हूँ। जैसा कि आपने ऊपर बताया कि 'अपरिभाषित' हो रहा था। HTML5 में मोड सेट करना काम करता है।

— sthomps

सेट करने की ng-controllerविशेषता नहीं होनी चाहिए ? <body>MyApp

— जागो

ऐसा लगता है कि HTML5Mode का उपयोग करने के लिए Angular 1.3 के साथ शुरुआत करना, आपको या तो एक <base href="https://stackoverflow.com/" />टैग जोड़ने की आवश्यकता है , या requireBase: falseHTML5Mode पर कॉल के लिए किसी अन्य पैरामीटर के रूप में जोड़ें । विवरण यहाँ

— dae721

Answer 4

यह दो तरीकों से किया जा सकता है:

1. का उपयोग करते हुए $routeParams

सबसे अच्छा और अनुशंसित समाधान $routeParamsआपके नियंत्रक में उपयोग करना है। यह ngRouteमॉड्यूल को स्थापित करने की आवश्यकता है।

   function MyController($scope, $routeParams) {
      // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
      // Route: /Chapter/:chapterId/Section/:sectionId
      // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
      var search = $routeParams.search;
  }

2. का उपयोग कर $location.search()।

यहां एक कैवेट है। यह केवल HTML5 मोड के साथ काम करेगा। डिफ़ॉल्ट रूप से, यह उस URL के लिए काम नहीं करता है, जिसमें हैश ( #) नहीं हैhttp://localhost/test?param1=abc&param2=def

आप इसे #/URL में जोड़कर काम कर सकते हैं ।http://localhost/test#/?param1=abc&param2=def

$location.search() किसी वस्तु को वापस करने के लिए जैसे:

{
  param1: 'abc',
  param2: 'def'
}

Comments

— yonexbat

Answer 5

$ location.search () केवल HTML5 मोड के साथ और केवल सहायक ब्राउज़र पर ही काम करेगा।

यह हमेशा काम करेगा:

$ window.location.search

Answer 6

बस गर्मियों के लिए।

यदि आपका ऐप बाहरी लिंक से लोड किया जा रहा है, तो कोणीय अभ्यस्त यह URL परिवर्तन के रूप में पता लगाता है इसलिए $ loaction.search () आपको एक खाली ऑब्जेक्ट देगा। इसे हल करने के लिए आपको अपने एप्लिकेशन कॉन्फिगर (app.js) में निम्नलिखित सेट करने होंगे।

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

Comments

हां। यह खोजने के लिए एक दर्द था। टिप्पणी के लिए धन्यवाद।

— माइकबॉर्ग

Answer 7

एलिस व्हाइटहेड के उत्तर के लिए एक सटीक। $locationProvider.html5Mode(true);एक <base href="">टैग के साथ आवेदन के लिए आधार URL को निर्दिष्ट करने या पैरामीटर requireBaseको सेट करने के बिना कोणीयज के नए संस्करण के साथ काम नहीं करेगाfalse

डॉक्टर से :

यदि आप html5Mode (history.pushState) का उपयोग करने के लिए $ लोकेशन को कॉन्फ़िगर करते हैं, तो आपको एक टैग के साथ एप्लिकेशन के लिए बेस URL को निर्दिष्ट करना होगा या $ लोकेशन को कॉन्फ़िगर करना होगा। आवश्यकता के आधार पर परिभाषा ऑब्जेक्ट को पास करके आधार टैग की आवश्यकता नहीं होगी। html5Mode ():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

Answer 8

आप $ स्थान का उपयोग भी कर सकते हैं। $$ search.yourparameter

Comments

$$searchएक आंतरिक चर, जिनमें से उपयोग इस तरह के एक अच्छा विचार नहीं है।

— कुम्हारश

Answer 9

इससे आपको मदद मिल सकती है

AngularJS में क्वेरी मापदंडों को पढ़ने का सबसे संक्षिप्त तरीका क्या है

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

($location.search()).target

Answer 10

मैंने पाया कि एसपीए के लिए HTML5Mode 404 त्रुटि समस्याओं का कारण बनता है, और इस मामले में $ location.search कार्य करने के लिए आवश्यक नहीं है। मेरे मामले में, जब कोई उपयोगकर्ता मेरी साइट पर आता है, तो मैं एक URL क्वेरी स्ट्रिंग पैरामीटर को कैप्चर करना चाहता हूं, जिसकी परवाह किए बिना "पेज" वे शुरू में लिंक करते हैं, और लॉग इन करने के बाद उन्हें उस पेज पर भेजने में सक्षम होते हैं। इसलिए मैं बस सभी को कैप्चर करता हूं। app.run में वह सामान

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

फिर बाद में लॉगिन के बाद मैं कह सकता हूँ $ state.go ($ rootScope.initialPage, $ rootScope.initialParp)

Answer 11

थोड़ी देर हो चुकी है, लेकिन मुझे लगता है कि आपकी समस्या आपका URL था। अगर इसके बजाय

http://127.0.0.1:8080/test.html?target=bob

तुम थे

http://127.0.0.1:8080/test.html#/?target=bob

मुझे पूरा यकीन है कि इसने काम किया होगा। कोणीय वास्तव में अपने # के बारे में picky है

Comments

यदि आप HTML5 मोड को सक्षम नहीं कर रहे हैं, तो ही। # / हमेशा कोणीय कोणों में नहीं होता है।

— लोकलपीसीगय

यह है अगर आप एक एसपीए का निर्माण कर रहे हैं। मेरे सभी url में एक # है। और HTML5Mode का मतलब है कि 1) 404 पेज रिफ्रेश और 2) डायरेक्ट यूआरएल काम नहीं करेगा। भुगतान करने के लिए एक उच्च कीमत की तरह लगता है।

— नून्डर ११'१