कोणीय मार्गों में क्वेरीस्ट्रिंग कैसे पास करें?

Question

मैं AngularJS मार्गों के साथ काम कर रहा हूं, और यह देखने की कोशिश कर रहा हूं कि क्वेरी स्ट्रिंग्स के साथ कैसे काम करना है (उदाहरण के लिए, url.com?key=value)। कोणीय मार्ग जो एक ही नाम albums के लिए कुंजी-मान पेयर शामिल नहीं समझती:

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
     ['$routeProvider', function($routeProvider) { 
      $routeProvider. 
      when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}). 
      when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}). 
      otherwise({redirectTo: '/home'}); 
     }], 
     ['$locationProvider', function($locationProvider) { 
      $locationProvider.html5Mode = true; 
     }] 
    ); 

Answer 1

मुझे नहीं लगता कि मार्गों क्वेरी के साथ काम तार। इसके बजाय url.com?key=value आप url.com/key/value? की तरह एक और अधिक RESTful URL का उपयोग कर सकते हैं तो फिर आप इस प्रकार अपने मार्गों निर्धारित करना होगा:

.when('/albums', ...) 
.when('/albums/id/:album_id', ...) 

या शायद

.when('/albums', ...) 
.when('/albums/:album_id', ...) 

Answer 2

उपयोग मार्ग पैरामीटर

var Ctrl = function($scope, $params) { 
    if($params.filtered) { 
    //make sure that the ID is there and use a different URL for the JSON data 
    } 
    else { 
    //use the URL for JSON data that fetches all the data 
    } 
}; 

Ctrl.$inject = ['$scope', '$routeParams']; 

http://docs.angularjs.org/api/ng.$routeParams

Answer 3

आप $location (docs) में search विधि को देखो सकता है। यह आपको यूआरएल में कुछ चाबियाँ/मान जोड़ने की अनुमति देता है।

उदाहरण के लिए, $location.search({"a":"b"}); इस यूआरएल को वापस कर देगा: http://www.example.com/base/path?a=b।

Answer 4

मैं केवल URL में क्वेरी स्ट्रिंग के लिए दो usecases के बारे में सोच सकते हैं:।

1) आप अपने नियंत्रक में अपनी क्वेरी स्ट्रिंग के मुख्य/मान जोड़े की जरूरत है (उदाहरण के लिए हैलो मुद्रित करने के लिए {{नाम}} और मिल क्वेरीस्ट्रिंग में नाम जैसे नाम? जॉन), फिर फ्रांसिओस ने कहा कि केवल $ location.search का उपयोग करें और आपको क्वेरी ऑब्जेक्ट को ऑब्जेक्ट ({name: John}) के रूप में प्राप्त होगा जिसे आप इसे स्कोप या कुछ में डालकर उपयोग कर सकते हैं (उदाहरण के लिए $ scope.name = location.search()। नाम;)।

यदि आपको क्वेरीस्ट्रिंग में दिए गए किसी भी पृष्ठ पर आपके राउटर में किसी अन्य पृष्ठ पर रीडायरेक्ट करने की आवश्यकता है, जैसे (? पृष्ठ = Thatpage.htm) तो एक रीडायरेक्ट बनाएं: अपने राउटरप्रोवाइडर.हेन() में और यह प्राप्त होगा खोज वस्तु अपने तीसरे पैरामीटर के रूप में। निम्नलिखित अंडमुख वीडियो के 2:10 पर देखो: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

मूल रूप से

, redirectTo: समारोह (routeParams, पथ, खोज) {वापसी search.page}

Answer 5

यह सही है कि मार्गों क्वेरी स्ट्रिंग साथ काम नहीं करते हालांकि, इसका मतलब यह नहीं है कि मार्गों को स्विच करते समय आप पृष्ठों के बीच डेटा पास करने के लिए क्वेरी स्ट्रिंग का उपयोग नहीं कर सकते! मार्ग पैरामीटर के साथ चमकदार सीमा यह है कि उन्हें पृष्ठ को पुनः लोड किए बिना अपडेट नहीं किया जा सकता है। कभी-कभी यह वांछित नहीं है, उदाहरण के लिए एक नया रिकॉर्ड सहेजने के बाद। मूल मार्ग पैरामीटर 0 था (एक नया रिकॉर्ड इंगित करने के लिए), और अब आप इसे AJAX के माध्यम से लौटाई गई सही आईडी के साथ अपडेट करना चाहते हैं ताकि यदि उपयोगकर्ता पृष्ठ को रीफ्रेश करता है तो वे अपने नए सहेजे गए रिकॉर्ड को देखते हैं। मार्ग पैरामीटर के साथ ऐसा करने का कोई तरीका नहीं है, लेकिन इसके बजाय क्वेरी स्ट्रिंग का उपयोग करके इसे पूरा किया जा सकता है।

रहस्य बदलते समय क्वेरी स्ट्रिंग को शामिल नहीं करना है, क्योंकि इससे रूट टेम्पलेट से मेल नहीं खाया जाएगा। आप क्या कर सकते हैं मार्ग बदलना है और फिर क्वेरी स्ट्रिंग पैरामीटर लागू करें। मूल रूप से

$location.path('/RouteTemplateName').search('queryStringKey', value).search(... 

सुंदरता है कि यहाँ हूबहू असली मार्ग मानकों करने के लिए $ routeParams सेवा व्यवहार करता है क्वेरी स्ट्रिंग मान है, तो आप यहां तक ​​कि उन्हें अलग तरह से संभाल करने के लिए अपना कोड अपडेट करने की जरूरत नहीं होगी। अब आप reloadOnSearch सहित पृष्ठ को पुनः लोड किए बिना पैरामीटर अपडेट कर सकते हैं: आपकी रूट परिभाषा में गलत।