Вопросы на собеседовании по Angular 
Вопросы подготовлены непосредственно для того, чтобы определить уровень разработчика, насколько глубоко, поверхностно или сносно он знает Angular. Вопросы для собеседования на знание JavaScript или Web-стека хорошо освещены в других местах, поэтому ниже будет добавлен список ресурсов по этой теме:
Fundamentals:
Frontend:
- Front-end Job Interview Questions
- The Best Frontend JavaScript Interview Questions
- Frontend Guidelines Questionnaire
- Подготовка к интервью на Front-end разработчика
Angular:
Основные концепции
Что такое 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?
Angular Template синтаксис
Что такое интерполяция в Angular?
Какие способы использования шаблонов в Angular вы знаете?
В чем разница между структурной и атрибутной директивой, назовите встроенные директивы?
Для чего нужны директивы ng-template, ng-container, ng-content?
1. ng-template
<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>
2. ng-container
<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>
3. ng-content
<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>
Конечно, эти примеры плохо демонстрируют подводные камни, свои плюсы и минусы. Но второй способ демонстрирует подход при работе, когда мы оперируем независимыми абстракциями и можем проецировать контент внутрь наших компонентов (подход веб-компонентов).