Фронтенд-разработчик Angular (Начальный уровень)

Экзаменационный билет №1

Теоретическая часть

1. Что такое Angular? Какие основные преимущества у этого фреймворка перед другими?
2. Объясните разницу между ngIf и hidden в Angular.

Ответы на теоретическую часть:

1. Angular — это фреймворк для создания SPA (Single Page Applications), разработанный Google. Основные преимущества:
• Двустороннее связывание данных (two-way data binding).
• Модульность и зависимость на компонентах.
• Встроенный Dependency Injection.
• Использование TypeScript для строгой типизации.
• Полноценный фреймворк (роутинг, HTTP-клиент, формы и т. д.).
2. *ngIf полностью удаляет элемент из DOM, если условие ложно, а hidden просто скрывает элемент через CSS (display: none).

Практическая часть
Создайте компонент UserCard, который принимает @Input():

• name: string
• age: number
• isActive: boolean

Если isActive === true, выводите текст "Активен", иначе — "Неактивен".

typescript

Copy

Download

// user-card.component.ts

import { Component, Input } from '@angular/core';

@Component({

  selector: 'app-user-card',

  template: `

    <div>

      <h3>{{ name }}</h3>

      <p>Возраст: {{ age }}</p>

      <p>Статус: {{ isActive ? 'Активен' : 'Неактивен' }}</p>

    </div>

  `,

})

export class UserCardComponent {

  @Input() name!: string;

  @Input() age!: number;

  @Input() isActive!: boolean;

}

Экзаменационный билет №2

Теоретическая часть

1. Что такое NgModule в Angular? Перечислите основные свойства декоратора.
2. Как работает *ngFor? Приведите пример использования.

Ответы на теоретическую часть:

1. NgModule — это декоратор, определяющий модуль Angular. Основные свойства:
• declarations (компоненты, директивы, пайпы).
• imports (другие модули).
• providers (сервисы).
• bootstrap (корневой компонент).
2. *ngFor — структурная директива для перебора массивов:

html

Copy

Download

Run

<ul>

  <li *ngFor="let item of items; index as i">{{ i + 1 }}. {{ item }}</li>

</ul>

Практическая часть
Создайте сервис DataService с методом getUsers(), возвращающим массив пользователей. Используйте его в компоненте для вывода списка через *ngFor.

typescript

Copy

Download

// data.service.ts

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root',

})

export class DataService {

  getUsers() {

    return [

      { name: 'Alice', age: 25 },

      { name: 'Bob', age: 30 },

    ];

  }

}

// user-list.component.ts

import { Component } from '@angular/core';

import { DataService } from './data.service';

@Component({

  selector: 'app-user-list',

  template: `

    <ul>

      <li *ngFor="let user of users">

        {{ user.name }} ({{ user.age }})

      </li>

    </ul>

  `,

})

export class UserListComponent {

  users: any[];

  constructor(private dataService: DataService) {

    this.users = this.dataService.getUsers();

  }

}

Экзаменационный билет №3

Теоретическая часть

1. Что такое @Input() и @Output()? Приведите примеры.
2. Как работает EventEmitter?

Ответы на теоретическую часть:

1. @Input() — передача данных в дочерний компонент.
   @Output() — генерация событий из дочернего в родительский.
   Пример:

typescript

Copy

Download

@Input() item: string;

@Output() delete = new EventEmitter<string>();

2. EventEmitter — это класс для кастомных событий. Используется с @Output().

Практическая часть
Создайте компонент ButtonComponent с @Output() onClick, который при клике вызывает событие с текстом "Кнопка нажата!"

typescript

Copy

Download

// button.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'app-button',

  template: `<button (click)="handleClick()">Нажми меня</button>`,

})

export class ButtonComponent {

  @Output() onClick = new EventEmitter<string>();

  handleClick() {

    this.onClick.emit('Кнопка нажата!');

  }

}

Экзаменационный билет №4

Теоретическая часть

1. Что такое Observable и как его использовать в Angular?
2. Как подписаться на Observable и отписаться?

