Concepts and Characteristics of Angular: TypeScript overview, component-based architecture; Modules, Services, Dependency Injection

📖 Theory

React एक Library था; Angular पूरी Workshop है

आपने FestConnect का front-end React में build किया, फिर routing, forms, और data-fetching के लिए इसके around extra tools assemble किए, क्योंकि React एक LIBRARY है: यह UI करता है और बाकी सब आपके ऊपर छोड़ता है।

Angular opposite approach लेता है: यह एक full FRAMEWORK है जो आपको EVERYTHING देता है, routing, forms, HTTP, dependency injection, एक opinionated package में, TypeScript में लिखा हुआ। यह unit FestConnect को Angular में rebuild करता है ताकि आप दो industry leaders compare कर सकें। यह बड़े ideas से शुरू होता है: TypeScript, component architecture, और services-and-dependency-injection system जो Angular का signature है।

📖 Theory

Framework बनाम Library, और TypeScript

Angular एक framework है, React एक library है, और यह फ़र्क़ real है:

• एक library (React) वह code है जो YOU call करते हैं: आप control में रहते हैं और pieces add करते हैं
• एक framework (Angular) पूरी STRUCTURE provide करता है और YOUR code call करता है: ज़्यादा provided, follow करने के लिए ज़्यादा conventions

Angular TypeScript में लिखा है और इसे इस्तेमाल करता है: JavaScript PLUS static types, classes, interfaces और decorators, JavaScript में compiled। Types errors को COMPILE time पर पकड़ते हैं (एक misspelt property, एक wrong argument) run time पर की बजाय, वही safety जो आपने Java और C# में value की। अगर आपको वहाँ static typing पसंद आई, TypeScript इसे web पर लाता है।

⌨️ Practical

एक Component और एक Service (Angular की Shape)

// A SERVICE: reusable logic/data, not tied to any view
@Injectable({ providedIn: 'root' })
export class EventService {
  getEvents(): string[] {
    return ['Garba Night', 'Coding Contest'];
  }
}

// A COMPONENT: a class + template, receives the service via DI
@Component({
  selector: 'app-events',
  template: '<h2>{{ title }}</h2>'
})
export class EventsComponent {
  title = 'FestConnect Events';

  // Dependency Injection: Angular SUPPLIES the service here.
  // The component does NOT do: new EventService()
  constructor(private eventService: EventService) {}
}

📖 Theory

Components, Modules, Services, DI

Angular एक app को 4 building blocks से organise करता है:

• Components: UI pieces, हर एक एक HTML TEMPLATE और CSS वाली TypeScript CLASS: एक app इनका एक tree है (React components जैसा)
• Modules (NgModule): related components और services group करने वाले containers; root AppModule app bootstrap करता है
• Services: logic या data hold करने वाली reusable classes (events fetch करना), किसी view से tied नहीं
• Dependency Injection (DI): Angular एक service CREATE करता है और इसे किसी भी component को SUPPLY करता है जो पूछता है (constructor के through), component के इसे खुद build करने की बजाय

DI signature idea है: component DECLARE करता है इसे क्या चाहिए (constructor(private eventService: EventService)) और Angular इसे provide करता है। यह services को reusable और code को testable बनाता है।

🧩 Quiz

Angular में dependency injection (DI) का मतलब क्या है?

1. एक component जब भी इसे चाहिए 'new' से अपनी खुद की services बनाता है
2. Angular एक service create करता है और इसे उस component को SUPPLY करता है जो इसे declare करता है (आमतौर पर constructor में), component के इसे खुद create करने की बजाय
3. Services हर component के code में copy होती हैं
4. DI Angular का इसके CSS system के लिए नाम है

💭 Think first

बस 'new EventService()' क्यों नहीं?

एक component बस eventService = new EventService() लिख सकता था DI इस्तेमाल करने की बजाय। Dependency injection क्या खरीदता है जो 'new' approach खो देता है? फिर tap कीजिए।

⚠️ Watch out

Angular Concept Traps

Framework और Library Confuse करना: Angular एक full framework है (structure provide करता है); React एक UI library है (आप इसके around assemble करते हैं)।

TypeScript को एक अलग Language सोचना: यह JavaScript plus static types है, JS में compiled।

new से DI Bypass करना: constructor injection इस्तेमाल कीजिए ताकि services shared और testable रहें।

Module बनाम Component Confusion: एक component एक UI piece है; एक module (NgModule) related components/services group करता है।

Decorators भूलना: @Component, @Injectable, @NgModule वह तरीका हैं जिससे Angular हर class का role जानता है।

📖 Theory

Concepts हो गए; अब एक बनाइए

आपके पास Angular का mental model है: components और modules का एक TypeScript framework, services और dependency injection से wired। अगला lesson hands-on होता है, development environment set up करना (Node.js और Angular CLI), एक Angular project create और run करना, और routing add करना ताकि FestConnect के कई navigable pages हो सकें। Architecture से एक running app तक।

✅ Summary

Key takeaways

• Angular TypeScript में लिखा एक full FRAMEWORK है (पूरी structure provide करता है); React एक UI library है जिसके around आप assemble करते हैं।
• TypeScript JavaScript plus static types, classes, interfaces और decorators है, JavaScript में compiled।
• Component-based architecture: एक app components का एक tree है (एक TS class + HTML template + CSS)।
• Modules (NgModule) related components और services group करते हैं; root AppModule app bootstrap करता है।
• Services reusable logic/data classes हैं, किसी view से tied नहीं।
• Dependency injection: Angular एक service create करता है और इसे उस component को supply करता है जो इसे declare करता है (constructor में), sharing और testability enable करते हुए।
• Memory hook: framework, library नहीं, types के लिए TypeScript, dependencies declare कीजिए और Angular को इन्हें inject करने दीजिए।