Exemple de fișe Angular din aplicația noastră

Descarcă aplicația noastră din App Store sau Google Play pentru a obține mai multe flashcarduri gratuite sau abonează-te pentru acces la toate flashcardurile.

Descrieți cum să utilizați Interceptorii HTTP în Angular pentru a gestiona cererile și răspunsurile.

Interceptorul HTTP în Angular este utilizat pentru a manipula solicitările și răspunsurile HTTP. Ele pot intercepta o solicitare, o pot modifica și o pot transmite. De asemenea, pot intercepta un răspuns, îl pot modifica și îl pot transmite. Pentru a folosi un interceptor HTTP, trebuie să creăm un serviciu care implementează interfața HttpInterceptor.

Iată codul care ilustrează cum să adăugați interceptoră în aplicația dvs:

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>> {

    // Aici modificăm cererea
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Aici transmitem cererea
    return next.handle(modifiedReq);

  }

}

Odată ce Interceptorul nostru este definit, trebuie să îl adăugăm în array-ul nostru de furnizori din modulul de aplicație:

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

Rețineți că 'multi' este setat la true. Acest lucru ne permite să adăugăm multiple interceptoare, care vor fi executate în ordinea în care sunt furnizate. Trebuie să rețineți că ordinea Interceptorilor contează, deoarece fiecare interceptor ulterior primește solicitarea de la cel anterior, astfel că orice modificări făcute de interceptorul anterior vor fi vizibile următorului.

Cum funcționează legarea datelor în componente Angular folosind @Input() și @Output()?

Legarea datelor este un aspect cheie al programării în Angular. Acest lucru face posibilă transferul dinamic de date între comenzi. Legarea de date include două tehnici: @Input și @Output.

@Input permite transferul de valori de la componenta părinte către componenta copil. Aceasta este așa-numita tehnică de legare a datelor într-un singur sens - datele curg de la partea de sus la partea de jos a ierarhiei componentelor. O folosim pentru a marca variabilele care trebuie să fie vizibile pentru componentele părinte.

Exemplu de utilizare a @Input:

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

// parent.component.ts
parentMessage = "Bună ziua de la părinte";

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

În exemplul de mai sus, `parentMessage` din parent.component.ts este trecută la `childMessage` în child.component.ts.

@Output, pe de altă parte, permite comunicarea în sens invers - de la componenta copil la părinte. Acesta este așa-numita tehnică de legare a evenimentului. Utilizând decoratorul @Output(), putem declanșa un eveniment în componenta copil și să îl gestionăm în componenta părinte.

Exemplu de utilizare a @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>();

În acest caz, când `messageEvent` este declanșat în child.component.ts, funcția `receiveMessage` este apelată în parent.component.ts și primește valoarea trimisă de `messageEvent`.

Ce este NgModel și cum este utilizat în formularele Angular?

NgModel este o directivă Angular care este utilizată pentru a crea legături de date bidirecționale în formulare. Legarea bidirecțională a datelor înseamnă că datele pot fi transmise de la model la vizualizare și de la vizualizare la model. În practică, acest lucru înseamnă că modificările făcute de utilizator în câmpurile formularului se reflectă în modelul de date, iar modificările la modelul de date sunt vizibile în formular.

Utilizarea directivei NgModel în formulare este destul de simplă. O plasăm în elementul de formă potrivit și o legăm de câmpul modelului potrivit utilizând sintaxa [(ngModel)].

De exemplu:

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

  <label for="age">Vârstă:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Unde "person.name" și "person.age" sunt câmpurile modelului de date care sunt legate de câmpurile de formă corespunzătoare. Orice modificări făcute de utilizator în aceste câmpuri de formă vor fi reflectate automat în modelul "person".

Țineți minte, pentru a folosi directiva NgModel, este necesar să importați FormsModule în modulul de aplicație.

Ce este Zone.js în Angular și cum afectează performanța aplicației?

Zone.js este o bibliotecă care permite urmărirea operațiunilor asincrone în JavaScript. În contextul Angular, Zone.js este o componentă cheie a mecanismului de detectare a schimbărilor.

Zone.js introduce conceptul de "zone", care sunt contexte globale de execuție. Aceste "zone" creează un "arbore", unde fiecare operație asincronă are loc întotdeauna în aceeași zonă care a inițiat operația. Ca rezultat, putem urmări când începe o operație și când se termină.

Exemplu:
Prima operație poate declanșa un setTimeout, prin care următoarea operație este programată pentru următoarea rundă a buclei de evenimente. Deși acestea sunt două operații distincte, Zone.js ne permite să le urmărim ca un întreg - aceasta este urmărirea asincronă.

În Angular, Zone.js este utilizat pentru a informa cadrul când să înceapă detectarea schimbărilor. Fiecare acțiune a utilizatorului, temporizator sau solicitare http este efectuată în "zona angulară". Când operațiile din "zona angulară" se termină, Angular declanșează automat detectarea schimbărilor.

Cu acest mecanism, Angular știe când are sens să actualizeze vizualizarea. De aceea, Zone.js este crucial pentru performanță. Fără Zone.js, Angular ar trebui să utilizeze tehnici cum ar fi sondajul pentru a afla când să declanșeze detectarea schimbărilor, ceea ce ar fi extrem de ineficient.

Deși Zone.js are efecte pozitive asupra performanței Angular, ar putea avea și un impact negativ. Dacă o aplicație efectuează o multitudine de operațiuni asincrone care nu afectează starea aplicației, Angular declanșează totuși detectarea schimbărilor. În cazul unui număr mare de operațiuni, acest lucru ar putea afecta performanța. Pentru a preveni acest lucru, putem executa aceste operațiuni în afara "zonei angulare".

Fișe Angular

Exemple de fișe Angular din aplicația noastră

Descrieți cum să utilizați Interceptorii HTTP în Angular pentru a gestiona cererile și răspunsurile.

Cum funcționează legarea datelor în componente Angular folosind @Input() și @Output()?

Ce este NgModel și cum este utilizat în formularele Angular?

Ce este Zone.js în Angular și cum afectează performanța aplicației?

Descărcați IT Flashcards Acum