Ответы на теоретическую часть:

1. Observable — объект из библиотеки RxJS для асинхронных операций (например, HTTP-запросов).
2. Подписка:

typescript

Copy

Download

const subscription = observable.subscribe(data => console.log(data));

subscription.unsubscribe(); // Отписка

Практическая часть
Используйте HttpClient для запроса к API (например, https://jsonplaceholder.typicode.com/users) и вывода списка пользователей.

typescript

Copy

Download

// user.service.ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

  providedIn: 'root',

})

export class UserService {

  constructor(private http: HttpClient) {}

  getUsers() {

    return this.http.get('https://jsonplaceholder.typicode.com/users');

  }

}

// user-list.component.ts

import { Component, OnInit } from '@angular/core';

import { UserService } from './user.service';

@Component({

  selector: 'app-user-list',

  template: `

    <ul>

      <li *ngFor="let user of users">

        {{ user.name }}

      </li>

    </ul>

  `,

})

export class UserListComponent implements OnInit {

  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {

    this.userService.getUsers().subscribe((data: any) => {

      this.users = data;

    });

  }

}

Экзаменационный билет №5

Теоретическая часть

1. Что такое Директива в Angular? Назовите встроенные директивы.
2. Как создать свою собственную директиву?

Ответы на теоретическую часть:

1. Директива — это инструкция для DOM (например, *ngIf, *ngFor, ngClass).
2. Создание директивы:

bash

Copy

Download

ng generate directive highlight

Пример:

typescript

Copy

Download

@Directive({

  selector: '[appHighlight]',

})

export class HighlightDirective {

  @HostListener('mouseenter') onMouseEnter() {

    // Логика

  }

}

Практическая часть
Создайте директиву appHighlight, которая меняет цвет фона элемента на желтый при наведении.

typescript

Copy

Download

// highlight.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({

  selector: '[appHighlight]',

})

export class HighlightDirective {

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {

    this.el.nativeElement.style.backgroundColor = 'yellow';

  }

  @HostListener('mouseleave') onMouseLeave() {

    this.el.nativeElement.style.backgroundColor = '';

  }

}

Экзаменационный билет №6

Теоретическая часть

1. Что такое интерполяция в Angular? Приведите пример.
2. Как работает двустороннее связывание ([(ngModel)])? Где его можно использовать?

Ответы на теоретическую часть:

1. Интерполяция — вставка значений переменных в шаблон через {{ }}. Пример:

html

Copy

Download

Run

<p>Привет, {{ username }}!</p>

2. [(ngModel)] — синтаксис "banana in a box" для двустороннего связывания (изменение в input сразу меняет переменную). Требует FormsModule. Пример:

html

Copy

Download

Run

<input [(ngModel)]="email">

Практическая часть
Создайте форму входа (login и password) с использованием ngModel. Добавьте кнопку, которая выводит введенные данные в консоль.

typescript

Copy

Download

// login.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-login',

  template: `

    <input [(ngModel)]="login" placeholder="Логин">

    <input [(ngModel)]="password" type="password" placeholder="Пароль">

    <button (click)="submit()">Войти</button>

  `,

})

export class LoginComponent {

  login: string = '';

  password: string = '';

  submit() {

    console.log('Логин:', this.login, 'Пароль:', this.password);

  }

}

Экзаменационный билет №7

Теоретическая часть

1. Что такое Жизненный цикл компонента (Component Lifecycle)? Назовите 3 основных хука.
2. Для чего нужен ngOnInit?

Ответы на теоретическую часть:

1. Жизненный цикл — этапы от создания до уничтожения компонента. Основные хуки:
• ngOnInit (инициализация),
• ngOnChanges (изменение @Input),
• ngOnDestroy (уничтожение).
2. ngOnInit вызывается после первого ngOnChanges. Здесь рекомендуется загружать данные (например, API-запросы).

Практическая часть
Создайте компонент TimerComponent, который выводит текущее время и обновляет его каждую секунду. Используйте ngOnInit и ngOnDestroy.

typescript

Copy

Download

