Solution 2024/2025
Pepper
Angular Exam With Complete Solutions Latest
Update
1. Перерахуйте основні компоненти фреймворку (модуль, роут,
директива тощо). ANS✔✔ Основні компоненти фреймворку Angular
включають:
Модуль (Module): Модуль в Angular представляє собою контейнер для
організації компонентів, сервісів, директив та інших функціональних
частин програми. Використовується для групування пов'язаного
функціоналу і підтримки модульності. Модулі в Angular оголошуються
за допомогою декоратора @NgModule.
Компонент (Component): Компонент в Angular представляє собою
будівельний блок користувацького інтерфейсу. Він складається з HTML-
шаблону, який відображає вміст компонента, і класу, який визначає
поведінку та логіку компонента. Компоненти в Angular оголошуються
за допомогою декоратора @Component.
Сервіс (Service): Сервіс в Angular представляє собою клас, який надає
певний функціонал, що може бути використаний іншими
компонентами. Сервіси використовуються для розділення логіки
, Solution 2024/2025
Pepper
програми, обробки даних, взаємодії з сервером та інших загальних
завдань. Сервіси в Angular оголошуються за допомогою декоратора
@Injectable.
Роут (Route): Роут в Angular використовується для визначення
маршрутів і навігації в програмі. Він дозволяє визначити, які
компоненти мають бути відображені для кожного шляху URL. Роути в
Angular встановлюються за допомогою модуля RouterModule та його
методу forRoot або forChild.
Директива (Directive): Директива в Angular дозволяє змінювати
поведінку та вигляд DOM-елементів. Вона може бути використана для
додавання атрибутів, обробки подій, маніпуляції з DOM та багато
іншого. Angular має два типи директив: атрибутні директиви та
структурні директиви.
Пайп (Pipe): Пайп в Angular використовується для форматування та
обробки даних, що відображаються в шаблоні компонента. Він
дозволяє змінювати вигляд та значення даних перед їх відображенням.
Angular має вбудовані пайпи, такі як date, currency, uppercase і багато
інших, а також можливість створювати власні пайпи.
2. У чому різниця між компонентом і директивою? ANS✔✔ У фреймворку
Angular, компонент і директива виконують різні функції і мають певні
відмінності. Основна різниця між компонентом і директивою полягає в
їх призначенні та способах використання.
Компонент (Component):
Компоненти є будівельними блоками користувацького інтерфейсу в
Angular.
Вони мають свій власний шаблон, який відображається в DOM.
Компоненти мають свій клас, який містить логіку та поведінку
компонента.
, Solution 2024/2025
Pepper
Компоненти можуть мати свої властивості та методи, які
використовуються для обробки даних та взаємодії з іншими
компонентами.
Компоненти можуть мати свої стилі, які використовуються для
оформлення компонента.
Директива (Directive):
Директиви використовуються для зміни поведінки та вигляду DOM-
елементів.
Вони можуть бути прикріплені до DOM-елементів як атрибути або як
елементи.
Директиви можуть змінювати властивості, додавати атрибути, слухати
події та маніпулювати з DOM.
В Angular є два типи директив: атрибутні директиви (Attribute
Directives) і структурні директиви (Structural Directives).
Атрибутні директиви змінюють або додають певні властивості до DOM-
елементів. Наприклад, ngStyle або ngClass.
Структурні директиви змінюють структуру DOM, додають або
видаляють елементи з DOM. Наприклад, ngIf або ngFor.
Отже, компоненти використовуються для побудови користувацького
інтерфейсу та мають власний шаблон і логіку, тоді як директиви
використовуються для зміни поведінки та вигляду DOM-елементів.
3. Розкажіть про життєвий цикл компонента. ANS✔✔ В Angular
компоненти мають свій життєвий цикл, який складається з різних
етапів від створення до знищення компонента. Життєвий цикл
компонента дозволяє вам керувати і впливати на поведінку
компонента на різних етапах його існування.
Основні етапи життєвого циклу компонента в Angular:
ngOnChanges: Цей метод викликається, коли компонент отримує нові
значення вхідних властивостей (@Input) або коли властивість
, Solution 2024/2025
Pepper
змінюється. Він викликається перед ngOnInit та при кожному зміні
вхідних даних.
ngOnInit: Цей метод викликається після того, як Angular ініціалізує
компонент та встановлює його властивості. Він викликається один раз
після конструктора компонента і вважається хорошим місцем для
виконання початкових операцій.
ngDoCheck: Цей метод викликається під час кожного циклу зміни
даних в Angular. Він дозволяє вам виконувати власну логіку перевірки
змін, які не обробляються стандартним способом.
ngAfterContentInit: Цей метод викликається після впровадження
контенту (ng-content) в компонент зовнішніми компонентами. Він
викликається один раз після вставки контенту.
ngAfterContentChecked: Цей метод викликається після перевірки
контенту, вставленого в компонент. Він викликається після кожного
перевірки контенту.
ngAfterViewInit: Цей метод викликається після ініціалізації
відображення компонента та його дочірніх компонентів (ng-content).
Він викликається один раз після ініціалізації представлення
компонента.
ngAfterViewChecked: Цей метод викликається після кожної перевірки
відображення компонента та його дочірніх компонентів. Він
викликається після кожної перевірки відображення.
ngOnDestroy: Цей метод викликається перед тим, як компонент буде
знищений. Він дозволяє вам виконати очистку ресурсів або відписатися
від підписок, щоб уникнути витоку пам'яті.
Ці етапи життєвого циклу дозволяють контролювати поведінку
компонента на різних ста
4. Перерахуйте часто використовувані хуки життєвого циклу
компонента та розкажіть, для чого вони потрібні? ANS✔✔ В Angular