Ukázkové Angular kartičky z naší aplikace

Stáhněte si naši aplikaci z App Store nebo Google Play a získejte více zdarma fishek nebo se přihlaste k odběru pro přístup ke všem fishek.

Popište, jak používat HTTP Interceptors v Angularu pro správu požadavků a odpovědí.

HTTP Interceptor v Angularu slouží k manipulaci s HTTP požadavky a odpověďmi. Může zachytit požadavek, upravit jej a předat jej dál. Může také zachytit odpověď, upravit ji a předat ji dál. K použití HTTP Interceptoru musíme vytvořit službu, která implementuje rozhraní HttpInterceptor.

Zde je kód ilustrující, jak přidat interceptory do aplikace:

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

    // Zde upravujeme požadavek
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Zde předáváme požadavek dál
    return next.handle(modifiedReq);

  }

}

Jakmile je náš Interceptor definován, musíme ho přidat do našeho pole poskytovatelů v modulu aplikace:

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

Všimněte si, že 'multi' je nastaveno na true. To nám umožní přidat více interceptorů, které budou provedeny v pořadí, v jakém jsou poskytnuty. Musíte si pamatovat, že pořadí Interceptorů má význam, protože každý další interceptor dostává požadavek od předchozího, takže jakékoliv změny provedené předchozím interceptorem budou viditelné pro další.

Jak funguje Data Binding v komponentách Angularu s použitím @Input() a @Output()?

Vazba dat je klíčovým aspektem programování v Angular. To umožňuje dynamicky přenášet data mezi komponentami. Vazba dat zahrnuje dvě techniky: @Input a @Output.

@Input umožňuje přenos hodnot z rodičovské komponenty do dceřiné komponenty. Jedná se o takzvanou jednosměrnou techniku vazby dat - data proudí shora dolů hierarchií komponent. Používáme ho k označení proměnných, které mají být viditelné pro rodičovské komponenty.

Příklad použití @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;

V tomto příkladu se `parentMessage` z parent.component.ts předává do `childMessage` v child.component.ts.

@Output, na druhou stranu, umožňuje komunikaci v opačném směru - od dceřiné komponenty k rodiči. Tento se nazývá technika vazby událostí. Pomocí dekorátoru @Output() můžeme v dceřiné komponentě spustit událost a obsloužit ji v rodičovské komponentě.

Příklad použití @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>();

V tomto případě, když se v child.component.ts spustí `messageEvent`, volá se funkce `receiveMessage` v parent.component.ts a přijímá hodnotu odeslanou `messageEvent`.

Co je NgModel a jak se používá ve formulářích Angular?

NgModel je direktiva Angularu, která se používá k vytvoření dvousměrného datového vázání ve formulářích. Dvousměrné datové vázání znamená, že data mohou být přenášena z modelu do pohledu a z pohledu do modelu. V praxi to znamená, že změny provedené uživatelem ve formulářových polích se odrážejí v datovém modelu a změny v datovém modelu jsou viditelné ve formuláři.

Použití direktivy NgModel ve formulářích je docela jednoduché. Umístíme ji do příslušného prvku formuláře a vážeme ji na příslušné pole modelu pomocí syntaxe [(ngModel)].

Například:

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

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

Kde "person.name" a "person.age" jsou pole datového modelu, která jsou vázana na odpovídající pole formuláře. Jakékoli změny provedené uživatelem v těchto formulářových polích se automaticky projeví v modelu "person".

Nezapomeňte, že k použití direktivy NgModel je nutné importovat FormsModule do aplikačního modulu.

Co je Zone.js v Angularu a jak ovlivňuje výkon aplikace?

Zone.js je knihovna, která umožňuje sledování asynchronních operací v JavaScriptu. V kontextu Angularu je Zone.js klíčovou součástí mechanismu detekce změn.

Zone.js představuje koncept "zón", což jsou globální kontexty provádění. Tyto "zóny" vytvářejí "strom", kde se každá asynchronní operace vždy odehrává ve stejné zóně, která operaci iniciovala. Díky tomu jsme schopni sledovat, kdy operace začíná a kdy končí.

Příklad:
První operace může vyvolat setTimeout, čímž je příští operace naplánována na další kolo událostní smyčky. I když jde o dvě odlišné operace, Zone.js nám umožňuje sledovat je jako celek - toto je asynchronní sledování.

V Angularu se Zone.js používá k informování frameworku, kdy má začít detekovat změny. Každá uživatelská akce, časovač nebo http požadavek se provádí v "angular zóně". Když operace v "angular zóně" skončí, Angular automaticky spustí detekci změn.

S tímto mechanismem ví Angular, kdy má smysl obnovit zobrazení. Proto je Zone.js pro výkon klíčová. Bez Zone.js by musel Angular používat techniky jako je průzkum pro zjištění, kdy má spustit detekci změn, což by bylo velmi neefektivní.

Ačkoli Zone.js má pozitivní vliv na výkon Angularu, může také mít negativní dopad. Pokud aplikace provádí velké množství asynchronních operací, které neovlivňují stav aplikace, Angular stále spouští detekci změn. V případě velkého počtu operací by to mohlo výkon snížit. Abychom tomu předešli, můžeme tyto operace provést mimo "angular zónu".

Angular Kartičky

Ukázkové Angular kartičky z naší aplikace

Popište, jak používat HTTP Interceptors v Angularu pro správu požadavků a odpovědí.

Jak funguje Data Binding v komponentách Angularu s použitím @Input() a @Output()?

Co je NgModel a jak se používá ve formulářích Angular?

Co je Zone.js v Angularu a jak ovlivňuje výkon aplikace?

Stáhnout IT Flashcards Teď