AngularJS में एंकर हैश हैंडलिंग

एंकर का उपयोग करके वेब पेजों के माध्यम से नेविगेट करना एक आम बात रही है, खासकर कई सेक्शन वाले लंबे पेजों के लिए। हालाँकि, AngularJS अनुप्रयोगों में, एंकर लिंक हैंडलिंग समस्याग्रस्त हो सकती है।

AngularJS में एंकर लिंक पर क्लिक करते समय, डिफ़ॉल्ट व्यवहार क्लिक को रोकना और उपयोगकर्ता को एक अलग पेज पर रीडायरेक्ट करना है। इस समस्या के समाधान के लिए, AngularJS एक समाधान प्रदान करता है।

$anchorScroll()

AngularJS में $anchorScroll() सेवा विशेष रूप से एंकर हैश लिंकिंग को संभालने के लिए डिज़ाइन की गई है। यह सेवा आपको यूआरएल में हैश मान के आधार पर वर्तमान पृष्ठ पर एक तत्व तक स्क्रॉल करने की अनुमति देती है।

$anchorScroll() का उपयोग करने के लिए, बस इसे अपने नियंत्रक में इंजेक्ट करें और आवश्यक होने पर इसे कॉल करें। सेवा एक वैकल्पिक आईडी पैरामीटर लेती है जो स्क्रॉल करने के लिए तत्व निर्दिष्ट करती है। यदि कोई आईडी प्रदान नहीं की गई है, तो यह $location.hash() से मेल खाने वाली आईडी वाले तत्व पर स्क्रॉल करेगा।

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

Test/Foo

सरलीकृत दृष्टिकोण

और भी सरल दृष्टिकोण के लिए, आप इस संशोधित कोड का उपयोग कर सकते हैं:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

आपका एंकर लिंक इस तरह दिखेगा:

Test/Foo

इन तकनीकों का लाभ उठाकर, आप अपने AngularJS अनुप्रयोगों में एंकर हैश लिंकिंग को आसानी से संभाल सकते हैं, जो कई अनुभागों के साथ लंबे पृष्ठों को नेविगेट करने के लिए एक सहज उपयोगकर्ता अनुभव प्रदान करता है।