कुछ कोणीय टिप्स

अद्यतन कोणीय की रिहाई के बाद पर्याप्त समय बीत चुका है। वर्तमान में, कई परियोजनाएं पूरी हो चुकी हैं। "आरंभ करना" से कई डेवलपर्स पहले से ही इस ढांचे, इसकी क्षमताओं के सार्थक उपयोग करने के लिए चले गए हैं, और सीखा है कि नुकसान के आसपास कैसे पहुंचें। प्रत्येक डेवलपर और / या टीम ने पहले से ही अपने स्वयं के स्टाइल गाइड और सर्वश्रेष्ठ अभ्यास का गठन किया है, या वे दूसरों का उपयोग करते हैं। लेकिन एक ही समय में, आपको अक्सर बहुत सारे कोणीय कोड से निपटना पड़ता है, जो इस ढांचे की कई विशेषताओं का उपयोग नहीं करता है और / या कोणीयुलर की शैली में लिखा जाता है।

यह लेख एंगुलर फ्रेमवर्क का उपयोग करने की कुछ विशेषताओं और विशेषताओं को प्रस्तुत करता है, जो कि लेखक की मामूली राय के अनुसार, मैनुअल में पर्याप्त रूप से कवर नहीं किए जाते हैं या डेवलपर्स द्वारा उपयोग नहीं किए जाते हैं। आलेख "इंटरसेप्टर्स" HTTP अनुरोधों, उपयोगकर्ताओं तक पहुंच को सीमित करने के लिए रूट गार्ड के उपयोग पर चर्चा करता है। RxJS का उपयोग करने और अनुप्रयोग राज्य के प्रबंधन के लिए कुछ सिफारिशें दी गई हैं। प्रस्तुत परियोजना कोड के डिजाइन पर कुछ सिफारिशें दी गई हैं, जो संभवतः परियोजना कोड को क्लीनर और अधिक समझने योग्य बनाएंगी। लेखक को उम्मीद है कि यह लेख न केवल उन डेवलपर्स के लिए उपयोगी होगा जो सिर्फ एंगुलर से परिचित होना शुरू कर रहे हैं, बल्कि अनुभवी डेवलपर्स के लिए भी।

HTTP के साथ काम करें

किसी भी क्लाइंट वेब एप्लिकेशन का निर्माण सर्वर के लिए HTTP अनुरोधों के आसपास किया जाता है। यह भाग HTTP अनुरोधों के साथ काम करने के लिए कोणीय ढांचे की कुछ विशेषताओं पर चर्चा करता है।

इंटरसेप्टर का उपयोग करना

कुछ मामलों में, सर्वर तक पहुंचने से पहले अनुरोध को संशोधित करना आवश्यक हो सकता है। या आपको प्रत्येक उत्तर को बदलने की आवश्यकता है। एंगुलर 4.3 से शुरू होकर, एक नया HttpClient जारी किया गया है। इसने इंटरसेप्टर्स का उपयोग करके एक अनुरोध को बाधित करने की क्षमता को जोड़ा (हां, वे अंत में केवल संस्करण 4.3 में वापस आ गए थे!, यह एंगुलरज की सबसे अपेक्षित लापता विशेषताओं में से एक था जो एंगुलर की ओर पलायन नहीं करता था)। यह http-api और वास्तविक अनुरोध के बीच का एक प्रकार का मिडलवेयर है।

एक सामान्य उपयोग मामला प्रमाणीकरण हो सकता है। सर्वर से प्रतिक्रिया प्राप्त करने के लिए, आपको अक्सर अनुरोध में किसी प्रकार का प्रमाणीकरण तंत्र जोड़ने की आवश्यकता होती है। इंटरसेप्टर्स का उपयोग करके यह कार्य काफी सरलता से हल किया जाता है:

import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Observable"; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from @angular/common/http"; @Injectable() export class JWTInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { req = req.clone({ setHeaders: { authorization: localStorage.getItem("token") } }); return next.handle(req); } } 

