Вопросы подготовлены непосредственно для того, чтобы определить уровень разработчика, насколько глубоко, поверхностно или сносно он знает Angular. Вопросы для собеседования на знание JavaScript или Web-стека хорошо освещены в других местах, поэтому ниже будет добавлен список ресурсов по этой теме:
Fundamentals:
Frontend:
- Front-end Job Interview Questions
- The Best Frontend JavaScript Interview Questions
- Frontend Guidelines Questionnaire
- Подготовка к интервью на Front-end разработчика
Angular:
Что такое декоратор?
Декоратор - способ добавления метаданных к объявлению класса. Это специальный вид объявления, который может быть присоединен к объявлению класса, методу, методу доступа, свойству или параметру.
Декораторы используют форму @expression, где expression - функция, которая будет вызываться во время выполнения с информацией о декорированном объявлении.
Чтобы написать собственный декоратор, нам нужно сделать его factory и определить тип:
- ClassDecorator
- PropertyDecorator
- MethodDecorator
- ParameterDecorator
Декоратор класса
export function logClass(target: Function) {
// Сохранение ссылки на оригинальный конструктор
const original = target;
// Функция генерирует экземпляры класса
function construct(constructor, args) {
const c: any = function () {
return constructor.apply(this, args);
}
c.prototype = constructor.prototype;
return new c();
}
// Определение поведения нового конструктора
const f: any = function (...args) {
console.log(`New: ${original['name']} is created`);
//New: Employee создан
return construct(original, args);
}
// Копирование прототипа, чтобы оператор intanceof работал
f.prototype = original.prototype;
// Возвращает новый конструктор, переписывающий оригинальный
return f;
}
@logClass
class Employee {
}
let emp = new Employee();
console.log('emp instanceof Employee');
//emp instanceof Employee
console.log(emp instanceof Employee);
//true
Декоратор свойства
- target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
- propertyKey - название свойства
function logParameter(target: Object, propertyName: string) {
// Значение свойства
let _val = this[propertyName];
// Геттер свойства
const getter = () => {
console.log(`Get: ${propertyName} => ${_val}`);
return _val;
};
// Сеттер свойства
const setter = newVal => {
console.log(`Set: ${propertyName} => ${newVal}`);
_val = newVal;
};
// Удаление свойства
if (delete this[propertyName]) {
// Создает новое свойство с геттером и сеттером
Object.defineProperty(target, propertyName, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
}
}
class Employee {
@logParameter
name: string;
}
const emp = new Employee();
emp.name = 'Mohan Ram';
console.log(emp.name);
// Set: name => Mohan Ram
// Get: name => Mohan Ram
// Mohan RamДекоратор метода
- target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
- propertyName - название свойства
- descriptor - дескриптор свойства метода т.е. - Object.getOwnPropertyDescriptor (Employee.prototype, propertyName)
export function logMethod(
target: Object,
propertyName: string,
propertyDesciptor: PropertyDescriptor): PropertyDescriptor {
const method = propertyDesciptor.value;
propertyDesciptor.value = function (...args: any[]) {
// Конвертация списка аргументов greet в строку
const params = args.map(a => JSON.stringify(a)).join();
// Вызов greet() и получение вернувшегося значения
const result = method.apply(this, args);
// Конвертация результата в строку
const r = JSON.stringify(result);
// Отображение в консоли деталей вызова
console.log(`Call: ${propertyName}(${params}) => ${r}`);
// Возвращение результата вызова
return result;
}
return propertyDesciptor;
}
class Employee {
constructor(
private firstName: string,
private lastName: string
) {
}
@logMethod
greet(message: string): string {
return `${this.firstName} ${this.lastName} says: ${message}`;
}
}
const emp = new Employee('Mohan Ram', 'Ratnakumar');
emp.greet('hello');
//Call: greet("hello") => "Mohan Ram Ratnakumar says: hello"
Декоратор параметра
- target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
- propertyKey - название свойства
- index - индекс параметра в массиве аргументов
function logParameter(target: Object, propertyName: string, index: number) {
// Генерация метаданных для соответствующего метода
// для сохранения позиции декорированных параметров
const metadataKey = `log_${propertyName}_parameters`;
if (Array.isArray(target[metadataKey])) {
target[metadataKey].push(index);
}
else {
target[metadataKey] = [index];
}
}
class Employee {
greet(@logParameter message: string): void {
console.log(`hello ${message}`);
}
}
const emp = new Employee();
emp.greet('world');Что такое Angular?
Angular — это платформа для разработки мобильных и десктопных веб-приложений. Наши приложения теперь представляют из себя «толстый клиент», где управление отображением и часть логики перенесены на сторону браузера. Так сервер уделяет больше времени доставке данных, плюс пропадает необходимость в постоянной перерисовке. С Angular мы описываем структуру приложения декларативно, а с TypeScript начинаем допускать меньше ошибок, благодаря статической типизации. В Angular присутствует огромное количество возможностей из коробки. Это может быть одновременно и хорошо и плохо, в зависимости от того, что вам необходимо.
Какие плюсы можно выделить:
- Поддержка Google, Microsoft
- Инструменты разработчика (CLI)
- Typescript из коробки
- Реактивное программирование с RxJS
- Единственный фреймворк с Dependency Injection из коробки
- Шаблоны, основанные на расширении HTML
- Кроссбраузерный Shadow DOM из коробки (либо его эмуляция)
- Кроссбраузерная поддержка HTTP, WebSockets, Service Workers
- Не нужно ничего дополнительно настраивать. Больше никаких оберток. jQuery плагины и D3 можно использовать на прямую
- Более современный фреймворк, чем AngularJS (на уровне React, Vue)
- Большое комьюнити
Минусы:
- Выше порог вхождения из-за Observable (RxJS) и Dependency Injeciton
- Чтобы все работало хорошо и быстро нужно тратить время на дополнительные оптимизации (он не супер быстрый, по умолчанию, но быстрее AngularJS во много раз)
- Если вы планируете разрабатывать большое enterprise-приложение, то в этом случае, у вас нет архитектуры из коробки - нужно добавлять Mobx, Redux, MVVM, CQRS/CQS или другой state-менеджер, чтобы потом не сломать себе мозг
- Angular-Univesal имеет много подводных камней
- Динамическое создание компонентов оказывается нетривиальной задачей
В чем разница между AngularJS и Angular?
AngularJS является фреймворком, который может помочь вам в разработке Single Page Application. Он появился в 2009 году и с годами выяснилось, что имел много проблем. Angular (Angular 2+) же в свою очередь направлен на тоже самое, но дает больше преимуществ по сравнению с AngularJS 1.x, включая лучшую производительность, ленивую загрузку, более простой API, более легкую отладку.
Что появилось в Angular:
- Angular ориентирован на мобильные платформы и имеет лучшую производительность
- Angular имеет встроенные сервисы для поддержки интернационализации
- AngularJS проще настроить, чем Angular
- AngularJS использует контроллеры и $scope
- Angular имеет много способов определения локальных переменных
- В Angular новый синтаксис структурных директив (camelCase)
- Angular работает напрямую с свойства и собитиями DOM элементов
- Одностороннее связывание данных через [property]
- Двустороннее связывание данных через [(property)]
- Новый механизм DI, роутинга, запуска приложения
Основные преимущества Angular:
- Обратная совместимость Angular 2, 4, 5, ..
- TypeScript с улучшенной проверкой типов
- Встроенный компилятор с режимами JIT и AOT (+ cокращение кода)
- Встроенные анимации
Какой должна быть структура каталогов компонентов любого Angular приложения и почему?
Что такое MVVM и в чем разница перед MVC?
Отличие от MVС заключаются в:
Сам Binding может быть односторонним или двухсторонним.
Что такое интерполяция в Angular?
Разметка интерполяции с внедренными выражениями используется в Angular для присвоение данных текстовым нодам и значения аттрибутов. Например:
<a href="img/{{username}}.jpg">Hello {{username}}!</a>Какие способы использования шаблонов в Angular вы знаете?
В чем разница между структурной и атрибутной директивой, назовите встроенные директивы?
Для чего нужны директивы ng-template, ng-container, ng-content?
<template> — это механизм для отложенного рендера клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.
Template можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента template во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.
<ng-template> - является имплементацией стандартного элемента template, данный элемент появился с четвертой версии Angular, это было сделано с точки зрения совместимости со встраиваемыми на страницу template элементами, которые могли попасть в шаблон ваших компонентов по тем или иным причинам.
Пример:
<div class="lessons-list" *ngIf="lessons else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template><ng-container> - это логический контейнер, который может использоваться для группировки узлов, но не отображается в дереве DOM как узел (node).
На самом деле структурные директивы (*ngIf, *ngFor, ..) являются синтаксическим сахаром для наших шаблонов. В реальности, данные шаблоны трансформируются в такие конструкции:
<ng-template [ngIf]="lessons" [ngIfElse]="loading">
<div class="lessons-list">
...
</div>
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>Но что делать, если я хочу применить несколько структурных директив? (спойлер: к сожалению, так нельзя сделать)
<div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div> Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute
named 'template' or prefixed with *
Но можно сделать так:
<div *ngIf="lessons">
<div class="lesson" *ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div>
</div>Однако, чтобы избежать необходимости создавать дополнительный div, мы можем вместо этого использовать директиву ng-container:
<ng-container *ngIf="lessons">
<div class="lesson" *ngFor="let lesson of lessons">
<div class="lesson-detail">
{{lesson | json}}
</div>
</div>
</ng-container>Как мы видим, директива ng-container предоставляет нам элемент, в котором мы можем использовать структурную директиву, без необходимости создавать дополнительный элемент.
Еще пара примечательных примеров, если все же вы хотите использовать ng-template вместо ng-container, по определенным правилам вы не сможете использовать полную конструкцию структурных директив.
Вы можете писать либо так:
<div class="mainwrap">
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</div>Либо так:
<div class="mainwrap">
<ng-template [ngIf]="true">
<h2>Title</h2>
<div>Content</div>
</ng-template>
</div>На выходе, при рендеринге будет одно и тоже:
<div class="mainwrap">
<h2>Title</h2>
<div>Content</div>
</div><ng-content> - позволяет внедрять родительским компонентам html-код в дочерние компоненты.
Здесь на самом деле, немного сложнее уже чем с ng-template, ng-container. Так как ng-content решает задачу проецирования контента в ваши веб-компоненты. Веб-компоненты состоят из нескольких отдельных технологий. Вы можете думать о Веб-компонентах как о переиспользуемых виджетах пользовательского интерфейса, которые создаются с помощью открытых веб-технологий. Они являются частью браузера и поэтому не нуждаются во внешних библиотеках, таких как jQuery или Dojo. Существующий Веб-компонент может быть использован без написания кода, просто путем импорта выражения на HTML-страницу. Веб-компоненты используют новые или разрабатываемые стандартные возможности браузера.
Давайте представим ситуацию от обратного, нам нужно параметризировать наш компонент. Мы хотим сделать так, чтобы на вход в компонент мы могли передать какие-либо статичные данные. Это можно сделать несколькими способами.
comment.component.ts:
@Component({
selector: 'comment',
template: `
<h1>Комментарий: </h1>
<p>{{data}}</p>
`
})
export class CommentComponent {
@Input() data: string = null;
}app.component.html
<div *ngFor="let message of comments">
<comment [data]="message"></comment>
</div>Но можно поступить и другим путем.
comment.component.ts:
@Component({
selector: 'comment',
template: `
<h1>Комментарий: </h1>
<ng-content></ng-content>
`
})
export class CommentComponent {
}app.component.html
<div *ngFor="let message of comments">
<comment>
<p>{{message}}</p>
</comment>
</div>Конечно, эти примеры плохо демонстрируют подводные камни, свои плюсы и минусы. Но второй способ демонстрирует подход при работе, когда мы оперируем независимыми абстракциями и можем проецировать контент внутрь наших компонентов (подход веб-компонентов).
Что такое директива и как создать собственную?
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor() { }
}
Декоратор определяет селектор атрибута [appHighlight], [] указывают что это селектор атрибута. Angular найдет каждый элемент в шаблоне с этим атрибутом и применит к ним логику директивы.
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Необходимо указать в конструткторе ElementRef, чтобы через его свойство nativeElement иметь прямой доступ к DOM элементу, который должен быть изменен.
Теперь, используя @HostListener, можно добавить обработчики событий, взаимодействующие с декоратором.
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
Напишем UnlessDirective, которая будет противоположна NgIf.
Необходимо использовать @Directive, и импортировать Input, TemplateRef, и ViewContainerRef. Они вам понадобятся при воздании любой структурной директивы.
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
}
В конструкторе мы получаем доступ к viewcontainer и содержимое .
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) { }
Наша директива предполагает работу с true/false. Для этого нужно свойство appUnless, добавленное через @Input.
@Input() set appUnless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
Что такое директива, компонент, модуль, сервис, пайп в Angular и для чего они нужны?
Расскажите об основных параметрах @NgModule, @Component, @Directive, @Injectable, @Pipe
Что такое динамические компоненты и как их можно использовать в Angular?
Как применить анимацию к компонентам?
Объясните механизм загрузки (bootstrap) Angular-приложения в браузере?
Как происходит взаимодействие компонентов в Angular (опишите components view)?
Каков жизненный цикл у компонентов?
Что такое Shadow DOM и как с ним работать в Angular?
Что такое Data Binding и какие проблемы связанные с ним вы знаете?
Добавление специальной разметки сообщает Angular как соединять обе стороны. Следующая диаграмма показывает четыре формы привязки данных.
Односторонние:
Двусторонняя в основном используется в template-driven forms, сочетает в себе параметр и ивент. Вот пример, использующий привязку с директивой ngModel.
Здесь значение попадает в input из компонента, как при привязке значения, но при изменении юзером значения новое передается в компонент и переопределяется.
Как вы используете одностороннюю и двухстороннюю привязку данных?
В чем преимущества и недостатки Regular DOM (Angular) перед Virtual DOM (React)?
Что такое ngZone?
Как обновлять представление, если ваша модель данных обновляется вне 'зоны'?
- Используя метод
ApplicationRef.prototype.tick, который запуститchange detectionна всем дереве компонентов.
import { Component, ApplicationRef, NgZone } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name }}!</h1>
`
})
export class AppComponent {
public name: string = null;
constructor(private app: ApplicationRef, private zone: NgZone) {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.name = window.prompt('What is your name?', 'Jake');
this.app.tick();
}, 5000);
});
}
}- Используя метод
NgZone.prototype.run, который также запуститchange detectionна всем дереве.
import { Component, NgZone } from '@angular/core';
import { SomeService } from './some.service'
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name }}!</h1>
`,
providers: [SomeService]
})
export class AppComponent {
public name: string = null;
constructor(private zone: NgZone, private service: SomeService) {
this.zone.runOutsideAngular(() => {
this.service.getName().then((name: string) => {
this.zone.run(() => this.name = name);
});
});
}
}Метод run под капотом сам вызывает tick, а параметром принимает функцию, которую нужно выполнить перед tick. То есть:
this.zone.run(() => this.name = name);
// идентично
this.name = name;
this.app.tick();- Используя метод
ChangeDetectorRef.prototype.detectChanges, который запуститchange detectionна текущем компоненте и дочерних.
import { Component, NgZone, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name }}!</h1>
`
})
export class AppComponent {
public name: string = null;
constructor(private zone: NgZone, private ref: ChangeDetectorRef) {
this.zone.runOutsideAngular(() => {
this.name = window.prompt('What is your name?', 'Jake');
this.ref.detectChanges();
});
}
}Что такое EventEmmiter и как подписываться на события?
Что такое Change Detection, как работает Change Detection Mechanism?
Change Detection - процесс синхронизации модели с представлением. В Angular поток информации однонаправленный, даже при использовании ngModel для реализации двустороннего связывания, которая является синтаксическим сахаром поверх однонаправленного потока.
Change Detection Mechanism - продвигается только вперед и никогда не оглядывается назад, начиная с корневого (рут) компонента до последнего. В этом и есть смысл одностороннего потока данных. Архитектура Angular приложения очень проста — дерево компонентов. Каждый компонент указывает на дочерний, но дочерний не указывает на родительский. Односторонний поток устраняет необходимость $digest цикла.
Какие существуют стратегии обнаружения изменений?
Всего есть две стратегии - Default и OnPush. Если все компоненты используют первую стратегию, то Zone проверяет все дерево независимо от того, где произошло изменение. Чтобы сообщить Angular, что мы будем соблюдать условия повышения производительности нужно использовать стратегию обнаружения изменений OnPush. Это сообщит Angular, что наш компонент зависит только от входных данных и любой объект, который передается ему должен считаться immutable. Это все построено на принципе автомата Мили, где текущее состояние зависит только от входных значений.
Сколько Change Detector'ов может быть во всем приложении?
У каждого компонента есть свой Change Detector, все Change Detector'ы наследуются от AbstractChangeDetector.Основное отличие constructor от ngOnInit?
Конструктор сам по себе является фичей самого класса, а не Angular. Основная разница в том, что Angular запустит ngOnInit, после того, как закончит настройку компонента, то есть, это сигнал, благодаря которому свойства @Input() и другие байндинги, и декорируемые свойства доступны в ngOnInit, но не определены внутри конструктора, по дизайну.
Что такое Dependency Injection?
Зависимости - это сервисы или объекты, которые нужны классу для выполнения своих функций. DI -позволяет запрашивать зависимости от внешних источников.
Что такое Singleton Service и с какой целью его используют в Angular?
Как можно определить свой обработчик ErrorHandler, Logging, Cache в Angular?
Что такое Observable?
В чём разница между Observable и Promise?
Observable же является потоком, и позволяет передавать как ноль, так и несколько событий, когда callback вызывается для каждого события.
В чём разница между Observable и BehaviorSubject/Subject?
В чём разница между switchMap, mergeMap, concatMap?
Какими способами можно взаимодействовать API бекенда, что требуется для проксирования запросов?
Что такое HTTP Interceptors?
Interceptor (перехватчик) - просто причудливое слово для функции, которая получает запросы / ответы до того, как они будут обработаны / отправлены на сервер. Нужно использовать перехватчики, если имеет смысл предварительно обрабатывать многие типы запросов одним способом. Например нужно для всех запросов устанавливать хедер авторизации Bearer:
token.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token') as string;
if (token) {
req = req.clone({
setHeaders: {
'Authorization': `Bearer ${token}`
}
});
}
return next.handle(req);
}
}И регистрируем перехватчик как синглтон в провайдерах модуля:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TokenInterceptor } from './token.interceptor';
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true // <--- может быть зарегистрирован массив перехватчиков
}]
})
export class AppModule {}Как использовать Json Web Tokens для аутентификации при разработке на Angular?
Как обрабатываются атаки XSS и CSRF в Angular?
Что такое роутинг и как его создать в Angular?
Это реализовано через взаимодействие с адресной строкой, Angular Router интерпретирует ее как инструкцию по переходу между view. Возможна передача параметров вспомогательному компоненту для конкретизирования предоставляемого контента. Навигация может осуществлять по ссылкам на странице, кнопкам или другим элементам, как кнопки "вперед-назад" в браузере.
Для создания роутинга первым делом необходимо импортировать "RouterModule" и "Routes" в AppModule.
Затем необходимо реализовать конфигурацию по приложению, определить path и относящие к ним компоненты, и в метод RouterModule.forRoot() передать конфигурацию.
Наконец необходимо добавить routerLink в шаблон.
Каков жизненный цикл у Angular Router?
Что такое ленивая загрузка (Lazy-loading) и для чего она используется?
В чем разница между Routing и Navigation?
Как загрузить данные до того как активируется роут?
Что такое FormGroup и FormControl и для чего они используются?
Они используются для создания и работы с формами.
Что такое реактивные формы в Angular?
Как применять валидацию для простых и сложных форм?
Можно использовать встроенные валидаторы, либо создать свои. Валидаторы доабвляются