AngularJS $compile and $parse

अब हम AngularJS के internals में और गहराई से उतरते हैं और सीखते हैं एक ऐसा चैप्टर जो AngularJS की dynamic power और flexibility को समझने में आपकी बहुत मदद करेगा:

🛠️ AngularJS $compile और $parse

(DOM को Compile और Expressions को Evaluate करने की Internal Power)

---

📌 $compile और $parse क्या हैं?

Service	काम
$compile	Raw HTML या DOM elements को AngularJS का live, working template बनाता है
$parse	AngularJS expressions ({{ }} या bindings) को function में बदलता है जिसे आप manually evaluate कर सकते हैं

---

🎯 क्यों सीखें?

• Dynamic Templates बनाना हो
• Custom Directives में complex behavior डालना हो
• Expression को JS function की तरह run करना हो
• Third-party HTML को AngularJS में activate करना हो

---

✅ $compile क्या करता है?

$compile raw HTML को AngularJS के rules के हिसाब से link करता है scope से, ताकि data binding, directives आदि काम करें।

Example:

app.controller("compileCtrl", function($scope, $compile, $element) {
  $scope.name = "Amit";

  var html = "<h2>Hello {{name}}!</h2>";
  var compiled = $compile(html)($scope);

  $element.append(compiled); // Add to DOM
});

अब {{name}} binding actual data से जुड़ गई है!

---

Use Case: User Input से Dynamic Template

$scope.userInput = "<p>{{username}}</p>";

$scope.render = function() {
  var compiled = $compile($scope.userInput)($scope);
  angular.element(document.getElementById("output")).html(compiled);
};

<input ng-model="username" placeholder="Enter Name" />
<textarea ng-model="userInput"></textarea>
<button ng-click="render()">Render HTML</button>
<div id="output"></div>

---

✅ $parse क्या करता है?

AngularJS के expressions जैसे user.name, score + 10 को evaluatable JS function में बदल देता है।

Syntax:

var parsedFn = $parse("a + b");
var result = parsedFn({ a: 10, b: 5 }); // result = 15

Example: Scope से value निकालना

var getName = $parse("student.name");
var name = getName({ student: { name: "Rahul" } });

आपको Angular expression को JS logic में use करने की ताकत मिलती है।

---

Set करना $parse से:

var model = $parse("user.age");
model.assign($scope, 25);

$scope.user.age = 25 के बराबर है।

---

🔧 $compile vs $parse

Feature	$compile	$parse
क्या करता है?	HTML को Angular template में बदलता है	Expression को JS function में बदलता है
Use कब करें?	Dynamic DOM बनाने में	Scope-based expression evaluate करने में
Example	<div>{{name}}</div> को compile करना	"price * quantity" को evaluate करना

---

⚠️ ध्यान देने योग्य बातें:

• $compile केवल AngularJS context में काम करता है
• $parse केवल valid Angular expressions के साथ ही काम करेगा
• यह advanced-level feature है — केवल ज़रूरत होने पर ही use करें
• Third-party HTML को compile करने से XSS risk हो सकता है

---

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

1. $compile और $parse में क्या मूल अंतर है?
2. Angular expression "a + b" को $parse से कैसे evaluate करेंगे?
3. किसी <div> को AngularJS bindings के साथ DOM में कैसे compile करेंगे?

---

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

• $compile raw HTML को AngularJS-compiled DOM में बदलता है
• $parse Angular expressions को function में बदलता है
• Scope से dynamic value get/set करना
• Runtime पर templates और expressions को handle करना
• Custom directives या dynamic components में इनका उपयोग

---

🎯 अब आप AngularJS में खुद dynamic और runtime-generated HTML/Expressions को compile और run कर सकते हैं — जैसे advanced admin panels, CMS, या plugin-style systems में होता है।