How AngularJS Compiles Templates (Compile vs Link function)

अब हम एक ऐसे chapter पर पहुँच चुके हैं जो AngularJS के internal working को deep level पर explain करता है — खासकर directives की दुनिया में:

🏗️ How AngularJS Compiles Templates (Compile vs Link Function)

(DOM कैसे process होता है, और Directive कैसे DOM से जुड़ते हैं — पूरी गहराई से)

---

🎯 AngularJS Template Compilation क्या होता है?

जब AngularJS कोई HTML page लोड करता है, तब वह:

1. HTML DOM को parse करता है
2. Directives को identify करता है
3. उन Directives को compile करता है
4. Scope और DOM को link करता है
5. फिर run करता है – यानी live page चलता है

इस पूरी process को ही AngularJS का Compile Phase और Linking Phase कहा जाता है।

---

🧠 Directive Lifecycle में ये 2 Function होते हैं:

Function	Phase	काम
compile()	First	Static DOM को process करना (manipulation)
link()	Second	Scope से bind करना (data और events से जोड़ना)

---

✅ Directive Compilation का Flow:

1. DOM Parse → 
2. Compile Phase (DOM changes) → 
3. Link Phase (Scope bindings, events)

---

🧩 Compile Function क्या करता है?

• सिर्फ once चलता है (DOM parsed होने पर)
• Scope को नहीं जानता
• आप इसमें DOM को manipulate कर सकते हैं (e.g., attributes, elements add/remove)
• Mostly reusable templates/directives में काम आता है

Syntax:

compile: function(tElement, tAttrs) {
  // tElement = Template element
  // Only runs once

  // Return link function (optional)
  return function(scope, element, attrs) {
    // linking logic here
  };
}

---

🔗 Link Function क्या करता है?

• हर instance के लिए चलता है
• Scope को fully access कर सकता है
• Events attach करना, $watch लगाना आदि इसी में करते हैं
• Actual directive behavior यहीं define होता है

Types of Link Functions:

Type	Scope
Pre-link	Runs before children linked (rare use)
Post-link	Runs after all children linked (common)

---

✅ Full Example: Compile + Link

app.directive("customDirective", function() {
  return {
    restrict: 'A',
    compile: function(tElement, tAttrs) {
      // DOM manipulation at compile time
      tElement.css("border", "2px solid green");
      console.log("Compile phase");

      return {
        pre: function(scope, element, attrs) {
          console.log("Pre-link phase");
        },
        post: function(scope, element, attrs) {
          console.log("Post-link phase");
          element.on("click", function() {
            alert("Clicked: " + scope.message);
          });
        }
      };
    }
  };
});

HTML:

<div custom-directive ng-init="message='Hello AngularJS'">
  Click me!
</div>

Console Output:

Compile phase
Pre-link phase
Post-link phase

---

🆚 Compile vs Link – Side-by-Side

Feature	compile()	link()
कब चलता है?	DOM parsing के दौरान (1 बार)	हर instance पर (repeatedly)
Scope Access?	❌ नहीं	✅ पूरा access होता है
Use For	DOM structure manipulate (HTML)	Event binding, data watching
Return क्या करता है?	एक link function	कुछ return नहीं करता

---

🛠️ कब क्या Use करें?

Situation	Function
Template को manipulate करना है (before linking)	compile()
Scope variables या event bind करना है	link()
Nested directives में parent-child syncing करना है	pre-link, post-link

---

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

1. compile() function कब trigger होता है और उसका काम क्या है?
2. link() function से आप क्या-क्या कर सकते हैं?
3. Pre-link vs Post-link में practical फर्क क्या है?

---

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

• AngularJS DOM को compile और link कैसे करता है
• Compile function सिर्फ DOM-level काम करता है, बिना scope के
• Link function actual behavior, events, data bindings से जुड़ा होता है
• Directive lifecycle को deeply समझना modular directive design के लिए जरूरी है

---

🎯 अब आप advanced directives बना सकते हैं जो AngularJS के compile और link phase को smartly use करते हैं — जैसे custom inputs, re-usable components, आदि।