AngularJS $location Service

बहुत बढ़िया! अब हम सीखते हैं AngularJS Tutorial का एक ऐसा चैप्टर जो आपकी App को navigation और URL control करने की पूरी आज़ादी देता है:

🌐 AngularJS $location Service

(URL, Query Parameters और Path को programmatically manage करना)

---

📌 $location क्या है?

AngularJS का $location service आपको आपके App के URL को read, change, और control करने की सुविधा देता है — बिना पेज को reload किए।

आसान भाषा में: AngularJS App के अंदर आप current URL को पढ़ सकते हैं, बदल सकते हैं, और इसके path, query parameters, hash को manage कर सकते हैं — और वो भी programmatically।

---

✅ $location क्यों ज़रूरी है?

Feature	फायदा
Read Current URL	पता करें कि user कहाँ है
Navigate Programmatically	JS से route change करें
Query Params Handle	Search, filters, tracking
Bookmarking Friendly	हर view का अलग URL बनाएं
SPA Friendly Navigation	बिना reload किए page बदलें

---

✅ $location को कैसे use करें?

Inject करें अपने controller या service में:

app.controller("myCtrl", function($scope, $location) {
  // अब $location available है
});

---

✅ Common $location Methods

Method	Use
$location.path()	Current path को read/set करें
$location.search()	Query parameters को read/set करें
$location.hash()	URL hash (#value) read/set करें
$location.absUrl()	पूरा absolute URL return करता है
$location.url()	path + query + hash पूरा URL देता है

---

🔍 1. $location.path()

var path = $location.path(); // Read current path
$location.path("/about"); // Set new path

जैसे ही आप .path("/about") करेंगे, AngularJS routing से about.html load हो जाएगा।

---

🔍 2. $location.search()

$location.search(); // e.g., { q: "html", page: 2 }

$location.search("q", "angularjs"); // Set query param
$location.search({ category: "web", sort: "asc" }); // Multiple params

Useful for filters, pagination, search query, etc.

---

🔍 3. $location.hash()

$location.hash(); // Read current hash
$location.hash("section3"); // Set hash

ये URL में #section3 जैसा anchor जोड़ देता है।

---

✅ Example Use Case:

app.controller("navCtrl", function($scope, $location) {
  $scope.goToContact = function() {
    $location.path("/contact");
  };

  $scope.setSearchParam = function() {
    $location.search({ ref: "email", promo: "offer10" });
  };
});

HTML:

<button ng-click="goToContact()">Go to Contact Page</button>
<button ng-click="setSearchParam()">Add Query Params</button>

---

🧪 $locationChangeStart और $locationChangeSuccess Events

आप routing या URL change के समय कुछ logic run करना चाहते हैं:

$scope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
  console.log("Going to: ", newUrl);
});

---

❗ Tip:

अगर आप URL manually change कर रहे हैं (like $location.path()), और आप चाहते हैं कि Angular routing भी follow करे, तो $route dependency के साथ उसे भी sync करना होगा — ये AngularJS अपने आप कर लेता है जब आप ngRoute इस्तेमाल कर रहे हों।

---

🧠 अभ्यास प्रश्न (Exercise)

1. $location.path() और $location.url() में क्या अंतर है?
2. अगर आप URL में query string ?page=3 set करना चाहें तो क्या code होगा?
3. नीचे दिए गए code का output क्या होगा?

$location.path("/blog");
$location.search({ tag: "angular", sort: "desc" });

---

✅ आपने क्या सीखा?

• $location क्या है और क्यों इस्तेमाल करते हैं
• URL path, query parameters और hash को control करना
• Programmatically routing या navigation को handle करना
• Query string और filters बनाना AngularJS तरीके से
• Events से URL changes को track करना

---

🎯 अब आप AngularJS App में navigation और URLs को smart और controlled तरीके से manage कर सकते हैं — जिससे आपका App बनेगा एक powerful SPA (Single Page Application)!