// timer.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';

import { interval, Subscription } from 'rxjs';

@Component({

  selector: 'app-timer',

  template: `<p>Текущее время: {{ currentTime }}</p>`,

})

export class TimerComponent implements OnInit, OnDestroy {

  currentTime: string = '';

  private subscription!: Subscription;

  ngOnInit() {

    this.subscription = interval(1000).subscribe(() => {

      this.currentTime = new Date().toLocaleTimeString();

    });

  }

  ngOnDestroy() {

    this.subscription.unsubscribe();

  }

}

Экзаменационный билет №8

Теоретическая часть

1. Что такое Сервисы (Services) в Angular? Как их создать и использовать?
2. Объясните, что такое Dependency Injection (DI).

Ответы на теоретическую часть:

1. Сервисы — классы для хранения логики, данных или работы с API. Создаются через @Injectable(), регистрируются в providers (или providedIn: 'root').
2. DI — механизм передачи зависимостей (например, сервисов) в компоненты через конструктор.

Практическая часть
Создайте сервис CounterService с методами increment() и getCount(). Используйте его в компоненте для отображения счетчика.

typescript

Copy

Download

// counter.service.ts

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root',

})

export class CounterService {

  private count = 0;

  increment() {

    this.count++;

  }

  getCount() {

    return this.count;

  }

}

// counter.component.ts

import { Component } from '@angular/core';

import { CounterService } from './counter.service';

@Component({

  selector: 'app-counter',

  template: `

    <p>Счетчик: {{ count }}</p>

    <button (click)="increment()">+1</button>

  `,

})

export class CounterComponent {

  count: number = 0;

  constructor(private counterService: CounterService) {}

  increment() {

    this.counterService.increment();

    this.count = this.counterService.getCount();

  }

}

Экзаменационный билет №9

Теоретическая часть

1. Что такое Роутинг (Routing) в Angular? Как настроить базовый маршрут?
2. Как программно перейти на другую страницу?

Ответы на теоретическую часть:

1. Роутинг — навигация между компонентами. Настройка в app-routing.module.ts:

typescript

Copy

Download

const routes: Routes = [

  { path: '', component: HomeComponent }

];

2. Через Router:

typescript

Copy

Download

this.router.navigate(['/path']);

Практическая часть
Создайте два компонента: HomeComponent и AboutComponent. Настройте роутинг между ними с ссылками <a routerLink="">.

typescript

Copy

Download

// app-routing.module.ts

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';

const routes: Routes = [

  { path: '', component: HomeComponent },

  { path: 'about', component: AboutComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

// app.component.html

<nav>

  <a routerLink="/">Главная</a>

  <a routerLink="/about">О нас</a>

</nav>

<router-outlet></router-outlet>

Экзаменационный билет №10

Теоретическая часть

1. Что такое Pipes в Angular? Приведите 3 примера встроенных пайпов.
2. Как создать собственный пайп?

Ответы на теоретическую часть:

1. Pipes преобразуют данные прямо в шаблоне. Примеры:
• {{ text | uppercase }},
• {{ date | date:'dd.MM.yyyy' }},
• {{ price | currency }}.
2. Через @Pipe({ name: 'myPipe' }) и реализацию transform().

Практическая часть
Создайте пайп reverse, который переворачивает строку (например, "Angular" → "ralugnA").

typescript

Copy

Download

// reverse.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'reverse',

})

export class ReversePipe implements PipeTransform {

  transform(value: string): string {

    return value.split('').reverse().join('');

  }

}

// Использование в шаблоне:

<p>{{ 'Angular' | reverse }}</p>  <!-- Выведет: ralugnA -->

Экзаменационный билет №11

Теоретическая часть

1. Что такое декораторы в Angular? Перечислите основные декораторы и их назначение.
2. Объясните разницу между реактивными (Reactive) и шаблонно-ориентированными (Template-driven) формами.

Ответы на теоретическую часть:

