AngularJS Component Architecture (Pre-Angular 2 Concept)

अब हम सीखते हैं एक advanced और architectural level का chapter — जो AngularJS को और modular और scalable बनाने की दिशा में एक step-up है:

🧱 AngularJS Component Architecture

(Angular 2 से पहले का Modern Component-based Approach – AngularJS 1.5+)

---

📌 Component Architecture क्या होता है?

AngularJS में शुरू में सबकुछ controllers + templates से होता था। लेकिन बाद में (v1.5 से), AngularJS ने भी component-based development को support करना शुरू कर दिया।

Component = एक reusable block जिसमें HTML (template), logic (controller), और config (bindings) — सबकुछ encapsulated होता है।

---

🎯 क्यों ज़रूरी है Component Architecture?

Traditional (Controller + View)	Component-based
Code loosely structured	Code modular और maintainable
Scope hierarchy complex	Isolated scope per component
Reusability मुश्किल	Components reusable & testable
Migration tricky	Easy to migrate to Angular 2+

---

✅ Component बनाना कैसे शुरू करें?

AngularJS v1.5+ से आप app.component() method का use करके components define कर सकते हैं।

app.component('myComponent', {
  template: `<h2>Hello {{ $ctrl.name }}!</h2>`,
  controller: function() {
    this.name = "AngularJS";
  }
});

📌 अब इसे HTML में use करें:

<my-component></my-component>

ध्यान दें: component का नाम camelCase में define होता है, लेकिन HTML में kebab-case में use होता है।

---

✅ Component का Structure

app.component('userCard', {
  templateUrl: 'user-card.html',
  controller: 'UserCardCtrl',
  bindings: {
    user: '<',          // one-way input binding
    onRemove: '&'       // callback to parent
  }
});

HTML (user-card.html):

<div class="card">
  <h4>{{ $ctrl.user.name }}</h4>
  <p>Email: {{ $ctrl.user.email }}</p>
  <button ng-click="$ctrl.onRemove({ id: $ctrl.user.id })">Delete</button>
</div>

---

✅ Bindings की Types:

Symbol	Binding Type	Example	मतलब
<	One-way input	user: '<'	Parent से data आता है
@	Text/attribute	title: '@'	Static string
&	Output/event	onSave: '&'	Callback to parent
=	Two-way bind (not recommended)	legacy only

---

✅ Parent Component Example

Controller:

app.controller("AppCtrl", function($scope) {
  $scope.users = [
    { id: 1, name: "Amit", email: "amit@example.com" },
    { id: 2, name: "Sara", email: "sara@example.com" }
  ];

  $scope.removeUser = function(id) {
    $scope.users = $scope.users.filter(u => u.id !== id);
  };
});

HTML:

<div ng-controller="AppCtrl">
  <user-card ng-repeat="u in users"
             user="u"
             on-remove="removeUser(id)">
  </user-card>
</div>

---

✅ Component Lifecycle Hooks

Hook	कब call होता है	इस्तेमाल
$onInit()	component initialization पर	data load करना
$onChanges()	bindings change होने पर	input react करने के लिए
$onDestroy()	destroy होने पर	cleanup

---

✅ Component-based Folder Structure

/components
  └── user-card/
        ├── user-card.component.js
        ├── user-card.html
        └── user-card.css

हर component का अपना folder, logic, template, और CSS होता है।

---

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

1. AngularJS में component बनाने के लिए कौन-सी method यूज़ होती है?
2. One-way binding (<) और callback binding (&) में क्या फर्क है?
3. AngularJS components को Angular 2+ में migrate करना आसान क्यों होता है?

---

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

• AngularJS 1.5+ में Component-based architecture कैसे काम करता है
• Controller + Template की तुलना में component architecture modular होता है
• Bindings (<, &, @) कैसे काम करते हैं
• Lifecycle hooks का इस्तेमाल
• Scalable folder structure और reusable component approach

---

🎯 अब आप AngularJS को Angular 2+ जैसी architecture में use कर सकते हैं — जिससे आपका कोड maintainable, scalable और future-ready बनेगा।