8 питань і відповідей Angular Interview [2022]

Збираєтеся на співбесіду на посаду Angular Developer? Чудово, тоді варто ретельно підготуватися до можливих питань, що стосуються Angular.

Якщо ви розробник JavaScript, то, напевно, знайомі з фреймворком Angular для створення інтерфейсів. Сьогодні це одна з найпопулярніших навичок серед розробників.

Однак, освоєння Angular може виявитися непростим завданням. Тому, надзвичайно важливо бути готовим до будь-яких питань інтерв’юера. Це допоможе вам успішно пройти співбесіду та отримати роботу, яка сприятиме вашому кар’єрному зростанню, від директив до тонкощів фреймворку.

Ми підібрали для вас найпоширеніші питання, які можуть виникнути на співбесіді щодо Angular, щоб ви могли впевнено отримати бажану роботу.

Що являє собою вираз Angular? Які його відмінності від виразів JavaScript?

Вираз Angular – це фрагмент коду, який розробники розміщують у подвійних фігурних дужках {{ вираз }}. Основна відмінність між виразами Angular та JavaScript полягає у наступному:

• Фільтри дозволяють легко форматувати дані перед їх відображенням.
• Під час обчислення виразів, значення `undefined` та `null` не призводять до помилок (ReferenceError чи TypeError), як у JavaScript.
• Обчислення відбувається в контексті області видимості (scope).
• Вирази Angular не включають цикли, умови та обробку винятків.

Поясніть концепцію зв’язування даних (Data Binding).

Зв’язування даних вважається однією з ключових можливостей, що встановлює зв’язок між компонентами та DOM. Це спрощує розробку інтерактивних програм, усуваючи необхідність ручного перенесення даних між шаблонами та компонентами. Angular використовує кілька типів зв’язування даних:

• Зв’язування властивостей
• Двостороннє зв’язування даних
• Зв’язування подій
• Інтерполяція рядків

Опишіть різні хуки життєвого циклу Angular.

Хуки життєвого циклу Angular відіграють важливу роль при відстежуванні змін та фаз у процесі існування компонента. Компонентний життєвий цикл складається з конструктора та чотирьох основних частин: `ngOnChanges`, `ngOnInit`, `ngDoCheck` та `ngOnDestroy`. Також існують додаткові хуки, такі як `ngAfterViewInit`, `ngAfterContentInit`, `ngAfterViewChecked` та `ngAfterContentChecked`.

• `ngOnChanges()` – викликається, коли змінюються вхідні властивості компонента. Має доступ до попереднього та поточного значень через SimpleChanges.
• `ngOnInit()` – спрацьовує після `ngOnChanges` і призначений для ініціалізації компонентів та їх вхідних властивостей.
• `ngDoCheck()` – викликається на третьому етапі для виявлення змін, що не відстежуються Angular автоматично. Дозволяє реалізувати власний алгоритм виявлення змін.
• `ngAfterContentInit()` – хук, що викликається після проектування вмісту в компонент.
• `ngAfterContentChecked()` – спрацьовує після кожного `ngDoCheck` та `ngAfterContentInit`, що відповідає за перевірку проектованого вмісту.
• `ngAfterViewInit()` – викликається після ініціалізації дочірніх компонентів та їх перевірки.
• `ngOnDestroy()` – використовується для від’єднання обробників подій та очищення ресурсів перед знищенням компонента.

Яка різниця між AOT і JIT компіляцією в Angular?

Багато хто плутає AOT та JIT компіляцію в Angular, тому важливо розуміти їхні відмінності:

• Компілятор AOT (Ahead-of-Time) виконує компіляцію коду на сервері під час збірки. JIT (Just-in-Time) компілює код під час виконання в браузері.
• AOT використовується для production-режиму, а JIT – для розробки.
• Команди `ng serve` та `ng build` при компіляції AOT, а JIT – використовує `CLI ng serve` та `ng build`.
• AOT зменшує розмір бандла та прискорює рендеринг, а JIT забезпечує налагодження та відображення файлів.

Поясніть, що таке RxJS.

Reactive Extensions for JavaScript (RxJS) використовує спостерігачі (observables), що дозволяє розробникам застосовувати реактивне програмування. У Angular RxJS застосовується для створення коду, що базується на зворотних викликах або асинхронних операціях. Це дозволяє передавати дані від видавців до підписників. Спостерігачі можуть використовуватися і в інших мовах програмування, таких як Python та Java.

Розглянемо різні типи фільтрів Angular.

Angular використовує фільтри для форматування значень виразів, які можна застосовувати у шаблонах, директивах, сервісах та контролерах. Можна створювати власні фільтри, що дозволяє форматувати дані відповідно до конкретних потреб. Фільтри розміщуються після символу вертикальної лінії (`|`) у виразі. Ось деякі з основних фільтрів:

• `number` – перетворює значення на рядок.
• `currency` – перетворює число у формат валюти.
• `json` – перетворює будь-який об’єкт на JSON рядок.
• `date` – конвертує значення у певний формат дати.
• `limitTo` – обмежує масив або рядок певним числом елементів.
• `orderBy` – сортує масив за певним критерієм.
• `uppercase` – перетворює рядок у верхній регістр.
• `lowercase` – перетворює рядок у нижній регістр.
• `filter` – вибирає підмножину елементів з масиву.

Що таке завантаження (bootstrap) у Angular?

Завантаження – це процес запуску та ініціалізації програми в Angular, який може відбуватися автоматично або вручну. Розглянемо детальніше:

• Автоматичне завантаження відбувається при додаванні директиви `ng-app` до елемента. Angular автоматично компілює DOM та шукає модуль, пов’язаний з цією директивою.
• Ручне завантаження надає розробнику контроль над процесом ініціалізації програми, дозволяючи виконати необхідні операції перед компіляцією сторінки.

Опишіть директиви в Angular.

В Angular існують три основні види директив:

• Атрибутивні – змінюють поведінку та зовнішній вигляд елементів, інших директив та компонентів, використовуючи `ngStyle` і `ngClass` як атрибути елементів.
• Компонентні – складаються з шаблонів, що визначають інтерфейс користувача за допомогою CSS стилів, коду TypeScript та HTML шаблону. Зазвичай позначаються символом `@`, що дозволяє компілятору Angular замінити їх на шаблони компонентів.
• Структурні – змінюють структуру DOM, показуючи або приховуючи елементи, використовуючи такі директиви, як `ngIf`.

Висновок

Це основні питання, які часто ставлять на співбесідах з Angular. Сподіваємось, що наша стаття допоможе вам підготуватися, впевнено пройти співбесіду та отримати омріяну посаду.

Якщо ви вже готові, можете дізнатися більше про AngularJS.

Чи була стаття для вас корисною? Поділіться нею зі своїми колегами!