हमारे ऐप से नमूना एंगुलर फ्लैशकार्ड्स

अधिक मुफ्त फ़्लैशकार्ड प्राप्त करने के लिए या सभी फ़्लैशकार्ड तक पहुँच के लिए हमारे एप्लिकेशन को App Store या Google Play से डाउनलोड करें या सदस्यता लें।

HTTP Interceptors का उपयोग करके Angular में अनुरोधों और प्रतिक्रियाओं को कैसे प्रबंधित करें, इसका वर्णन करें।

Angular में HTTP Interceptor का उपयोग HTTP अनुरोधों और प्रतिसादों को संशोधित करने के लिए किया जाता है। वे एक अनुरोध को रोक सकते हैं, इसे संशोधित कर सकते हैं, और इसे आगे भेज सकते हैं। वे एक प्रतिसाद को भी रोक सकते हैं, इसे संशोधित कर सकते हैं, और इसे आगे भेज सकते हैं। एक HTTP Interceptor का उपयोग करने के लिए, हमें एक सेवा बनाने की आवश्यकता होती है जो HttpInterceptor interface को लागू करती है।

यहां उस कोड का कोड है जो दिखाता है कि इंटरसेप्टर को आवेदन में कैसे जोड़ें:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Here we modify the request
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Here we pass the request on
    return next.handle(modifiedReq);

  }

}

एक बार हमारा Interceptor परिभाषित हो गया है, हमें इसे हमारे आवेदक मॉड्यूल में प्रदाताओं की अपनी array में जोड़ने की आवश्यकता होती है:

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

ध्यान दें कि 'multi' को true पर सेट किया गया है। इससे हमें कई इंटरसेप्टर जोड़ने की अनुमति मिलती है, जो उनकी प्रदान की क्रम में निष्पादित होंगे। आपको याद रखने की आवश्यकता है कि Interceptors का क्रम महत्वपूर्ण होता है, क्योंकि प्रत्येक अगला इंटरसेप्टर पिछले से अनुरोध प्राप्त करता है, इसलिए पिछले इंटरसेप्टर द्वारा किए गए किसी भी संशोधन अगले के लिए दृश्यमान होंगे।

Angular कंपोनेंट्स में @Input() और @Output() का उपयोग करके डेटा बाइंडिंग कैसे काम करता है?

डाटा बाइंडिंग एंगुलर में प्रोग्रामिंग का एक महत्वपूर्ण पहलु है। इससे कौम्पोनेंट्स के बीच डाटा को गतिशील रूप से स्थानांतरित करना संभव होता है। डाटा बाइंडिंग में दो तकनीकें शामिल हैं: @Input और @Output।

@Input पेरेंट कौम्पोनेंट से चाइल्ड कौम्पोनेंट के लिए मानों के स्थानांतरण की अनुमति देता है। यह एक एक-तरफा डाटा बाइंडिंग तकनीक है - डाटा कौम्पोनेंट अर्किटेक्चर के शीर्ष से निचले हिस्से में बहता है। हम यह उन चरों को चिह्नित करने के लिए इस्तेमाल करते हैं जो पेरेंट कौम्पोनेंट्स के लिए दिखाई देने के लिए होने चाहिए।

@Input का उपयोग करने का उदाहरण:

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Hello from parent";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

उपरोक्त उदाहरण में, parent.component.ts से `parentMessage` को child.component.ts में `childMessage` को पास किया जाता है।

वहीं, @Output विपरीत दिशा में संचार की अनुमति देता है - चाइल्ड कौम्पोनेंट से पेरेंट के लिए। इसे इवेंट बाइंडिंग तकनीक कहा जाता है। @Output() डेकोरेटर का उपयोग करके, हम चाइल्ड कम्पोनेंट में एक इवेंट को ट्रिगर कर सकते हैं और इसे पेरेंट कम्पोनेंट में संभाल सकते हैं।

@Output का उपयोग करने का उदाहरण:

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app.child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

इस मामले में, जब child.component.ts में `messageEvent` ट्रिगर होता है, तो `receiveMessage` फ़ंक्शन को parent.component.ts में कॉल किया जाता है और `messageEvent` द्वारा भेजा गया मवल एकत्र किया जाता है।

NgModel क्या है और इसका उपयोग Angular फॉर्म्स में कैसे किया जाता है?

NgModel एक एंगुलर निर्देश है जिसका उपयोग फ़ॉर्मों में दो-दिशाओं वाले डाटा बाइंडिंग को बनाने के लिए किया जाता है। दो-दिशाओं वाला डाटा बाइंडिंग का अर्थ है कि डाटा मॉडल से दृश्य, और दृश्य से मॉडल को संचरित किया जा सकता है। व्यावहारिक रूप में, इसका मतलब है कि उपयोगकर्ता द्वारा फ़ॉर्म क्षेत्रों में किए गए परिवर्तन डाटा मॉडल में दिखाई देते हैं, और डाटा मॉडल में परिवर्तन फ़ॉर्म में दिखाई देते हैं।