क्योंकि किसी एप्लिकेशन में कई इंटरसेप्टर हो सकते हैं, वे एक श्रृंखला में व्यवस्थित होते हैं। पहला तत्व कोणीय ढांचे द्वारा ही कहा जाता है। इसके बाद, हम अगले इंटरसेप्टर के लिए अनुरोध प्रेषित करने के लिए जिम्मेदार हैं। ऐसा करने के लिए, हम जैसे ही समाप्त करते हैं श्रृंखला में अगले तत्व के हैंडल विधि को कॉल करते हैं। हम इंटरसेप्टर को कनेक्ट करते हैं:

 import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { HttpClientModule } from "@angular/common/http"; import { HTTP_INTERCEPTORS } from "@angular/common/http"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, HttpClientModule], providers: [ { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule {} 

जैसा कि आप देख सकते हैं, इंटरसेप्टर का कनेक्शन और कार्यान्वयन काफी सरल है।

प्रगति ट्रैकिंग

HttpClient की सुविधाओं में से एक अनुरोध की प्रगति को ट्रैक करने की क्षमता है। उदाहरण के लिए, यदि आपको एक बड़ी फ़ाइल डाउनलोड करने की आवश्यकता है, तो आप शायद उपयोगकर्ता को डाउनलोड की प्रगति की रिपोर्ट करना चाहते हैं। प्रगति पाने के लिए, आपको HttpRequest ऑब्जेक्ट की reportProgress संपत्ति को true सेट करना होगा। एक सेवा का उदाहरण जो इस दृष्टिकोण को लागू करता है:

 import { Observable } from "rxjs/Observable"; import { HttpClient } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { HttpRequest } from "@angular/common/http"; import { Subject } from "rxjs/Subject"; import { HttpEventType } from "@angular/common/http"; import { HttpResponse } from "@angular/common/http"; @Injectable() export class FileUploadService { constructor(private http: HttpClient) {} public post(url: string, file: File): Observable<number> { var subject = new Subject<number>(); const req = new HttpRequest("POST", url, file, { reportProgress: true }); this.httpClient.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { const percent = Math.round((100 * event.loaded) / event.total); subject.next(percent); } else if (event instanceof HttpResponse) { subject.complete(); } }); return subject.asObservable(); } } 

पोस्ट विधि एक Observable है जो डाउनलोड की प्रगति का प्रतिनिधित्व करती है। अब सभी की जरूरत घटक में लोडिंग प्रगति को प्रदर्शित करने की है।

रूटिंग। मार्ग रक्षक का उपयोग करना

