Pytania rekrutacyjne Angular

Czym jest Angular?

Angular to oparty na TypeScript otwarty framework do pisania aplikacji webowych stworzony i utrzymywany przez Google.

Główny nacisk jest położony na szybkość tworzenia aplikacji i ułatwienie wiązania komponentów z modelem danych.

Do najważniejszych zalet korzystania z Angulara należą:

• Mechanizm wstrzykiwania zależności (ang. dependency injection) ułatwiający konfigurowanie aplikacji,
• Dynamiczny mechanizm szablonów (ang. templates),
• Dwukierunkowy przepływ danych w aplikacji,
• Dostęp do wielu funkcjonalności bez konieczności konfiguracji i korzystania z dodatkowych bibliotek, np.

routing, zarządzanie stanem, RxJS, HTTP,

• Szeroka dostępność narzędzi programistycznych i zewnętrznych bibliotek

Jakie są cechy Angulara?

Do najważniejszych cech Angulara należy:

• Architektura oparta na komponentach,
• Dwukierunkowy przepływ danych w aplikacji,
• Generowanie kodu za pomocą Angular CLI,
• Tworzenie animacji bez pisania złożonego kodu CSS,
• Prosta konfiguracja routingu ułatwiająca podział kodu oraz lazy loading, dzięki czemu tylko część aplikacji jest renderowana na początku,
• Mechanizm wstrzykiwania zależności (ang. dependency injection),
• Wsparcie dla wielu platform i środowisk programistycznych, np. aplikacje webowe, PWA oraz natywne,
• Prosta składnia szablonów (ang. templates) do tworzenia dynamicznych widoków,
• Prosta walidacja danych

Co odróżnia Angular od AngularJS?

Jakie są elementy składowe Angulara?

Do najważniejszych składowych Angulara należą:

• Komponenty (ang. components)
• Dyrektywy (ang. directives)
• Serwisy (ang. services)
• Moduły (ang. modules)
• Szablony (ang. templates)
• Metadane (ang. metadata)
• Mechanizm Routingu
• Mechanizm wiązania danych (ang. data binding)
• Mechanizm wstrzykiwania zależności (ang. dependency injection)

Jak współpracują ze sobą różne składowe Angulara?

• Komponenty są zgrupowane w moduły pod względem funkcjonalności a każda aplikacja to zbiór modułów,
• Komponenty definiują widoki, które Angular aktualizuje w oparciu o logikę biznesową oraz stan aplikacji,
• Komponenty używają serwisów, które zawierają logikę biznesową, nie związaną bezpośrednio z widokami,
• Moduły, komponenty, dyrektywy i serwisy to klasy TypeScript, które używają dekoratorów z metadanymi,
• Metadane komponentu wiążą go z szablonem HTML, który oprócz standardowych elementów zawiera również dyrektywy Angulara oraz wiązania właściwości, które pozwalają na aktualizację widoku na podstawie statu aplikacji,
• Metadane serwisu dostarczają informacji o tym, jak serwis będzie dostępny dla mechanizmu wstrzykiwania zależności
• Aplikacja definiuje wiele widoków, które są zorganizowane hierarchicznie. Angular dostarcza Router, za pomocą którego można nawigować pomiędzy ekranami.

Czym jest komponent?

Komponent (ang. component) to klasa oznaczona dekoratorem @Component opisująca fragment UI aplikacji. Składa się z dyrektywy powiązanej z szablonem. W przeciwieństwie do innych dyrektyw, tylko jeden komponent może być przypisany do pojedynczego elementu DOM.

Aplikacja ma przynajmniej jeden root component, który łączy drzewo komponentów z modelem DOM.

Każdy komponent musi być częścią NgModule, aby mógł zostać zrenderowany. W tym celu należy go dodać do listy declarations w metadanych NgModule.

Zachowanie komponentów można kontrolować za pomocą ich cyklu życia, który rozpoczyna się, gdy Angular inicjalizuje komponent i zaczyna go renderować razem ze wszystkimi komponentami zależnymi.

W jaki sposób dwa komponenty mogą się komunikować?

W Angularze dwa komponenty mogą się komunikować na kilka sposobów:

• Za pomocą dekoratora @Input() komponent rodzica może przekazywać dane do komponentu dziecka,
• Za pomocą dekoratora @Output() oraz EventEmittera komponent dziecka może przekazywać dane do komponentu rodzica,
• Za pomocą dekoratora @ViewChild() komponent rodzica może uzyskać dostęp do danych komponentu dziecka,
• Za pomocą wspólnej instancji serwisu wstrzykniętego do obu komponentów,
• Za pomocą współdzielonego obiektu Subject<T>

Do czego służą dyrektywy?