फ़ॉर्मों में NgModel निर्देश का उपयोग काफी सरल है। हम इसे उचित फ़ॉर्म तत्व में रखते हैं और [(ngModel)] सिंटैक्स का उपयोग करके इसे उचित मॉडल फ़ील्ड से जोड़ते हैं।

उदाहरण के लिए:

<form>
  <label for="name">Name:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Age:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

जहां "person.name" और "person.age" डाटा मॉडल फ़ील्ड हैं जिन्हें संबंधित फ़ॉर्म क्षेत्रों से बांधा गया है। इन फ़ॉर्म क्षेत्रों में उपयोगकर्ता द्वारा किए गए किसी भी परिवर्तन स्वतः ही "व्यक्ति" मॉडल में दिखाई देंगे।

याद रखें, NgModel निर्देश का उपयोग करने के लिए, आवेदन मॉड्यूल में FormsModule को आयात करना आवश्यक होता है।

Angular में Zone.js क्या है और यह एप्लिकेशन के प्रदर्शन को कैसे प्रभावित करता है?

Zone.js एक पुस्तकालय है जो JavaScript में असमय-समक्रियात्मक ऑपरेशनों की ट्रैकिंग की अनुमति देता है। Angular के संदर्भ में, Zone.js परिवर्तन का संसूचन तंत्र का एक मुख्य घटक है।

Zone.js "क्षेत्रों" की अवधारणा का परिचय देता है, जो वैश्विक कार्यान्वयन संदर्भ होते हैं। ये "क्षेत्र" एक "पेड़" बनाते हैं, जहां प्रत्येक असमय-समक्रियात्मक ऑपरेशन हमेशा उसी क्षेत्र में होता है जिसने ऑपरेशन की शुरुआत की थी। इस परिणामस्वरूप, हम एक ऑपरेशन की शुरुआत और इसके समाप्त होने का पता लगा सकते हैं।

उदाहरण:
पहला ऑपरेशन एक setTimeout ट्रिगर कर सकता है, जिससे अगला ऑपरेशन घटना प्रवाह के अगले दौर के लिए अनुसूचित होता है। भले ही ये दो अलग ऑपरेशन हों, Zone.js हमें इन्हें एक पूरे रूप में ट्रैक करने की अनुमति देता है - यह असमय-समक्रियात्मक ट्रैकिंग है।

Angular में, Zone.js का उपयोग परिवर्तन का संसूचन शुरू करने के लिए फ्रेमवर्क को सूचित करने के लिए किया जाता है। प्रत्येक उपयोगकर्ता क्रिया, टाइमर, या http अनुरोध "एंगुलर क्षेत्र" में किया जाता है। "एंगुलर क्षेत्र" में ऑपरेशन पूरे होने पर, Angular स्वचालित रूप से परिवर्तन का संसूचन शुरू करता है।

इस तंत्र के साथ, Angular जानता है कि जब व्यू को ताजगी देने का समय है। इसलिए Zone.js प्रदर्शन के लिए महत्वपूर्ण है। Zone.js के बिना, Angular को पता लगाने के लिए polling जैसी तकनीकों का उपयोग करना पड़ता कि कब परिवर्तन का संसूचन शुरू करना है, जो अत्यधिक अक्षम होगा।

हालांकि Zone.js Angular के प्रदर्शन पर सकारात्मक प्रभाव डालता है, इसका नकारात्मक प्रभाव भी हो सकता है। यदि एक अनुप्रयोग बहुत सारे असमय-समक्रियात्मक ऑपरेशन को अंजाम देता है जो अनुप्रयोग की स्थिति को प्रभावित नहीं करते, तो Angular फिर भी परिवर्तन का संसूचन शुरू करता है। बड़ी संख्या में ऑपरेशनों की स्थिति में, यह प्रदर्शन को बिगाड़ सकता है। इसे रोकने के लिए, हम इन ऑपरेशनों को "एंगुलर क्षेत्र" के बाहर चला सकते हैं।

एंगुलर फ्लैशकार्ड्स

हमारे ऐप से नमूना एंगुलर फ्लैशकार्ड्स

HTTP Interceptors का उपयोग करके Angular में अनुरोधों और प्रतिक्रियाओं को कैसे प्रबंधित करें, इसका वर्णन करें।

Angular कंपोनेंट्स में @Input() और @Output() का उपयोग करके डेटा बाइंडिंग कैसे काम करता है?

NgModel क्या है और इसका उपयोग Angular फॉर्म्स में कैसे किया जाता है?

Angular में Zone.js क्या है और यह एप्लिकेशन के प्रदर्शन को कैसे प्रभावित करता है?

डाउनलोड करें आईटी फ्लैशकार्ड्स अभी