8 pytań i odpowiedzi na rozmowę kwalifikacyjną [2022]

Czy szykujesz się do rozmowy rekrutacyjnej na stanowisko programisty Angular? W takim razie, solidne przygotowanie oparte na tych zagadnieniach jest kluczowe dla sukcesu.

Jeśli masz doświadczenie w JavaScript, z pewnością słyszałeś o frameworku Angular do tworzenia interfejsów użytkownika. W dzisiejszych czasach jest to jedna z najbardziej poszukiwanych umiejętności wśród programistów.

Jednak dogłębne zrozumienie Angulara może być wyzwaniem. Dlatego tak ważne jest, aby być przygotowanym na różnorodne pytania, które mogą paść podczas rozmowy. Od dyrektyw po samą architekturę frameworka – gruntowne przygotowanie pozwoli ci zabłysnąć na rozmowie i zdobyć pracę, która popchnie twoją karierę na wyższy poziom.

Wybraliśmy dla ciebie zestawienie najczęściej zadawanych pytań rekrutacyjnych dotyczących Angulara, abyś mógł odpowiednio się przygotować i zdobyć wymarzoną posadę.

Co to jest wyrażenie w Angularze? Jak różni się od wyrażenia JavaScript?

Wyrażenie w Angularze to fragment kodu umieszczany wewnątrz nawiasów klamrowych {{ wyrażenie }}. Główna różnica pomiędzy wyrażeniami w Angularze i JavaScript polega na tym, że:

• Umożliwiają łatwe stosowanie filtrów przed wyświetleniem danych.
• Są bardziej tolerancyjne dla wartości undefined i null, podczas gdy w JavaScript takie sytuacje generują błędy ReferenceError i TypeError.
• Są interpretowane w kontekście obiektu zakresu.
• Nie obsługują wyjątków, warunków i pętli.

Wyjaśnij, na czym polega wiązanie danych (data binding).

Wiązanie danych to jedna z najważniejszych i fundamentalnych funkcji Angulara, która łączy komponenty z DOM (Document Object Model). Ułatwia tworzenie interaktywnych aplikacji bez konieczności ręcznego zarządzania przesyłaniem danych między szablonami a komponentami. W Angularze wykorzystywane są różne rodzaje wiązania danych, takie jak:

• Wiązanie właściwości (property binding)
• Dwukierunkowe wiązanie danych (two-way data binding)
• Wiązanie zdarzeń (event binding)
• Interpolacja łańcuchów (string interpolation)

Opisz cykl życia komponentu Angulara.

Hooki cyklu życia komponentu Angulara są kluczowe do kontrolowania zmian i wyzwalania akcji w różnych fazach jego istnienia. Cykl życia komponentu składa się z kilku etapów, w tym konstruktora, a główne hooki to: ngOnChanges, ngOnInit, ngDoCheck oraz ngOnDestroy. Dodatkowo mamy również ngAfterViewInit, ngAfterContentInit, ngAfterViewChecked i ngAfterContentChecked.

• ngOnChanges() – wywoływana, gdy zmieni się jedna lub więcej właściwości wejściowych komponentu. Hook ten otrzymuje poprzednią i aktualną wartość zmienionej właściwości w obiekcie SimpleChanges.
• ngOnInit() – następuje po ngOnChanges, służy do inicjalizacji właściwości wejściowych i konfiguracji komponentu.
• ngDoCheck() – uruchamia się w trzeciej fazie, umożliwia wykrywanie zmian, które nie są automatycznie śledzone przez Angulara. Dzięki temu hookowi można zaimplementować własny mechanizm detekcji zmian.
• ngAfterContentInit() – wywoływana po umieszczeniu zawartości przekazanej do komponentu (content projection).
• ngAfterContentChecked() – uruchamia się po każdym ngDoCheck i ngAfterContentInit, po sprawdzeniu zawartości.
• ngAfterViewInit() – wywoływana po zainicjowaniu widoku komponentu potomnego i po sprawdzeniu widoku komponentu.
• ngOnDestroy() – pozwala na zwolnienie zasobów, np. odpięcie subskrypcji, przed zniszczeniem komponentu.

Jaka jest różnica pomiędzy AOT i JIT w Angularze?

Wiele osób myli kompilator AOT i JIT, dlatego warto znać ich kluczowe różnice:

• Kompilator Ahead-of-Time (AOT) kompiluje kod na serwerze, podczas procesu budowania aplikacji. Kompilator Just-in-Time (JIT) kompiluje kod w przeglądarce, podczas działania aplikacji.
• AOT jest zalecany dla trybu produkcyjnego, podczas gdy JIT stosuje się w trybie deweloperskim, podczas budowania aplikacji Angular.
• Kompilacja AOT odbywa się przy użyciu komend `ng build` i `ng serve –prod`, natomiast JIT jest domyślny dla komend `ng serve` i `ng build`.
• AOT pomaga zmniejszyć rozmiar paczki aplikacji i przyspieszyć jej renderowanie. JIT umożliwia łatwe debugowanie kodu oraz dostęp do plików mapowania (source maps).

Wyjaśnij, czym jest RxJS.

Reactive Extensions for JavaScript (RxJS) to biblioteka, która używa obserwatorów (observables) do implementacji programowania reaktywnego. Ułatwia zarządzanie danymi asynchronicznymi i opartymi na zdarzeniach za pomocą strumieni danych. W Angularze RxJS jest wykorzystywany do obsługi żądań HTTP, interakcji z formularzami oraz innych zdarzeń asynchronicznych. Pozwala przesyłać strumienie danych od wydawcy do subskrybentów. Biblioteka RxJS jest wykorzystywana nie tylko w Angularze, ale także w innych językach programowania, takich jak Python czy Java.

Opisz różne typy filtrów w Angularze.

W Angularze filtry służą do formatowania wartości wyświetlanych w szablonach. Filtry można stosować w szablonach, dyrektywach, usługach oraz kontrolerach. Można także tworzyć własne filtry, dostosowane do potrzeb. Filtry stosuje się po symbolu potoku (|) w wyrażeniu. Przykłady wbudowanych filtrów to:

• number – do konwersji wartości na ciąg znaków
• currency – do formatowania liczb w formacie walutowym
• json – do konwersji obiektów na format JSON
• date – do formatowania dat w różnych formatach
• limitTo – do ograniczania tablicy lub łańcucha do określonej liczby elementów
• orderBy – do sortowania tablic według podanego wyrażenia
• uppercase – do zamiany łańcucha na wielkie litery
• lowercase – do zamiany łańcucha na małe litery
• filter – do wyboru podzbioru elementów z tablicy

Zdefiniuj pojęcie bootstrap w kontekście Angulara.

Bootstrapping to proces uruchamiania lub inicjalizacji aplikacji Angular, który może być automatyczny lub ręczny.

• Automatyczny bootstrap wykorzystuje dyrektywę ng-app, która umieszczana jest w elemencie DOM. Angular automatycznie kompiluje drzewo DOM i przypisuje moduł do dyrektywy ng-app.
• Ręczny bootstrap umożliwia programistom większą kontrolę nad procesem inicjalizacji aplikacji i umożliwia wykonywanie dodatkowych operacji związanych z kompilacją.

Przybliż zagadnienie dyrektyw w Angularze.

W Angularze wyróżniamy trzy główne rodzaje dyrektyw:

• Atrybutowe – pozwalają zmieniać zachowanie i wygląd elementów, innych dyrektyw lub komponentów. Używają m.in. ngStyle i ngClass.
• Komponenty – składają się z szablonów, definiujących pojedynczy element interfejsu użytkownika, wraz ze stylami CSS, kodem TypeScript i szablonem HTML. Są dekorowane symbolem @, co pozwala kompilatorowi Angulara zastąpić je szablonami.
• Strukturalne – modyfikują strukturę DOM, np. poprzez ukrywanie lub wyświetlanie elementów, wykorzystując takie dyrektywy jak np. ngIf.

Podsumowanie

To tylko podstawowe pytania, które mogą pojawić się podczas rozmowy rekrutacyjnej na stanowisko programisty Angular. Mając solidną wiedzę na te tematy, będziesz lepiej przygotowany, zwiększysz swoje szanse na sukces i zdobędziesz wymarzoną pracę.

Jeśli chcesz poszerzyć swoją wiedzę, warto także zagłębić się w tematy związane z AngularJS.

Czy ten artykuł był dla Ciebie pomocny? Zachęcamy do udostępniania go innym!