Theory
Full Stack का Front End
यह subject एक app end to end build करता है: FestConnect Full Stack, एक Angular front end, एक Express/Node backend, एक MongoDB database, और auth और hosting के लिए Firebase के साथ। हम वहाँ शुरू करते हैं जहाँ user actually देखता है: front end, Angular से built।
आप Sem 5 में Angular से मिले, तो यह एक recap है जो ज़्यादा गहराई में जाता है। यह lesson Angular के तीन core building blocks re-establish करता है, components, services, और routing, और Angular 17 में standalone components इस्तेमाल करते हुए इन्हें साथ wire करने का modern तरीका। इस foundation को crisp बनाना बाकी front-end unit को straightforward बनाता है।
Theory
Components, Services, Routing
Angular single-page applications (SPAs) build करने के लिए एक TypeScript framework है, apps जो एक बार load होते हैं और बिना full page reloads के view update करते हैं। तीन concepts ज़्यादातर काम करते हैं।
एक component एक reusable UI piece है: एक TypeScript class एक HTML template और styles के साथ paired (उदाहरण के लिए, एक EventCard)। Services shared logic और data hold करती हैं (एक EventService जैसा जो events fetch करती है), और Angular का dependency injection किसी भी component को जो पूछता है एक service देता है। Routing URL paths को components में map करती है, तो /events events page दिखाता है, single page छोड़े बिना navigation देते हुए। View के लिए components, logic के लिए services, navigation के लिए routing।
Practical
एक Standalone Angular 17 Component
import { Component } from '@angular/core';
@Component({
selector: 'app-event-card',
standalone: true, // Angular 17: no NgModule needed
template: `<div class="card">{{ title }}</div>`,
})
export class EventCardComponent {
title = 'Robotics Workshop';
}
// A service holds shared logic, injectable anywhere:
// @Injectable({ providedIn: 'root' })
// export class EventService { getEvents() { /* ... */ } }Formula
Angular 17: Standalone Components
बड़ा modern change standalone components है। Older Angular components को NgModules में group करता था; Angular 17 एक component को standalone: true mark करना prefer करता है, तो यह अपनी own dependencies declare करता है और इसे किसी module की ज़रूरत नहीं। यह projects को simpler और reason करना easier बनाता है।
App bootstrapApplication(AppComponent, ...) से start होता है, और routing जैसे features module imports की बजाय providers के through add होते हैं (उदाहरण के लिए provideRouter(routes))। कम moving parts, clearer structure: standalone वह direction है जिस तरफ Angular जा रहा है, और वह जो आप पूरे FestConnect में इस्तेमाल करेंगे।
Practical
CLI से एक Scalable Project Scaffold करना
# The Angular CLI creates and manages the project structure
npm install -g @angular/cli
ng new festconnect # creates a new Angular project
cd festconnect
ng generate component event-card # scaffolds a component
ng serve # run it locally at http://localhost:4200
# The CLI gives a sensible folder structure: src/app for your code,
# with components and services organised into feature folders as it grows.Quiz
Angular 17 में, older Angular के comparison में components organise करने में main change क्या है?
- Components बिना किसी TypeScript के plain HTML में लिखे जाते हैं
- Components standalone हो सकते हैं (standalone: true), एक NgModule की ज़रूरत के बिना अपनी own dependencies declare करते हुए
- Routing अब possible नहीं है
- Services को framework से हटा दिया गया है
Show the answer
Components standalone हो सकते हैं (standalone: true), एक NgModule की ज़रूरत के बिना अपनी own dependencies declare करते हुए
Angular 17 standalone components prefer करता है: standalone: true mark किया गया एक component अपनी own dependencies declare करता है और इसे एक NgModule में register होने की ज़रूरत नहीं, structure simplify करते हुए। Option A wrong है: Angular components अभी भी एक HTML template वाली TypeScript classes हैं; ये plain HTML नहीं हैं। Option C wrong है: routing बहुत हद तक रहती है, यह बस routing module की बजाय provideRouter जैसे providers के through configured है। Option D wrong है: services (dependency injection के साथ) अभी भी Angular के लिए central हैं। Key recap point है standalone components older NgModule-based organisation को replace करते हुए।
Think first
Angular Standalone Components की तरफ क्यों Move हुआ?
NgModules सालों काम करते रहे। Angular 17 इसके बजाय standalone components क्यों prefer करता है? फिर tap कीजिए।
Show the answer
क्योंकि NgModules ने BOILERPLATE और INDIRECTION की एक layer add की जो beginners और यहाँ तक कि experienced developers को confusing लगी, और standalone components इसे remove करते हैं। Older model में, हर component को किसी NgModule में declare होना पड़ता था, और एक component या feature इस्तेमाल करने के लिए आपको ensure करना पड़ता था modules के across right चीज़ें imported और exported हैं, frustrating 'component is not a known element' errors का एक common source और mental overhead जिसका आप जो actual UI build कर रहे थे उससे कम लेना-देना था। Standalone components हर component को exactly वह declare करने देते हैं जो इसे चाहिए (इसकी own imports) right वहीं इसके own decorator में, तो एक कम concept सीखना है और एक कम जगह जहाँ wiring गलत जा सकती है। Result एक flatter, ज़्यादा direct structure है: आप एक single component file देख सकते हैं और modules के through hunt किए बिना इसकी dependencies समझ सकते हैं। यह framework को सीखना भी easier बनाता है (कुछ बना सकने से पहले कम concepts), tooling और lazy loading improve करता है, और Angular को other modern frameworks कैसे काम करते हैं इसके साथ align करता है। NgModules अभी भी compatibility के लिए exist करते हैं, पर standalone आगे बढ़ने का recommended default है। Theme simplification है, वह ceremony remove करना जिसने अपनी keep नहीं कमाई, यही exactly वजह है यह recap आपको FestConnect के लिए standalone components से start कराता है। कम wiring, clearer components।
Summary
Key takeaways
- Angular single-page applications के लिए एक TypeScript framework है; यह subject इसे FestConnect के front end के लिए इस्तेमाल करता है।
- तीन core building blocks: components (reusable UI pieces), services (shared logic/data, injected), और routing (URL paths को components से)।
- Dependency injection किसी भी component को जो पूछता है एक service supply करता है।
- Angular 17 standalone components prefer करता है (standalone: true), जो कोई NgModule के बिना अपनी own dependencies declare करते हैं।
- App bootstrapApplication से bootstrapped है और providers के through configured है (जैसे provideRouter)।
- Angular CLI (ng new, ng generate, ng serve) एक scalable project structure scaffold और run करता है।
- Memory hook: components + services + routing, standalone components के साथ modern तरीके से wired।