Przykładowe fiszki Angular z naszej aplikacji

Pobierz naszą aplikację w App Store lub Google Play, aby uzyskać więcej darmowych fiszek lub subskrybuj dostęp do wszystkich fiszek.

Opisz, jak użyć Interceptorów HTTP w Angularze do zarządzania zapytaniami i odpowiedziami.

Interceptor HTTP w Angularze używany jest do manipulowania zapytaniami i odpowiedziami HTTP. Mogą one przechwytywać zapytanie, modyfikować je i przekazywać dalej. Mogą również przechwytywać odpowiedź, modyfikować ją i przekazywać dalej. Aby użyć Interceptora HTTP, musimy stworzyć serwis, który implementuje interfejs HttpInterceptor.

Poniżej przedstawiam kod, który ilustruje sposób dodania interceptorów do aplikacji:

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

    // Tutaj modyfikujemy zapytanie
    const modifiedReq = req.clone({ 
      headers: req.headers.set('Authorization', 'Moja wartość'), 
    });

    // Tutaj przekazujemy zapytanie dalej
    return next.handle(modifiedReq);

  }

}

Kiedy mamy już zdefiniowany nasz Interceptor, musimy dodać go do naszej tablicy providerów w module aplikacji:

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

Zwróć uwagę na to, że 'multi' jest ustawione na true. Dzięki temu, można dodać wiele interceptorów, które będą wykonywane w porządku, w jakim zostały dostarczone.
McMusisz pamiętać, że kolejność Interceptorów ma znaczenie, ponieważ każdy następny interceptor otrzymuje zapytanie od poprzedniego, a więc wszelkie modyfikacje wprowadzone przez poprzedni interceptor będą widoczne dla następnego.

Jak działa Data Binding w komponentach angularowych z wykorzystaniem @Input() i @Output()?

Data Binding (powiązanie danych) jest kluczowym aspektem programowania w Angularze. Dzięki niemu możliwe jest dynamiczne przesyłanie danych między komponentami. W skład Data Binding wchodzą dwie techniki: @Input i @Output.

@Input pozwala na przekazywanie wartości z komponentu nadrzędnego (parent) do komponentu podrzędnego (child). Jest to technika tzw. one-way data binding - dane płyną z góry na dół hierarchii komponentów. Oznaczamy nią zmienne, które mają byc widoczne dla komponentów nadrzędnych.

Przykład użycia @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;

W powyższym przykładzie, `parentMessage` z parent.component.ts jest przekazywane do `childMessage` w child.component.ts.

@Output natomiast pozwala na komunikację w drugą stronę - od podrzędnego komponentu do nadrzędnego. Jest to technika tzw. event binding. Używając dekoratora @Output(), możemy wywołać event w komponencie podrzędnym i obsłużyć go w komponencie nadrzędnym.

Przykład użycia @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>();

W tym przypadku, kiedy `messageEvent` zostanie wywołane w child.component.ts, funkcja `receiveMessage` zostanie wywołana w parent.component.ts i otrzyma wartość wysłaną przez `messageEvent`.

Co to jest NgModel i jak jest używane w formularzach Angulara?

NgModel to dyrektywa Angulara, która jest wykorzystywana do tworzenia powiązań dwukierunkowych (two-way data binding) w formularzach. Powiązanie dwukierunkowe oznacza, że dane mogą być przesyłane z modelu do widoku i z widoku do modelu. W praktyce oznacza to, że zmiany dokonane przez użytkownika w polach formularza są odwzorowywane na modelu danych, a zmiany modelu danych są widoczne w formularzu.

Użycie dyrektywy NgModel w formularzach jest dość proste. Umieszczamy ją w odpowiednim elemencie formularza i powiązujemy z odpowiednim polem modelu za pomocą składni [(ngModel)].

Przykładowo:

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

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

Gdzie "person.name" i "person.age" to pola modelu danych, które są powiązane z odpowiednimi polami formularza. Wszelkie zmiany dokonane przez użytkownika w tych polach formularza zostaną automatycznie odzwierciedlone w modelu "person".

Pamiętaj, że do korzystania z dyrektywy NgModel konieczne jest zaimportowanie modułu FormsModule w module aplikacji.

Co to jest Zone.js w Angularze i jak wpływa na wydajność aplikacji?

Zone.js to biblioteka, która pozwala na śledzenie asynchronicznych operacji w JavaScript. W kontekście Angulara, Zone.js jest kluczowym elementem mechanizmu detekcji zmian.

Zone.js przedstawia pojęcie "strefy" (zones), które są globalnymi kontekstami wykonania. Te "strefy" tworzą "drzewo", w którym każda asynchroniczna operacja zawsze odbywa się w tej samej strefie, która zainicjowała operację. Dzięki temu, możemy śledzić, kiedy dana operacja się zaczyna i kiedy się kończy.

Przykład:
Pierwsza operacja może załączyć setTimeout dzięki czemu następna operacja jest planowana do kolejnej rundy pętli zdarzeń. Mimo tego, że są to dwie różne operacje, zone.js pozwoli nam śledzić je jako jedną całość - to jest właśnie asynchroniczne śledzenie.

W Angularze Zone.js jest używany do informowania frameworka kiedy ma rozpocząć detekcję zmian. Każda akcja użytkownika, timer czy zapytanie http jest wykonane w "angular zone". Kiedy operacje w "angular zone" kończą się, Angular automatycznie uruchamia detekcję zmian.

Dzięki temu mechanizmowi, Angular wie kiedy warto odświeżyć widok. Dlatego Zone.js jest bardzo ważny dla wydajności. Bez Zone.js Angular musiałby używać technik takich jak polling aby dowiedzieć się kiedy ma uruchomić detekcję zmian, co było by bardzo nieefektywne.

Choć Zone.js wpływa pozytywnie na wydajność Angulara, może to mieć też negatywny wpływ. Jeżeli aplikacja wykonuje wiele asynchronicznych operacji, które nie wpływają na stan aplikacji, Angular i tak uruchamia detekcję zmian. W przypadku dużej ilości operacji, może to wpłynąć na wydajność. Aby temu zapobiec, możemy wykonywać te operacje poza "angular zone".

Fiszki Angular

Przykładowe fiszki Angular z naszej aplikacji

Opisz, jak użyć Interceptorów HTTP w Angularze do zarządzania zapytaniami i odpowiedziami.

Jak działa Data Binding w komponentach angularowych z wykorzystaniem @Input() i @Output()?

Co to jest NgModel i jak jest używane w formularzach Angulara?

Co to jest Zone.js w Angularze i jak wpływa na wydajność aplikacji?

Pobierz IT Flashcards Teraz