Dyrektywa (ang. directive) to klasa oznaczona dekoratorem @Directive(). Gdy Angular renderuje szablon, modyfikuje drzewo DOM zgodnie z instrukcjami określonymi przez dyrektywy. Określają one w jaki sposób elementy DOM powinny być dodawane lub modyfikowane.

Dyrektywy, podobnie do komponentów, posiadają swój cykl życia, z którego można skorzystać, aby zaimplementować lub skonfigurować ich zachowanie.

Wyróżniamy dwa rodzaje dyrektyw: strukturalne i atrybutowe.

Można również tworzyć własne dyrektywy za pomocą dekoratora @Directive().

Do najczęściej używanych dyrektyw należą: ngFor, ngIf, ngModel, ngStyle, ngClass.

Jaka jest różnica między dyrektywą a komponentem?

Jakie znasz rodzaje dyrektyw?

Dyrektywy dzielimy na trzy rodzaje:

• Strukturalne (ang. structural directives) - zmieniają układ elementów DOM przez dodanie nowych elementów oraz usunięcie lub podmianę istniejących, np. dyrektywy *ngFor, *ngIf,

<li *ngFor="let fund of managedFunds"></li>
<app-fund *ngIf="fundActive"></app-fund>

• Atrybutowe (ang. attribute directives) - zmieniają wygląd lub zachowanie istniejących elementów DOM, np. dyrektywy ngStyle, lub ngClass. W kodzie szablonów wyglądają jak zwykłe atrybuty HTML,

<input type="text" formControlName="currency" fundCurrency />

• Komponenty - dyrektywy z dołączonym szablonem.

Dlaczego stosujemy znak gwiazdki (*) przed nazwą dyrektywy?

Znak gwiazdki * to tylko lukier syntaktyczny dla bardziej złożonej konstrukcji. Angular zamienia dyrektywę z *, np. *ngIf na <ng-template>, który opakowuje wskazany element, np.

Dyrektywa *ngIf została przeniesiona do <ng-template>, gdzie została powiązana z właściwością [ngIf]. Reszta kodu została przeniesiona do wnętrza elementu <ng-template>.

Podczas renderowania Angular usunie <ng-template> i zastąpi go komentarzem w kodzie HTML strony.

<div *ngIf='fund.active' class='details'>
    {{ fund.name }}
</div>
<ng-template [ngIf]='fund.active'>
    <div class='details'>{{ fund.name }}</div>
</ng-template>

Do czego służy TemplateRef i ViewContainerRef?

Każda dyrektywa strukturalna w Angular tworzy widok na podstawie elementu <ng-template> i umieszcza go w kontenerze obok oryginalnego elementu.

W kodzie komponentu TemplateRef reprezentuje właśnie taki element <ng-template>, a ViewContainerRef reprezentuje kontener, w którym znajdzie się wyrenderowany widok.

Aby uzyskać dostęp do obu tych elementów, wystarczy je wstrzyknąć w konstruktorze komponentu:

constructor(
 private template: TemplateRef<any>,
 private container: ViewContainerRef) { }

Następnie można stworzyć widok wywołując:

this.container.createEmbeddedView(this.template);

Jak zastosować *ngFor i *ngIf jednocześnie?

Próba użycia *ngFor i *ngIf na jednym elemencie spowoduje błąd kompilacji: "Can't have multiple template bindings on one element. Use only one attribute prefixed with *".

Jest to spowodowane tym, że nie można zastosować jednocześnie dwóch dyrektyw strukturalnych, ponieważ efekty ich działania mogłyby się wzajemnie nakładać.

Aby obejść ten problem, należy opakować element za pomocą <ng-container>, i na nim użyć jednej z dyrektyw.

<ng-container> pozwala grupować elementy, ale nie jest renderowany, przez co nie psuje layoutu strony ani stylów.

<div *ngFor='let fund of funds' class='details'>
    <ng-container *ngIf='fund.active'>
        {{ fund.name }}
    </ng-container>
</div>

Do czego służy Pipe?

Pipe to klasa reprezentująca prostą funkcję formatującą dane w szablonach, np. liczby, waluty, daty lub złożone obiekty.

Może przyjmować parametry oraz łączyć się z innymi Pipe w łańcuchy wywołań, np.:

{{ fund.launchDate | date:'fullDate' | uppercase }}

Angular zawiera zestaw wbudowanych implementacji, m.in: DatePipe, CurrencyPipe, DecimalPipe, ale można również napisać własną implementując interfejs PipeTransform:

@Pipe({name: 'courseDate'})
export class CourseDate implements PipeTransform {
 transform(value: string) {
    return moment(value)
        .format('DD/MM/YY').toUpperCase();
 }
}