1. Декораторы - это функции, добавляющие метаданные к классам. Основные декораторы:
• @Component - определяет компонент
• @Directive - определяет директиву
• @Injectable - отмечает класс как сервис
• @NgModule - определяет модуль
• @Input и @Output - для взаимодействия между компонентами
2. Реактивные формы:
• Создаются программно в классе компонента
• Более гибкие и тестируемые
• Используют FormGroup, FormControl
• Требуют ReactiveFormsModule

Шаблонно-ориентированные формы:

• Создаются через директивы в шаблоне
• Проще в использовании
• Используют ngModel
• Требуют FormsModule

Практическая часть
Создайте реактивную форму регистрации с полями:

• email (обязательное, валидация email)
• password (обязательное, минимум 6 символов)
• confirmPassword (должен совпадать с password)

typescript

Copy

Download

// registration.component.ts

import { Component } from '@angular/core';

import { FormBuilder, Validators, AbstractControl } from '@angular/forms';

@Component({

  selector: 'app-registration',

  template: `

    <form [formGroup]="regForm" (ngSubmit)="onSubmit()">

      <input formControlName="email" placeholder="Email">

      <div *ngIf="regForm.get('email')?.invalid && regForm.get('email')?.touched">

        Введите корректный email

      </div>

      <input formControlName="password" type="password" placeholder="Пароль">

      <div *ngIf="regForm.get('password')?.invalid && regForm.get('password')?.touched">

        Пароль должен быть не менее 6 символов

      </div>

      <input formControlName="confirmPassword" type="password" placeholder="Подтвердите пароль">

      <div *ngIf="regForm.hasError('mismatch')">

        Пароли не совпадают

      </div>

      <button type="submit" [disabled]="regForm.invalid">Зарегистрироваться</button>

    </form>

  `

})

export class RegistrationComponent {

  regForm = this.fb.group({

    email: ['', [Validators.required, Validators.email]],

    password: ['', [Validators.required, Validators.minLength(6)]],

    confirmPassword: ['', Validators.required]

  }, { validator: this.passwordMatchValidator });

  constructor(private fb: FormBuilder) {}

  passwordMatchValidator(control: AbstractControl) {

    const password = control.get('password')?.value;

    const confirmPassword = control.get('confirmPassword')?.value;

    return password === confirmPassword ? null : { mismatch: true };

  }

  onSubmit() {

    console.log(this.regForm.value);

  }

}

Экзаменационный билет №12

Теоретическая часть

1. Что такое Guard в Angular? Какие типы Guard вы знаете?
2. Объясните назначение CanActivate и CanDeactivate.

Ответы на теоретическую часть:

1. Guards - это интерфейсы для контроля доступа к маршрутам. Основные типы:
• CanActivate - разрешает/запрещает доступ к маршруту
• CanDeactivate - разрешает/запрещает уход с маршрута
• CanLoad - разрешает/запрещает загрузку модуля
• Resolve - предварительная загрузка данных перед активацией маршрута
2. CanActivate:
• Проверяет, может ли пользователь перейти на маршрут
• Используется для защиты закрытых страниц (например, требующих авторизации)

CanDeactivate:

• Проверяет, может ли пользователь покинуть маршрут
• Используется для предотвращения потери данных (например, при заполнении формы)

Практическая часть
Создайте AuthGuard, который проверяет наличие токена в localStorage. Если токена нет - перенаправляет на страницу входа.

typescript

Copy

Download

// auth.guard.ts

import { Injectable } from '@angular/core';

import { CanActivate, Router } from '@angular/router';

@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {

    const token = localStorage.getItem('auth_token');

    if (!token) {

      this.router.navigate(['/login']);

      return false;

    }

    return true;

  }

}

// app-routing.module.ts

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthGuard]

  },

  { path: 'login', component: LoginComponent }

];

Экзаменационный билет №13

Теоретическая часть

1. Что такое Interceptors в Angular? Для чего они используются?
2. Приведите пример использования HTTP Interceptor.

Ответы на теоретическую часть:

