AngularJS में क्वेरी पैरामीटर पढ़ने के लिए सबसे संक्षिप्त तरीका क्या है?




ngroute (8)

मैं AngularJS का उपयोग कर यूआरएल क्वेरी पैरामीटर के मानों को पढ़ना चाहता हूं। मैं निम्नलिखित यूआरएल के साथ एचटीएमएल एक्सेस कर रहा हूं:

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

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

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

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

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


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

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

$ window.location.search


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

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

$location.search().target

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

संदर्भ के लिए, यहां काम कर रहा है jsFiddle: http://web.archive.org/web/20130317065234/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>


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


आप अपने नियंत्रक में $routeParams ( ngRoute आवश्यकता है) इंजेक्ट कर सकते हैं। दस्तावेज़ों का एक उदाहरण यहां दिया गया है:

// 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'}

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

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


बस गर्म करने के लिए।

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

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

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

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

$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.initialParams) कह सकता हूं


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

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

तुम थे

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

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


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

  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;
  }
  1. $location.search() का उपयोग करना।

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

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

$location.search() किसी ऑब्जेक्ट को वापस करने के लिए:

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






ngroute