Do czego służy AsyncPipe?

AsyncPipe to wbudowana w Angular implementacja Pipe służąca do obsługi danych odbieranych asynchronicznie.

Przyjmuje jako parametr wejściowy Observable<T> lub Promise, automatycznie się do niego subskrybuje i zwraca najnowszą wartość, którą to źródło emituje.

Bez AsyncPipe, komponent musiałby sam zarządzać subskrypcją, odbieraniem danych od Observable oraz pamiętać o odsubskrybowaniu się na koniec, aby zapobiec wyciekom pamięci.

<div *ngFor='let fund of (funds$ | async)'>
    {{ fund.name }}
</div>

Czym się różni Pure Pipe od Impure Pipe?

Domyślnie każda implementacja Pipe w Angular jest Pure, co oznacza, że Angular wykona jej kod tylko wtedy, gdy wykryje tzw. pure change, czyli zmianę wartości wejściowej (String, Number, Boolean, Symbol) lub referencji (np. Date, Array, Function, Object).

Innymi słowy, Pure Pipe nie wykryje zmiany w złożonych obiektach, np. dodania elementu do istniejącej tablicy, ponieważ nie zmienia to referencji do tablicy. Dzięki temu kod wykonuje się szybciej.

Impure Pipe działa odwrotnie - Angular wykona jej kod zawsze gdy wykryje zmianę. Jest pomocna w sytuacjach, gdy chcemy wykrywać zmiany w obiektach złożonych. Należy jednak uważać, ponieważ zbyt częste używanie Impure Pipe może widocznie spowolnić działanie aplikacji i change detection.

Jak działa mechanizm change detection?

Change detection jest procesem synchronizowania widoku z danymi. Proces w uproszczeniu działa według schematu:

1. Angular porównuje bieżący stan danych z poprzednio zapamiętanym i zbiera wszystkie zmiany,
2. Wywołuje ngOnInit, ngOnChanges i ngDoCheck z komponentów dzieci,
3. Aktualizuje DOM komponentu aby odzwierciedlić zmiany w modelu,
4. Uruchamia change detection dla komponentów dzieci,
5. Wywołuje ngAfterViewInit z komponentów dzieci.

Change detection domyślnie nie przeprowadza głębokiego porównania złożonych obiektów. Porównywane są tylko wartości prymitywne, lub referencje do obiektów.

Co wywołuje change detection?

Change detection jest uruchamiane w reakcji na:

• Inicjalizację komponentu – podczas tworzenia komponentów, Angular wywołuje ApplicationRef.tick(),
• Uruchomienie event listenera – jeśli zdarzenie DOM jest powiązane z komponentem, np. przez (click) = "onClick()",
• Żądanie HTTP wysłane przez HttpService,
• MacroTask - zadanie asynchroniczne wykonane w kolejnej rundzie event loop, np. setTimeout(),
• MircoTask – zadanie asynchroniczne wykonane w tej samej rundzie event loop, np. Promise.then(),
• Inne zdarzenia asynchroniczne, np. związane z obsługą socketów WebSocket.onmessage().

Jakie znasz strategie change detection?

Wykorzystywane są dwie strategie change detection:

• ChangeDetectionStrategy.Default – Domyślna strategia CheckAlways, w której wszystkie komponenty w drzewie komponentów (od czubka drzewa po sam dół) są sprawdzane pod kątem zmian przy każdym uruchomieniu change detection,
• ChangeDetectionStrategy.OnPush – Strategia CheckOnce, w której sprawdzanie wywoływane jest tylko na żądanie, lub gdy zmieni się referencja do obiektu powiązanego z widokiem; dzięki temu można uniknąć niepotrzebnego sprawdzania wartości komponentu i wszystkich komponentów dzieci.

Co oznacza błąd "Expression has changed after it was checked"?

Problem występuje w sytuacji, gdy:

• Widok sam próbuje wpłynąć na siebie np., gdy podczas tworzenia widoku komponentu zostanie wywołany kod, który ponownie zmienia jego wygląd, np. ukryty zostanie fragment, który przed chwilą miał być widoczny, lub gdy
• Komponent dziecko próbuje zmienić właściwość komponentu rodzica po tym, jak rodzic zostanie już sprawdzony przez mechanizm change detection.

Aby obejść ten problem należy przenieść problematyczny fragment kodu do odpowiedniej metody cyklu życia komponentu.

Przykładowo, w przypadku zmian widoku można przenieść kod z metody ngAfterViewInit uruchamianej po wykonaniu zmian w DOM do metody ngOnInit, która jest wywoływana przed zmianami w DOM. Spowoduje to, że proces tworzenia widoku nie zostanie zakłócony.