Готов ли к тестовому заданию на Angular

Готовность к тестовому заданию на Angular

Ответ на вопрос готовности к Angular зависит от текущего уровня знаний. Рассмотрю, что нужно знать и на что обратить внимание.

Основные концепции Angular

Ангулар - это полнофункциональный фреймворк для создания веб-приложений. Если вы знакомы с React, многие концепции будут знакомыми, но есть существенные различия.

1. Компоненты

// Angular компонент
import { Component } from "@angular/core";

@Component({
  selector: "app-user",
  template: `<h1>{{ userName }}</h1>`,
  styles: ["h1 { color: blue; }"]
})
export class UserComponent {
  userName: string = "Иван";
}

Отличия от React:

• Декораторы (@Component, @Input, @Output)
• Встроенная подстановка данных через {{ }}
• Шаблоны как часть декоратора
• TypeScript как обязательное требование

2. Dependency Injection (DI)

Angular имеет встроенную систему управления зависимостями:

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

@Injectable({
  providedIn: "root"
})
export class UserService {
  getUsers() {
    return [{ id: 1, name: "Иван" }];
  }
}

@Component({
  selector: "app-users",
  template: `
    <div *ngFor="let user of users">
      {{ user.name }}
    </div>
  `
})
export class UsersComponent {
  users = [];

  constructor(private userService: UserService) {
    this.users = userService.getUsers();
  }
}

Это встроено в фреймворк, не требует библиотек.

3. Жизненный цикл компонента

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

@Component({
  selector: "app-lifecycle",
  template: "<p>{{ message }}</p>"
})
export class LifecycleComponent implements OnInit, OnDestroy, OnChanges {
  message: string = "";

  ngOnInit() {
    // Вызывается при инициализации компонента
    this.message = "Компонент инициализирован";
  }

  ngOnChanges() {
    // Вызывается при изменении @Input свойств
  }

  ngOnDestroy() {
    // Вызывается при удалении компонента
    // Очищаем ресурсы
  }
}

Ключевые области для тестового задания

1. Привязка данных (Data Binding)

@Component({
  selector: "app-binding",
  template: `
    <!-- Интерполяция -->
    <p>{{ userName }}</p>

    <!-- Привязка свойства -->
    <img [src]="userImage" />

    <!-- Привязка события -->
    <button (click)="onDelete()">Удалить</button>

    <!-- Двусторонняя привязка -->
    <input [(ngModel)]="userName" />
  `
})
export class BindingComponent {
  userName: string = "Иван";
  userImage: string = "/path/to/image.jpg";

  onDelete() {
    console.log("Удалено");
  }
}

2. Директивы

@Component({
  selector: "app-directives",
  template: `
    <!-- Условная отрисовка -->
    <div *ngIf="isVisible">Виден</div>

    <!-- Цикл -->
    <div *ngFor="let item of items">
      {{ item.name }}
    </div>

    <!-- Переключение -->
    <div [ngSwitch]="status">
      <p *ngSwitchCase="active">Активно</p>
      <p *ngSwitchCase="inactive">Неактивно</p>
      <p *ngSwitchDefault>Неизвестно</p>
    </div>

    <!-- Классы и стили -->
    <div [ngClass]="{ active: isActive, disabled: isDisabled }">
      Содержимое
    </div>
    <div [ngStyle]="{ color: textColor, fontSize: fontSize + px }">
      Стиль
    </div>
  `
})
export class DirectivesComponent {
  isVisible: boolean = true;
  items: any[] = [{ name: "Элемент 1" }];
  status: string = "active";
  isActive: boolean = true;
  isDisabled: boolean = false;
  textColor: string = "blue";
  fontSize: number = 16;
}

3. Реактивные формы

import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-form",
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input
        type="email"
        formControlName="email"
        placeholder="Email"
      />
      <span *ngIf="form.get(email)?.hasError(required)">
        Email обязателен
      </span>

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

      <button type="submit" [disabled]="form.invalid">
        Отправить
      </button>
    </form>
  `
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ["", [Validators.required, Validators.email]],
      password: ["", [Validators.required, Validators.minLength(8)]]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

4. HTTP запросы

import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>("https://api.example.com/users");
  }

  createUser(user: any): Observable<any> {
    return this.http.post("https://api.example.com/users", user);
  }

  updateUser(id: number, user: any): Observable<any> {
    return this.http.put(
      `https://api.example.com/users/${id}`,
      user
    );
  }

  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(
      `https://api.example.com/users/${id}`
    );
  }
}

@Component({
  selector: "app-users",
  template: `
    <div *ngIf="users$ | async as users">
      <div *ngFor="let user of users">
        {{ user.name }}
      </div>
    </div>
  `
})
export class UsersComponent implements OnInit {
  users$: Observable<any[]>;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.users$ = this.apiService.getUsers();
  }
}

RxJS и Observable

Angular активно использует RxJS:

import { map, filter, tap } from "rxjs/operators";

this.apiService.getUsers().pipe(
  filter(users => users.length > 0),
  map(users => users.filter(u => u.active)),
  tap(users => console.log("Получены пользователи:", users))
).subscribe(
  users => this.users = users,
  error => console.error(error)
);

Общие затруднения в тестовом задании

1. Забывают импортировать модули - FormsModule, HttpClientModule
2. Неправильно используют async pipe - забывают в шаблоне
3. Не обрабатывают ошибки - нужны try-catch или error callbacks
4. Забывают отписываться - утечки памяти в подписках
5. Неправильно типизируют - даже в TypeScript

Чек-лист перед заданием

Проверьте, знаете ли вы:

• Что такое декораторы и как их использовать
• Как создавать компоненты и сервисы
• Двусторонняя привязка данных [(ngModel)]
• Директивы *ngIf, *ngFor, [ngClass], [ngStyle]
• Реактивные формы (FormBuilder, FormGroup)
• HTTP запросы через HttpClient
• RxJS: Observable, Subject, pipe
• Async pipe в шаблонах
• Lifecycle hooks (OnInit, OnDestroy)
• Dependency Injection
• Роутинг (routing module)

Рекомендации

Если вы знаете React:

• Фокусируйтесь на различиях (DI, Decorators, RxJS)
• Привыкайте к синтаксису шаблонов Angular
• Изучите RxJS - это критично

Если это ваш первый фреймворк:

• Начните с компонентов
• Изучите data binding
• Затем формы и HTTP
• В конце RxJS и Advanced паттерны

При выполнении задания:

• Читайте ошибки в консоли
• Используйте Angular DevTools
• Пишите типы везде
• Обрабатывайте ошибки
• Тестируйте компоненты

Итог

При правильной подготовке и понимании основных концепций вы будете готовы к тестовому заданию на Angular. Главное - это практика и внимание к деталям типизации и управлению состоянием через RxJS.