रूटिंग आपको एप्लिकेशन के भीतर विशिष्ट संसाधनों के लिए एप्लिकेशन अनुरोधों को मैप करने की अनुमति देता है। अक्सर यह आवश्यक है कि कुछ शर्तों के आधार पर, कुछ घटकों के साथ पथ की दृश्यता को सीमित करने की समस्या को हल करना आवश्यक है। इन मामलों में, कोणीय में एक संक्रमण प्रतिबंध तंत्र है। एक उदाहरण के रूप में, एक सेवा है जो रूट गार्ड को लागू करेगी। मान लें कि एप्लिकेशन उपयोगकर्ता प्रमाणीकरण JWT का उपयोग करके कार्यान्वित किया जाता है। सेवा का एक सरलीकृत संस्करण जो यह जांचता है कि उपयोगकर्ता अधिकृत है या नहीं:

 @Injectable() export class AuthService { constructor(public jwtHelper: JwtHelperService) {} public isAuthenticated(): boolean { const token = localStorage.getItem("token"); //        return !this.jwtHelper.isTokenExpired(token); } } 

मार्ग रक्षक को लागू करने के लिए, आपको CanActivate इंटरफ़ेस को लागू करना होगा, जिसमें एक एकल canActivate फ़ंक्शन शामिल है।

 @Injectable() export class AuthGuardService implements CanActivate { constructor(public auth: AuthService, public router: Router) {} canActivate(): boolean { if (!this.auth.isAuthenticated()) { this.router.navigate(["login"]); return false; } return true; } } 

AuthGuardService कार्यान्वयन उपयोगकर्ता प्राधिकरण को सत्यापित करने के लिए ऊपर वर्णित AuthGuardService का उपयोग करता है। canActivate विधि एक बूलियन मान देता है जिसका उपयोग रूट सक्रियण की स्थिति में किया जा सकता है।

अब हम बनाए गए मार्ग रक्षक को किसी भी मार्ग या पथ पर लागू कर सकते हैं। ऐसा करने के लिए, Routes घोषणा करते समय Routes हम अपनी सेवा को निर्दिष्ट करते हैं, जो CanActivate इंटरफ़ेस को विरासत में CanActivate है।

 export const ROUTES: Routes = [ { path: "", component: HomeComponent }, { path: "profile", component: UserComponent, canActivate: [AuthGuardService] }, { path: "**", redirectTo: "" } ]; 

इस स्थिति में, /profile मार्ग में वैकल्पिक कॉन्फ़िगरेशन मान canActivate । पहले वर्णित AuthGuard को इस संपत्ति को canActivate करने के तर्क के रूप में पारित किया गया है। इसके बाद, किसी को /profile पथ तक पहुंचने का प्रयास करने पर हर बार canActivate विधि को कॉल किया जाएगा। यदि उपयोगकर्ता अधिकृत है, तो वह /profile पथ तक पहुँच प्राप्त करेगा, अन्यथा उसे /login पथ पर पुनर्निर्देशित किया जाएगा।

आपको इस बात से अवगत होना चाहिए कि इस मार्ग पर आप घटक को सक्रिय करने की अनुमति दे सकते हैं, लेकिन आपको इसे स्विच करने की अनुमति नहीं देता है। यदि आपको घटक की सक्रियता और लोडिंग की रक्षा करने की आवश्यकता है, तो इस मामले के लिए हम canLoad उपयोग कर सकते हैं। CanLoad कार्यान्वयन सादृश्य द्वारा किया जा सकता है।

पाक कला RxJS

RxJS के ऊपर कोणीय बनाया गया है। RxJS अतुल्यकालिक और घटना-आधारित डेटा धाराओं के साथ काम करने के लिए एक पुस्तकालय है जो अवलोकन योग्य अनुक्रमों का उपयोग करता है। RxJS ReactiveX API का जावास्क्रिप्ट कार्यान्वयन है। अधिकांश भाग के लिए, इस लाइब्रेरी के साथ काम करते समय होने वाली त्रुटियां इसके कार्यान्वयन की मूल बातें के सतही ज्ञान से जुड़ी हैं।

ईवेंट के लिए साइन अप करने के बजाय एस्क् का उपयोग करना

बड़ी संख्या में डेवलपर्स जो हाल ही में कोणीय ढांचे का उपयोग करने के लिए आए हैं, घटक में डेटा प्राप्त करने और सहेजने के लिए Observable की subscribe फ़ंक्शन का उपयोग करते हैं:

 @Component({ selector: "my-component", template: ` <span>{{localData.name}} : {{localData.value}}</span>` }) export class MyComponent { localData; constructor(http: HttpClient) { http.get("api/data").subscribe(data => { this.localData = data; }); } } 

इसके बजाय, हम async पाइप का उपयोग करके टेम्पलेट के माध्यम से सदस्यता ले सकते हैं:

 @Component({ selector: "my-component", template: ` <p>{{data.name | async}} : {{data.value | async}}</p>` }) export class MyComponent { data; constructor(http: HttpClient) { this.data = http.get("api/data"); } } 

एक टेम्पलेट के माध्यम से सदस्यता लेने से, हम मेमोरी लीक से बचते हैं क्योंकि कोणीय एक घटक के टूटने पर स्वचालित रूप से Observable से Observable हो जाता है। इस मामले में, HTTP अनुरोधों के लिए, async पाइप का व्यावहारिक रूप से उपयोग करने से कोई लाभ नहीं मिलता है, सिवाय इसके कि - async अनुरोध को रद्द कर देगा यदि डेटा की अब आवश्यकता नहीं है, और अनुरोध प्रसंस्करण को पूरा नहीं करेगा।

Observables की कई विशेषताओं का उपयोग मैन्युअल रूप से सदस्यता लेने के दौरान नहीं किया जाता है। Observables व्यवहार को दोहराकर (उदाहरण के लिए, http अनुरोध में पुन: प्रयास), टाइमर-आधारित अद्यतन या पूर्व-कैशिंग द्वारा बढ़ाया जा सकता है।

वेधशालाओं को निरूपित करने के लिए $ का उपयोग करें

अगला पैराग्राफ आवेदन स्रोत कोड के डिजाइन से संबंधित है और पिछले पैराग्राफ से निम्नानुसार है। Observable को सरल चर से अलग करने के लिए, अक्सर आप किसी चर या क्षेत्र के नाम पर " $ " चिन्ह का उपयोग करने के बारे में सलाह सुन सकते हैं। यह सरल चाल async का उपयोग करते समय चर में भ्रम को समाप्त करेगा।

 import { Component } from "@angular/core"; import { Observable } from "rxjs/Rx"; import { UserClient } from "../services/user.client"; import { User } from "../services/user"; @Component({ selector: "user-list", template: ` <ul class="user_list" *ngIf="(users$ | async).length"> <li class="user" *ngFor="let user of users$ | async"> {{ user.name }} - {{ user.birth_date }} </li> </ul>` }) export class UserList { public users$: Observable<User[]>; constructor(public userClient: UserClient) {} public ngOnInit() { this.users$ = this.client.getUsers(); } } 

जब सदस्यता समाप्त करें (सदस्यता समाप्त करें)

सबसे आम सवाल जो एक डेवलपर के पास है जब संक्षेप में कोणीय को पता चल रहा है कि आपको अभी भी सदस्यता समाप्त करने की आवश्यकता है, और जब नहीं। इस प्रश्न का उत्तर देने के लिए, आपको पहले यह तय करने की आवश्यकता है कि वर्तमान में किस प्रकार का Observable उपयोग किया जा रहा है। कोणीय में Observable 2 प्रकार होते हैं - परिमित और अनंत, कुछ एक परिमित, अन्य, क्रमशः, मूल्यों की एक अनंत संख्या का उत्पादन करते हैं।

Http Observable कॉम्पैक्ट है, और DOM इवेंट के श्रोता / श्रोता अनंत Observable ।

यदि एक अनंत Observable के मूल्यों की सदस्यता मैन्युअल रूप से (एसिंक्स पाइप का उपयोग किए बिना) की जाती है, तो एक उत्तर बिना असफल होना चाहिए। यदि हम मैन्युअल रूप से एक परिमित अवलोकन के लिए सदस्यता लेते हैं, तो यह सदस्यता समाप्त करने के लिए आवश्यक नहीं है, RxJS इस बात का ध्यान रखेगा। कॉम्पैक्ट Observables मामले में Observables हम Observables कर सकते हैं यदि Observable पास आवश्यक निष्पादन से अधिक समय है, उदाहरण के लिए, एक मल्टीपल HTTP अनुरोध।

कॉम्पैक्ट Observables का एक उदाहरण:

 export class SomeComponent { constructor(private http: HttpClient) { } ngOnInit() { Observable.timer(1000).subscribe(...); this.http.get("http://api.com").subscribe(...); } } 

अनंत वेधशालाओं का उदाहरण

 export class SomeComponent { constructor(private element : ElementRef) { } interval: Subscription; click: Subscription; ngOnInit() { this.interval = Observable.interval(1000).subscribe(...); this.click = Observable.fromEvent(this.element.nativeElement, "click").subscribe(...); } ngOnDestroy() { this.interval.unsubscribe(); this.click.unsubscribe(); } } 

नीचे, अधिक विवरण में वे मामले हैं जिनमें आपको सदस्यता समाप्त करने की आवश्यकता है

1. फॉर्म से और व्यक्तिगत नियंत्रणों से सदस्यता छोड़ना आवश्यक है जिसके लिए उन्होंने सदस्यता ली थी:

 export class SomeComponent { ngOnInit() { this.form = new FormGroup({...}); this.valueChangesSubs = this.form.valueChanges.subscribe(...); this.statusChangesSubs = this.form.statusChanges.subscribe(...); } ngOnDestroy() { this.valueChangesSubs.unsubscribe(); this.statusChangesSubs.unsubscribe(); } } 

1. रूटर। प्रलेखन के अनुसार, कोणीय को अपने आप को सदस्यता समाप्त करनी चाहिए, हालांकि ऐसा नहीं होता है । इसलिए, आगे की समस्याओं से बचने के लिए, हम अपने आप से लिखते हैं:

 export class SomeComponent { constructor(private route: ActivatedRoute, private router: Router) { } ngOnInit() { this.route.params.subscribe(..); this.route.queryParams.subscribe(...); this.route.fragment.subscribe(...); this.route.data.subscribe(...); this.route.url.subscribe(..); this.router.events.subscribe(...); } ngOnDestroy() { //        observables } } 

1. अंतहीन क्रम। interva() या इवेंट श्रोताओं (fromEvent()) का उपयोग करके बनाए गए अनुक्रम हैं:

 export class SomeComponent { constructor(private element : ElementRef) { } interval: Subscription; click: Subscription; ngOnInit() { this.intervalSubs = Observable.interval(1000).subscribe(...); this.clickSubs = Observable.fromEvent(this.element.nativeElement, "click").subscribe(...); } ngOnDestroy() { this.intervalSubs.unsubscribe(); this.clickSubs.unsubscribe(); } } 

takeUntil और takeWhile

RxJS में अनंत वेधशालाओं के साथ काम को आसान बनाने के लिए, दो सुविधाजनक कार्य हैं - takeUntil और takeWhile । वे एक ही क्रिया करते हैं - कुछ स्थिति के अंत में Observable से अनसब्सक्राइब करना, अंतर केवल स्वीकृत मूल्यों में है। takeWhile एक boolean स्वीकार करता है, और takeUntil एक Subject takeUntil है।
takeWhile उदाहरण:

 export class SomeComponent implements OnDestroy, OnInit { public user: User; private alive: boolean = true; public ngOnInit() { this.userService .authenticate(email, password) .takeWhile(() => this.alive) .subscribe(user => { this.user = user; }); } public ngOnDestroy() { this.alive = false; } } 

इस मामले में, जब alive ध्वज को बदल दिया जाता है, तो Observable सदस्यता समाप्त हो जाएगी। इस उदाहरण में, घटक के नष्ट होने पर सदस्यता समाप्त करें।
takeUntil उदाहरण:

 export class SomeComponent implements OnDestroy, OnInit { public user: User; private unsubscribe: Subject<void> = new Subject(void); public ngOnInit() { this.userService.authenticate(email, password) .takeUntil(this.unsubscribe) .subscribe(user => { this.user = user; }); } public ngOnDestroy() { this.unsubscribe.next(); this.unsubscribe.complete(); } } 

इस मामले में, Observable से सदस्यता समाप्त करने के लिए Observable हम रिपोर्ट करते हैं कि subject अगला मान लेता है और इसे पूरा करता है।

इन कार्यों का उपयोग करने से लीक से बचा जा सकता है और डेटा से सदस्यता समाप्त करने के साथ काम को सरल बनाया जा सकता है। किस फ़ंक्शन का उपयोग करना है? इस प्रश्न का उत्तर व्यक्तिगत प्राथमिकताओं और वर्तमान आवश्यकताओं द्वारा निर्देशित किया जाना चाहिए।

कोणीय अनुप्रयोगों में राज्य प्रबंधन, @ ngrx / store

काफी बार, जब जटिल अनुप्रयोग विकसित होते हैं, तो हमें राज्य को स्टोर करने और इसके परिवर्तनों का जवाब देने की आवश्यकता के साथ सामना किया जाता है। ReactJs ढांचे पर विकसित अनुप्रयोगों के लिए कई पुस्तकालय हैं जो आपको आवेदन की स्थिति को नियंत्रित करने और इसके परिवर्तनों का जवाब देने की अनुमति देते हैं - फ्लक्स, रेडक्स, रेडक्स-सागा, आदि। कोणीय अनुप्रयोगों के लिए, एक RxJS आधारित राज्य कंटेनर है जो Redux से प्रेरित है - @ ngrx / store। एप्लिकेशन की स्थिति का उचित प्रबंधन डेवलपर को एप्लिकेशन के आगे विस्तार के साथ कई समस्याओं से बचाएगा।

क्यों Redux
Redux जावास्क्रिप्ट अनुप्रयोगों के लिए एक अनुमानित राज्य कंटेनर के रूप में खुद को तैनात करता है। Redux फ्लक्स और एल्म से प्रेरित है।

Redux कार्यों के अनुक्रम द्वारा एक प्रारंभिक अवस्था के रूप में अनुप्रयोग के बारे में सोचता है, जो जटिल वेब अनुप्रयोगों के निर्माण के लिए एक अच्छा तरीका हो सकता है।

Redux किसी विशिष्ट फ्रेमवर्क से संबद्ध नहीं है, और हालाँकि यह React के लिए विकसित किया गया था, लेकिन इसका उपयोग Angular या jQuery के साथ किया जा सकता है।

Redux के मुख्य पद:

• आवेदन के पूरे राज्य के लिए एक भंडार
• केवल पढ़ने के लिए राज्य
• परिवर्तन "शुद्ध" कार्यों द्वारा किए जाते हैं, जो निम्नलिखित आवश्यकताओं के अधीन हैं:
• नेटवर्क या डेटाबेस पर बाहरी कॉल न करें;
• एक मान लौटाया जो केवल पारित मापदंडों पर निर्भर करता है;
• तर्क अपरिवर्तनीय हैं, अर्थात् कार्यों को उन्हें बदलना नहीं चाहिए;
• समान तर्कों के साथ एक शुद्ध कार्य को कॉल करना हमेशा एक ही परिणाम देता है;

राज्य प्रबंधन समारोह का एक उदाहरण:

 // counter.ts import { ActionReducer, Action } from "@ngrx/store"; export const INCREMENT = "INCREMENT"; export const DECREMENT = "DECREMENT"; export const RESET = "RESET"; export function counterReducer(state: number = 0, action: Action) { switch (action.type) { case INCREMENT: return state + 1; case DECREMENT: return state - 1; case RESET: return 0; default: return state; } } 

Reducer आवेदन के मुख्य मॉड्यूल में आयात किया जाता है और StoreModule.provideStore(reducers) फ़ंक्शन का उपयोग करके हम इसे कोणीय इंजेक्टर के लिए उपलब्ध StoreModule.provideStore(reducers) :

 // app.module.ts import { NgModule } from "@angular/core"; import { StoreModule } from "@ngrx/store"; import { counterReducer } from "./counter"; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore({ counter: counterReducer }) ] }) export class AppModule { } 

इसके बाद, Store सेवा को आवश्यक घटकों और सेवाओं में पेश किया जाता है। Store.select () फ़ंक्शन का उपयोग "स्लाइस" स्थिति का चयन करने के लिए किया जाता है:

 // app.component.ts ... interface AppState { counter: number; } @Component({ selector: "my-app", template: ` <button (click)="increment()">Increment</button> <div>Current Count: {{ counter | async }}</div> <button (click)="decrement()">Decrement</button> <button (click)="reset()">Reset Counter</button>` }) class AppComponent { counter: Observable<number>; constructor(private store: Store<AppState>) { this.counter = store.select("counter"); } increment() { this.store.dispatch({ type: INCREMENT }); } decrement() { this.store.dispatch({ type: DECREMENT }); } reset() { this.store.dispatch({ type: RESET }); } } 

@ ngrx / रूटर-स्टोर

कुछ मामलों में, आवेदन की वर्तमान स्थिति के साथ आवेदन की स्थिति को जोड़ना सुविधाजनक है। इन मामलों के लिए, @ ngrx / रूटर-स्टोर मॉड्यूल मौजूद है। राज्य को बचाने के लिए router-store का उपयोग करने के लिए आवेदन के लिए, बस routerReducer कनेक्ट routerReducer और एप्लिकेशन के मुख्य मॉड्यूल में routerReducer कॉल जोड़ें:

 import { StoreModule } from "@ngrx/store"; import { routerReducer, RouterStoreModule } from "@ngrx/router-store"; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore({ router: routerReducer }), RouterStoreModule.connectRouter() ], bootstrap: [AppComponent] }) export class AppModule { } 

अब आवेदन के मुख्य राज्य में RouterState जोड़ें:

 import { RouterState } from "@ngrx/router-store"; export interface AppState { ... router: RouterState; }; 

इसके अतिरिक्त, हम स्टोर की घोषणा करते समय आवेदन की प्रारंभिक स्थिति का संकेत कर सकते हैं:

 StoreModule.provideStore( { router: routerReducer }, { router: { path: window.location.pathname + window.location.search } } ); 

समर्थित कार्य:

 import { go, replace, search, show, back, forward } from "@ngrx/router-store"; //      store.dispatch(go(["/path", { routeParam: 1 }], { query: "string" })); //        store.dispatch(replace(["/path"], { query: "string" })); //        store.dispatch(show(["/path"], { query: "string" })); //       store.dispatch(search({ query: "string" })); //   store.dispatch(back()); //   store.dispatch(forward()); 

UPD: टिप्पणी ने सुझाव दिया कि ये क्रियाएं नए संस्करण @ngrx, नए संस्करण https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxrouter-store पर उपलब्ध नहीं होंगी

जटिल अनुप्रयोगों को विकसित करते समय राज्य कंटेनर का उपयोग कई समस्याओं को समाप्त करेगा। हालांकि, राज्य प्रबंधन को यथासंभव सरल बनाना महत्वपूर्ण है। अक्सर, एक को उन अनुप्रयोगों से निपटना पड़ता है जिसमें राज्यों का अत्यधिक घोंसला होता है, जो केवल आवेदन की समझ को जटिल करता है।

कोड संगठन

import में भारी भावों से छुटकारा पाना

कई डेवलपर्स एक ऐसी स्थिति से अवगत हैं, जहां import में अभिव्यक्तियाँ बोझिल हैं। यह विशेष रूप से बड़े अनुप्रयोगों में ध्यान देने योग्य है जहां कई पुन: प्रयोज्य पुस्तकालय हैं।

 import { SomeService } from "../../../core/subpackage1/subpackage2/some.service"; 

इस कोड में और क्या बुरा है? यदि आपको हमारे घटक को किसी अन्य निर्देशिका में स्थानांतरित करने की आवश्यकता है, तो import में दिए गए भाव मान्य नहीं होंगे।

इस मामले में, उपनाम का उपयोग करने से हम import में भारी भावों से दूर हो सकते import और हमारे कोड को अधिक स्वच्छ बना सकते हैं। उपनाम का उपयोग करने के लिए परियोजना को तैयार करने के लिए, आपको tsconfig.json में baseUrl और पथ गुण tsconfig.json :

 / tsconfig.json { "compilerOptions": { ... "baseUrl": "src", "paths": { "@app/*": ["app/*"], "@env/*": ["environments/*"] } } } 

इन परिवर्तनों के साथ, प्लग-इन को प्रबंधित करना काफी आसान है:

 import { Component, OnInit } from "@angular/core"; import { Observable } from "rxjs/Observable"; /*    */ import { SomeService } from "@app/core"; import { environment } from "@env/environment"; /*      */ import { LocalService } from "./local.service"; @Component({ /* ... */ }) export class ExampleComponent implements OnInit { constructor( private someService: SomeService, private localService: LocalService ) { } } 

इस उदाहरण में, SomeService सीधे SomeService अभिव्यक्ति के बजाय @app/core से आयात किया जाता है (उदा। @app/core/some-package/some.service )। मुख्य index.ts फ़ाइल में सार्वजनिक घटकों के पुन: निर्यात के लिए यह संभव है। प्रत्येक पैकेज के लिए एक index.ts फ़ाइल बनाने की सलाह दी जाती है जिसमें आपको सभी सार्वजनिक मॉड्यूल को फिर से निर्यात करने की आवश्यकता होती है:

 // index.ts export * from "./core.module"; export * from "./auth/auth.service"; export * from "./user/user.service"; export * from "./some-service/some.service"; 

कोर, साझा, और फ़ीचर मॉड्यूल

एप्लिकेशन घटकों के अधिक लचीले प्रबंधन के लिए, साहित्य में और इसके घटकों की दृश्यता को फैलाने के लिए विभिन्न इंटरनेट संसाधनों में इसकी अक्सर सिफारिश की जाती है। इस मामले में, आवेदन के घटकों का प्रबंधन सरल है। निम्नलिखित जुदाई का सबसे अधिक उपयोग किया जाता है: कोर, साझा और फ़ीचर मॉड्यूल।

CoreModule

CoreModule का मुख्य उद्देश्य उन सेवाओं का वर्णन करना है जिनके पास पूरे एप्लिकेशन के लिए एक उदाहरण होगा (यानी, एकल पैटर्न लागू करें)। इनमें अक्सर उपयोगकर्ता जानकारी प्राप्त करने के लिए एक प्राधिकरण सेवा या एक सेवा शामिल होती है। CoreModule उदाहरण:

 import { NgModule, Optional, SkipSelf } from "@angular/core"; import { CommonModule } from "@angular/common"; import { HttpClientModule } from "@angular/common/http"; /*  */ import { SomeSingletonService } from "./some-singleton/some-singleton.service"; @NgModule({ imports: [CommonModule, HttpClientModule], declarations: [], providers: [SomeSingletonService] }) export class CoreModule { /*   CoreModule    NgModule the AppModule */ constructor( @Optional() @SkipSelf() parentModule: CoreModule ) { if (parentModule) { throw new Error("CoreModule is already loaded. Import only in AppModule"); } } } 

SharedModule

यह मॉड्यूल सरल घटकों का वर्णन करता है। ये घटक अपने मॉड्यूल में अन्य मॉड्यूल से निर्भरता को आयात या इंजेक्ट नहीं करते हैं। उन्हें घटक टेम्पलेट में विशेषताओं के माध्यम से सभी डेटा प्राप्त करना चाहिए। SharedModule का हमारे बाकी एप्लिकेशन पर कोई निर्भरता नहीं है। यह कोणीय सामग्री के घटकों या अन्य UI पुस्तकालयों के आयात और पुनः निर्यात के लिए एक आदर्श स्थान है।

 import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { MdButtonModule } from "@angular/material"; /*  */ import { SomeCustomComponent } from "./some-custom/some-custom.component"; @NgModule({ imports: [CommonModule, FormsModule, MdButtonModule], declarations: [SomeCustomComponent], exports: [ /*  Angular Material*/ CommonModule, FormsModule, MdButtonModule, /*   */ SomeCustomComponent ] }) export class SharedModule { } 

FeatureModule

यहां आप कोणीय शैली गाइड को दोहरा सकते हैं। प्रत्येक स्वतंत्र अनुप्रयोग फ़ंक्शन के लिए एक अलग FeatureModule बनाया जाता है। FeatureModule को केवल CoreModule से सेवाएँ आयात करनी चाहिए। यदि कुछ मॉड्यूल को किसी अन्य मॉड्यूल से सेवा आयात करने की आवश्यकता होती है, तो संभव है कि इस सेवा को CoreModule ले जाया CoreModule ।

कुछ मामलों में, केवल कुछ मॉड्यूल द्वारा सेवा का उपयोग करने की आवश्यकता है और इसे CoreModule को निर्यात करने की आवश्यकता नहीं है। इस मामले में, आप एक विशेष SharedModule बना सकते हैं, जिसका उपयोग केवल इन मॉड्यूल में किया जाएगा।
, — , - , , CoreModule , SharedModule .

, . , . , , .

संदर्भ

1. https://github.com/ngrx/store
2. http://stepansuvorov.com/blog/2017/06/angular-rxjs-unsubscribe-or-not-unsubscribe/
3. https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81
4. https://habr.com/post/336280/
5. https://angular.io/docs