1. Interceptors - это middleware для HTTP-запросов/ответов. Позволяют:
• Добавлять заголовки (например, Authorization)
• Обрабатывать ошибки
• Логировать запросы
• Модифицировать запросы/ответы
• Добавлять загрузчики
2. Пример использования:
• Добавление токена авторизации ко всем запросам
• Обработка 401 ошибки (перенаправление на страницу входа)
• Добавление заголовка Content-Type

Практическая часть
Создайте AuthInterceptor, который добавляет токен из localStorage ко всем исходящим запросам.

typescript

Copy

Download

// auth.interceptor.ts

import { Injectable } from '@angular/core';

import {

  HttpRequest,

  HttpHandler,

  HttpEvent,

  HttpInterceptor

} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const token = localStorage.getItem('auth_token');

    if (token) {

      request = request.clone({

        setHeaders: {

          Authorization: `Bearer ${token}`

        }

      });

    }

    return next.handle(request);

  }

}

// app.module.ts

@NgModule({

  providers: [

    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

  ]

})

Экзаменационный билет №14

Теоретическая часть

1. Что такое Content Projection в Angular? Как работает <ng-content>?
2. Объясните разницу между <ng-content> и <ng-template>.

Ответы на теоретическую часть:

1. Content Projection - это механизм вставки контента из родительского компонента в дочерний. <ng-content>:
• Определяет место, куда будет вставлен контент
• Поддерживает селекторы для выбора определенного контента
• Не создает собственный scope (контент использует контекст родителя)
2. Разница:
• <ng-content>: простое встраивание готового контента
• <ng-template>: шаблон, который можно многократно использовать и рендерить с разным контекстом

Практическая часть
Создайте компонент CardComponent с использованием <ng-content> для:

• Заголовка (селектор [card-header])
• Основного контента (по умолчанию)
• Футера (селектор [card-footer])

typescript

Copy

Download

// card.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-card',

  template: `

    <div class="card">

      <div class="card-header">

        <ng-content select="[card-header]"></ng-content>

      </div>

      <div class="card-body">

        <ng-content></ng-content>

      </div>

      <div class="card-footer">

        <ng-content select="[card-footer]"></ng-content>

      </div>

    </div>

  `,

  styles: [`

    .card { border: 1px solid #ddd; padding: 16px; margin: 8px; }

    .card-header { font-weight: bold; margin-bottom: 8px; }

    .card-footer { margin-top: 8px; font-size: 0.8em; color: #666; }

  `]

})

export class CardComponent {}

// Использование:

<app-card>

  <div card-header>Заголовок карточки</div>

  Основное содержимое карточки

  <div card-footer>Футер карточки</div>

</app-card>

Экзаменационный билет №15

Теоретическая часть

1. Что такое ViewChild и ViewChildren? В чем разница?
2. Когда нужно использовать static: true в @ViewChild?

Ответы на теоретическую часть:

1. ViewChild:
• Получает ссылку на один дочерний элемент/компонент/директиву
• Возвращает первый найденный элемент

ViewChildren:

• Получает список всех дочерних элементов
• Возвращает QueryList (можно подписаться на изменения)
1. static: true нужно:
• Когда элемент доступен до проверки изменений (например, *ngIf отсутствует)
• Для элементов, которые никогда не меняются
• В Angular 9+ по умолчанию static: false

Практическая часть
Создайте компонент с кнопкой и элементом div. Используя ViewChild, изменяйте цвет div при клике на кнопку.

typescript

Copy

Download

// color-changer.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({

  selector: 'app-color-changer',

  template: `

    <button (click)="changeColor()">Изменить цвет</button>

    <div #colorBox style="width: 100px; height: 100px; background: lightgray; margin-top: 10px;"></div>

  `

})

export class ColorChangerComponent {

  @ViewChild('colorBox', { static: true }) colorBox!: ElementRef;

  colors = ['red', 'green', 'blue', 'yellow'];

  currentIndex = 0;

  changeColor() {

    this.currentIndex = (this.currentIndex + 1) % this.colors.length;

    this.colorBox.nativeElement.style.backgroundColor = this.colors[this.currentIndex];

  }

}