एडवांस्ड राउटिंग
एडवांस्ड राउटिंग एंगुलर में आधुनिक, स्केलेबल Single Page Applications (SPAs) के लिए एक महत्वपूर्ण फीचर है। सरल राउटिंग केवल पथों को घटकों से जोड़ती है, जबकि एडवांस्ड राउटिंग डेवलपर्स को nested routes, dynamic parameters, lazy-loaded modules, route guards, और state synchronization जैसी जटिलताओं को संभालने की सुविधा देती है। यह विशेष रूप से तब उपयोगी है जब एप्लिकेशन में यूजर ऑथेंटिकेशन, रॉल-बेस्ड एक्सेस और पुन: प्रयोज्य घटकों की आवश्यकता होती है।
एंगुलर में यह राउटिंग कॉम्पोनेंट्स, सर्विसेज़ और Observables के साथ गहराई से जुड़ी होती है। कॉम्पोनेंट्स UI के प्रमुख ब्लॉक हैं, जबकि सर्विसेज़ और Observables shared state को manage करते हैं और prop drilling और unnecessary re-renders से बचाते हैं। Lifecycle hooks जैसे ngOnInit और ngOnDestroy राउटिंग परिवर्तनों के अनुसार डेटा लोड करने, अपडेट करने और क्लीनअप करने की अनुमति देते हैं।
इस ट्यूटोरियल में, डेवलपर्स सीखेंगे कि कैसे dynamic route parameters, programmatic navigation, route guards और nested routes का उपयोग करके एडवांस्ड राउटिंग पैटर्न को लागू किया जाए। साथ ही, component state management, performance optimization और secure route handling के best practices को भी कवर किया जाएगा। वास्तविक दुनिया के उदाहरण दिखाएंगे कि कैसे reusable, maintainable components को Angular Router के साथ seamless integrate किया जा सकता है।
मूल उदाहरण
typescriptimport { NgModule, Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@Component({
selector: 'app-home',
template: `<h1>होम पेज</h1>`
})
export class HomeComponent {}
@Component({
selector: 'app-profile',
template: `<h1>प्रोफ़ाइल</h1><p>यूज़र ID: {{ userId }}</p>`
})
export class ProfileComponent {
userId: string | null = null;
}
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile/:id', component: ProfileComponent }
];
@NgModule({
declarations: [HomeComponent, ProfileComponent],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}इस मूल उदाहरण में दो कॉम्पोनेंट्स बनाए गए हैं: HomeComponent और ProfileComponent। ProfileComponent dynamic route parameter (:id) का उपयोग करता है, जिससे यूज़र ID को URL से लिया जा सकता है। RouterModule.forRoot(routes) root module में routes को register करता है और SPA navigation सक्षम बनाता है।
इस pattern में prop drilling से बचा गया है क्योंकि ProfileComponent सीधे route parameter का उपयोग करता है। Lifecycle hooks जैसे ngOnInit डेटा initialization और route change पर handling के लिए उपयुक्त हैं। यह आधार संरचना lazy-loaded modules, nested routes और route guards के साथ complex navigation logic के लिए तैयार है।
व्यावहारिक उदाहरण
typescriptimport { Injectable, Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserService {
private userSubject = new BehaviorSubject<{ id: string; name: string }>({ id: '1', name: 'Alice' });
user$ = this.userSubject.asObservable();
updateUserName(name: string) {
const current = this.userSubject.value;
this.userSubject.next({ ...current, name });
}
}
@Component({
selector: 'app-user-detail',
template: ` <div *ngIf="user"> <h2>{{ user.name }}</h2> <p>यूज़र ID: {{ user.id }}</p> <button (click)="changeName()">नाम बदलें</button> </div>
`
})
export class UserDetailComponent implements OnInit, OnDestroy {
user!: { id: string; name: string };
private subscription!: Subscription;
constructor(private route: ActivatedRoute, private userService: UserService, private router: Router) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.subscription = this.userService.user$.subscribe(user => {
if (user.id === id) {
this.user = user;
} else {
this.router.navigate(['/']);
}
});
}
changeName() {
this.userService.updateUserName('Bob');
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}इस व्यावहारिक उदाहरण में UserService shared state को manage करने के लिए BehaviorSubject का उपयोग करता है। UserDetailComponent ActivatedRoute के माध्यम से dynamic route parameter प्राप्त करता है और Observable को subscribe करके component state को synchronize रखता है।
Router.navigate programmatically navigation सुनिश्चित करता है कि गलत parameters होने पर user redirect हो। Lifecycle hooks ngOnInit और ngOnDestroy subscriptions को manage करते हैं और memory leaks से बचाते हैं। Immutable updates (Spread operator) Angular के Change Detection को सही तरीके से trigger करते हैं, जिससे unnecessary re-renders कम होते हैं। यह pattern real-world SPAs जैसे user profiles और dynamic dashboards में उपयुक्त है।
एडवांस्ड राउटिंग के लिए best practices में centralized services का उपयोग, prop drilling से बचाव, immutable state updates, और subscriptions का proper cleanup शामिल हैं। Nested routes और lazy-loaded modules performance बढ़ाते हैं, जबकि route guards sensitive paths को secure करते हैं।
📊 संदर्भ तालिका
| एंगुलर Element/Concept | Description | Usage Example |
|---|---|---|
| RouterModule | Application routes को register और manage करता है | imports: [RouterModule.forRoot(routes)] |
| ActivatedRoute | Route parameters और query params तक पहुँच | constructor(private route: ActivatedRoute) |
| BehaviorSubject | Components के बीच shared state manage करता है | private userSubject = new BehaviorSubject<User>(initialUser) |
| ngOnInit/ngOnDestroy | Lifecycle management और subscription cleanup | ngOnInit() { ... } ngOnDestroy() { ... } |
| Router.navigate | Programmatic navigation और redirect | this.router.navigate(['/profile', userId]) |
एडवांस्ड राउटिंग Angular डेवलपर्स को complex navigation patterns control करने, component state synchronize करने और SPA performance optimize करने में सक्षम बनाता है। मुख्य बिंदु centralized services, dynamic route parameters, programmatic navigation और subscription cleanup हैं। ये concepts Angular development के साथ seamlessly integrate होते हैं और modular, reusable components और scalable applications को सक्षम बनाते हैं।
अगले कदमों में nested routes, lazy-loaded modules, route guards और resolvers का उपयोग शामिल है। इन patterns को practically apply करने से user experience और maintainability दोनों बढ़ती हैं। सिफारिश की गई resources में official Angular documentation, advanced tutorials और SPA examples शामिल हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी