Картки Angular

Спонсор категорії

Angular - це потужний фреймворк для створення веб-додатків, розроблений і підтримуваний Google. Спочатку створений як розширення HTML для динамічних додатків, Angular еволюціонував у комплексну платформу для створення масштабованих, ефективних односторінкових додатків (SPA). Використовуючи TypeScript та компонентну архітектуру, Angular пропонує інструменти для створення складних, інтерактивних користувацьких інтерфейсів та керування станом додатку.

Наш додаток з картками містить ретельно підібрані питання для співбесіди з Angular з вичерпними відповідями, які ефективно підготують вас до будь-якої співбесіди, що вимагає знань Angular. IT Картки - це не просто інструмент для шукачів роботи, це чудовий спосіб закріпити та перевірити свої знання, незалежно від ваших поточних кар'єрних планів. Регулярне використання додатку допоможе вам бути в курсі останніх тенденцій Angular і підтримувати свої навички на високому рівні.

Приклади карток Angular з нашого додатку

Завантажте наш додаток з App Store або Google Play, щоб отримати більше безкоштовних карток або підпишіться на доступ до всіх карток.

Опишіть, як використовувати HTTP інтерцептори в Angular для управління запитами та відповідями.

HTTP Interceptor в Angular використовується для маніпулювання HTTP-запитами та відповідями. Вони можуть перехопити запит, змінити його та передати далі. Вони також можуть перехопити відповідь, змінити її та передати далі. Щоб використовувати HTTP Interceptor, нам потрібно створити службу, яка реалізує інтерфейс HttpInterceptor.

Ось код, який ілюструє, як додати перехоплювачі до додатка:
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>> {

    // Тут ми змінюємо запит
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Тут ми передаємо запит далі
    return next.handle(modifiedReq);

  }

}

Після того, як наш перехоплювач визначено, нам потрібно додати його до нашого масиву постачальників у модулі додатку:
@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

Зауважте, що 'multi' встановлено на true. Це дозволяє нам додавати декілька перехоплювачів, які будуть виконуватися в порядку, в якому вони надані. Вам потрібно пам'ятати, що порядок перехоплювачів має значення, оскільки кожен наступний перехоплювач отримує запит від попереднього, тому будь-які зміни, зроблені попереднім перехоплювачем, будуть видимі наступному.

Як працює прив'язка даних у компонентах Angular за допомогою @Input() та @Output()?

Прив'язка даних - це ключовий аспект програмування в Angular. Вона дає змогу динамічно передавати дані між компонентами. Прив'язка даних включає дві техніки: @Input та @Output.

@Input дозволяє передавати значення від батьківського компоненту до дочірнього. Це так звана техніка односторонньої прив'язки даних - дані потікають від верху до низу ієрархії компонентів. Ми використовуємо це, щоб позначити змінні, які мають бути видимими для батьківських компонентів.

Приклад використання @Input:
<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Привіт від батька";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

У цьому прикладі `parentMessage` з parent.component.ts передається до `childMessage` в child.component.ts.

@Output, з іншого боку, дозволяє здійснювати комунікацію в протилежному напрямку - від дочірнього компоненту до батьківського. Це так звана техніка прив'язки подій. Використовуючи декоратор @Output(), ми можемо спричинити подію у дочірньому компоненті та обробити її у батьківському компоненті.

Приклад використання @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>();

У цьому випадку, коли `messageEvent` спрацьовує в child.component.ts, функція `receiveMessage` викликається в parent.component.ts та отримує значення, відправлене `messageEvent`.

Що таке NgModel і як він використовується в формах Angular?

NgModel - це директива Angular, яка використовується для створення двостороннього зв'язку даних у формах. Двосторонній зв’язок даних означає, що дані можуть передаватися від моделі до вигляду і від вигляду до моделі. На практиці це означає, що зміни, внесені користувачем у поля форми, відображаються у моделі даних, і зміни до даних моделі відображаються у формі.

Використання директиви NgModel у формах досить просте. Ми розміщуємо його у відповідному елементі форми та зв'язуємо його з відповідним полем моделі за допомогою синтаксису [(ngModel)].

Наприклад:
<form>
  <label for="name">Ім'я:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Вік:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Де "person.name" та "person.age" - це поля даних моделі, які зв'язані з відповідними полями форми. Будь-які зміни, внесені користувачем у ці поля форми, автоматично відобразяться у моделі "person".

Пам'ятайте, що для використання директиви NgModel, необхідно імпортувати FormsModule у модулі додатку.

Що таке Zone.js в Angular і як це впливає на продуктивність додатка?

Zone.js - це бібліотека, яка дозволяє відслідковувати асинхронні операції в JavaScript. В контексті Angular, Zone.js - це ключовий компонент механізму виявлення змін.

Zone.js вводить поняття "зон", які є глобальними контекстами виконання. Ці "зони" створюють "дерево", де кожна асинхронна операція завжди відбувається в тій ж зоні, яка ініціювала операцію. В результаті ми можемо відслідкувати, коли операція починається і коли вона закінчується.

Приклад:
Перша операція може викликати setTimeout, за яким наступна операція запланована на наступний цикл подій. Незважаючи на те, що це дві різних операції, Zone.js дозволяє нам відстежувати їх як ціле - це асинхронне відстеження.

В Angular, Zone.js використовується для інформування фреймворку, коли починати виявлення змін. Кожна дія користувача, таймер або http запит виконуються в "angular zone". Коли операції в "angular zone" закінчуються, Angular автоматично викликає виявлення змін.

За допомогою цього механізму, Angular знає, коли має сенс оновити вигляд. Ось чому Zone.js є важливим для продуктивності. Без Zone.js, Angular мусив би використовувати технології, наприклад, polling, щоб знайти, коли викликати виявлення змін, що було б дуже неефективно.

Хоча Zone.js має позитивний вплив на продуктивність Angular, він також може мати негативний вплив. Якщо програма виконує безліч асинхронних операцій, які не впливають на стан програми, Angular все одно викликає виявлення змін. У випадку великої кількості операцій, це може погіршити продуктивність. Щоб запобігти цьому, ми можемо виконувати ці операції за межами "angular zone".

Завантажити IT Flashcards Зараз

Розширте свої знання Angular за допомогою наших карток.
Від основ програмування до опанування передових технологій, IT Flashcards - ваш квиток до досконалості в ІТ.
Завантажте зараз і розкрийте свій потенціал у сьогоднішньому конкурентному технологічному світі.