Angular Architecture Overview

Angular architecture यह define करती है कि Angular application internally कैसे structured होती है और अलग-अलग parts एक-दूसरे के साथ कैसे interact करते हैं। Angular का architecture component-based, modular और scalable होता है, जिससे large और complex applications को आसानी से manage किया जा सकता है।

इस chapter में आप समझेंगे:

• Angular application के core building blocks
• Data और control flow कैसे चलता है
• Components, services और dependency injection का role
• Angular architecture क्यों scalable है

Angular Application का High-Level View

एक Angular application main रूप से इन parts से मिलकर बनी होती है:

• Components
• Templates
• Services
• Dependency Injection (DI)
• Modules / Standalone APIs
• Routing

ये सभी मिलकर application का complete structure बनाते हैं।

Components

Component Angular application का सबसे important building block है।
हर component UI का एक हिस्सा represent करता है।

Component में तीन चीज़ें होती हैं:

• Template (HTML)
• Styles (CSS)
• Class (TypeScript logic)

Example:

@Component({
  selector: 'app-root',
  template: '<h1>Hello Angular</h1>'
})
export class AppComponent {
}

Explanation

• @Component decorator Angular को बताता है कि यह class एक component है
• selector HTML tag की तरह use होता है
• template UI define करता है

Templates

Template HTML का extended version होता है जिसमें Angular syntax use होता है।

Template में:

• Data binding
• Directives
• Pipes

use किए जाते हैं।

Example:

<p>{{ title }}</p>

Explanation

• {{ }} interpolation syntax है
• Component class से data UI में bind होता है

Data Binding

Angular में data binding component और template के बीच communication का तरीका है।

Types:

• Interpolation
• Property binding
• Event binding
• Two-way binding

Data binding architecture को reactive बनाती है।

Services

Services business logic और data handling के लिए use होती हैं।
यह components को lightweight रखती हैं।

Example:

@Injectable()
export class DataService {
  getData() {
    return ['A', 'B', 'C'];
  }
}

Explanation

• @Injectable() service को DI system में register करता है
• Reusable logic services में रखा जाता है

Dependency Injection (DI)

Dependency Injection Angular का core concept है।
DI automatically required objects को provide करता है।

Example:

constructor(private dataService: DataService) {}

Explanation

• Angular automatically DataService instance inject करता है
• Loose coupling achieve होती है

Modules और Standalone APIs

पहले Angular में application NgModules पर based थी।
Modern Angular में Standalone Components भी available हैं।

Modules:

• Components और services group करते हैं
• Application structure define करते हैं

Standalone APIs:

• Modules की dependency कम करते हैं
• Lightweight architecture देते हैं

दोनों approaches architecture का हिस्सा हैं।

Routing

Routing Angular application में navigation handle करता है।

• URL के basis पर component load होता है
• Page reload नहीं होता

Routing architecture SPA behavior provide करता है।

Angular Change Detection

Angular UI को update करने के लिए change detection mechanism use करता है।

• Data change detect करता है
• Template automatically update होता है

यह architecture को dynamic और responsive बनाता है।

Application Bootstrap Process

Angular app का flow:

• Application start होती है
• Root component bootstrap होता है
• Child components render होते हैं

यह flow application architecture का entry point होता है।

Why Angular Architecture is Scalable

Angular architecture scalable है क्योंकि:

• Component isolation
• Reusable services
• Strong DI system
• Clear separation of concerns

इसी वजह से Angular large enterprise applications में popular है।

Summary

इस chapter में आपने सीखा:

• Angular architecture का overview
• Components, templates और services का role
• Dependency Injection और routing
• Modern Angular architecture concepts