HR-блог про IT рекрутинг от ИТ Кадрового агентства

Главные вопросы на собеседовании по Angular

Вопросы для собеседования IT рекрутинг
В этой статье приводится список вопросов об Angular, которые мы задаем кандидатам и которые их часто спрашивают на собеседованиях.

1. Что такое угловой? В чем разница между Angular и Vue.js/React?

Angular — это среда проектирования приложений и платформа разработки для создания эффективных и сложных одностраничных приложений. Angular полностью построен на TypeScript и использует его в качестве основного языка. Поскольку это фреймворк, он имеет множество полезных встроенных функций, таких как маршрутизация, формы, HTTP-клиент, интернационализация (i18n), анимация и многое другое.
Vue.js и React — это не фреймворки приложений, а библиотеки JavaScript для создания пользовательских интерфейсов. Vue.js описывает себя как an incrementally adoptable ecosystem that scales between a library and a full-featured frameworkи React как a JavaScript library for building user interfaces.

2. Что нового в Angular?

Загляните в блог Angular , чтобы узнать о последних заметках о выпуске, например, о выпуске Angular 11

3. Каковы основные концепции Angular?

  • Компонент : основной строительный блок приложения Angular, который используется для управления представлениями HTML.
  • Модули : модуль Angular содержит основные строительные блоки, такие как компоненты, службы, директивы и т. д. Используя модули, вы можете разделить свое приложение на логические части, каждая из которых выполняет одну задачу и называется «модулем».
  • Шаблоны : шаблон представляет собой представление приложения Angular.
  • Службы : Службы используются для создания компонентов, которые можно использовать во всем приложении.
  • Метаданные : метаданные используются для добавления дополнительных данных в класс Angular.

4. Что такое внедрение зависимостей?

Внедрение зависимостей (DI) — это важный шаблон проектирования, в котором класс не создает зависимости сам, а запрашивает их из внешних источников. Зависимости — это службы или объекты, которые необходимы классу для выполнения его функций. Angular использует собственную структуру DI для разрешения зависимостей. Инфраструктура DI предоставляет объявленные зависимости классу при создании экземпляра этого класса.

5. Что такое наблюдаемые?

Angular сильно зависит от RxJS , библиотеки для составления асинхронного кода и кода на основе обратного вызова в функциональном, реактивном стиле с использованием Observables. RxJS представляет Observables, новую систему Push для JavaScript, в которой Observable является производителем нескольких значений, «подталкивая» их к наблюдателям (потребителям).

6. В чем разница между Promise и Observable?

НаблюдаемыйОбещатьИх можно запускать всякий раз, когда нужен результат, поскольку они не запускаются до подписки.Выполнять сразу при созданииПредоставляет несколько значений с течением времениПредоставляет только одно значениеМетод подписки используется для обработки ошибок, что обеспечивает централизованную и предсказуемую обработку ошибок.Подтолкнуть ошибки к дочерним обещаниямОбеспечивает цепочку и подписку для работы со сложными приложениямиИспользует только предложение .then()

7. Можете ли вы объяснить различные способы взаимодействия компонентов в Angular?

  1. Обмен данными между родительским и одним или несколькими дочерними компонентами с использованием директив @Input()и @Output().
  2. Обмен данными с помощью службы Angular
  3. Использование управления состоянием, например NgRx
  4. Чтение и запись данных в локальное хранилище
  5. Передача данных через параметры URL

8. Как можно привязать данные к шаблонам?

  • Привязка свойств : привязка свойств в Angular помогает вам устанавливать значения свойств HTML-элементов или директив.
<img [src]="itemImageUrl" />
  • Привязка событий . Привязка событий позволяет прослушивать действия пользователя, такие как нажатия клавиш, движения мыши, щелчки и касания, и реагировать на них.
<button (click)="onSave()">Save</button>
  • Двусторонняя привязка . Двусторонняя привязка позволяет компонентам вашего приложения обмениваться данными. Используйте двустороннюю привязку для прослушивания событий и одновременного обновления значений между родительским и дочерним компонентами.
<app-sizer [(size)]="fontSizePx"></app-sizer>

9. Что вы понимаете под услугами?

Служба — это широкая категория, охватывающая любое значение, функцию или функцию, которые необходимы приложению. Служба обычно представляет собой класс с узкой, четко определенной целью. Он должен делать что-то конкретное и делать это хорошо.
Компонент Angular должен сосредоточиться на представлении данных и обеспечении взаимодействия с пользователем. Он должен быть посредником между логикой приложения (моделью данных) и представлением (отображаемым шаблоном).
Сервисы Angular помогают нам отделить функциональность, не связанную с представлением, чтобы классы компонентов оставались компактными и эффективными.

Как вы предоставляете услугу?

Вы должны зарегистрировать хотя бы одного поставщика любой услуги, которую собираетесь использовать. Служба может быть предоставлена ​​для определенных модулей или компонентов или доступна везде в вашем приложении.

Предоставлять на корневом уровне

@Injectable({
 providedIn: 'root',
})
Angular создает один общий экземпляр, если сервис предоставляется на корневом уровне. Этот общий экземпляр внедряется в любой класс, который его запрашивает. Используя @Injectable()метаданные, Angular может удалить службу из скомпилированного приложения, если она не используется.

Предоставить конкретный NgModule

Регистрация поставщика с определенным NgModule вернет один и тот же экземпляр службы всем компонентам в этом NgModule, если они его запросят.
@NgModule({
  providers: [
  BackendService,
  Logger
 ],
 ...
})

Предоставлять на уровне компонентов

Новый экземпляр службы создается для каждого нового экземпляра компонента, если вы регистрируете поставщика на уровне компонента.
@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

10. Что вы понимаете под директивами?

Директивы добавляют поведение к существующему элементу DOM или существующему экземпляру компонента. Основное различие между компонентом и директивой заключается в том, что компонент имеет шаблон, тогда как атрибут или структурная директива не имеют шаблона, и только один компонент может быть создан для каждого элемента в шаблоне.
Мы можем различать три типа директив:
  • Компоненты : эти директивы имеют шаблон.
  • Структурные директивы : эти директивы изменяют макет DOM, добавляя и удаляя элементы DOM.
  • Директивы атрибутов : эти директивы изменяют внешний вид или поведение элемента, компонента или другой директивы.

11. JIT против AOT

Angular предоставляет два способа компиляции вашего приложения. Этап компиляции необходим, поскольку шаблоны и компоненты Angular не могут быть поняты браузером, поэтому код HTML и TypeScript преобразуется в эффективный код JavaScript.
При выполнении команд CLI ng serveили ng buildтип компиляции (JIT или AOT) зависит от значения свойства aotв конфигурации сборки, указанного в angular.json. По умолчанию aotустановлено значение true для новых приложений CLI.

Точно в срок (JIT)

JIT компилирует ваше приложение в браузере во время выполнения. Это было по умолчанию до Angular 8.

Опережение времени (AOT)

AOT компилирует ваше приложение во время сборки. Это значение по умолчанию, начиная с Angular 9.

Каковы преимущества АОТ?

  • Приложение может отображаться без компиляции приложения, поскольку браузер загружает предварительно скомпилированную версию приложения.
  • Внешние таблицы стилей CSS и шаблоны HTML включены в код JavaScript приложения. Таким образом, можно сохранить множество запросов AJAX.
  • Нет необходимости загружать компилятор Angular, который уменьшает полезную нагрузку приложения.
  • Ошибки привязки шаблона можно обнаружить и сообщить о них на самом этапе сборки.
  • Никаких инъекционных атак, поскольку HTML-шаблоны и компоненты компилируются в JavaScript.

12. Что вы понимаете под отложенной загрузкой?

По умолчанию NgModules загружаются с готовностью, а это означает, что как только приложение загружается, загружаются и все NgModules, независимо от того, нужны они немедленно или нет. Для больших приложений с большим количеством маршрутов рассмотрите отложенную загрузку — шаблон проектирования, который загружает NgModules по мере необходимости. Ленивая загрузка помогает уменьшить начальные размеры пакетов, что, в свою очередь, помогает сократить время загрузки.

13. Можете ли вы объяснить зацепки жизненного цикла компонентов Angular?

После того, как ваше приложение создаст экземпляр компонента или директивы, вызвав его конструктор, Angular вызовет методы ловушек, которые вы реализовали, в соответствующий момент жизненного цикла этого экземпляра.
Angular вызывает эти методы ловушек в следующем порядке:
  1. ngOnChanges : вызывается при изменении значения привязки ввода/вывода.
  2. ngOnInit : вызывается после первого ngOnChanges.
  3. ngDoCheck : вызывается, если мы, как разработчик, запускаем пользовательское обнаружение изменений.
  4. ngAfterContentInit : вызывается после инициализации содержимого компонента.
  5. ngAfterContentChecked : вызывается после каждой проверки содержимого компонента.
  6. ngAfterViewInit : вызывается после инициализации представлений компонента.
  7. ngAfterViewChecked : вызывается после каждой проверки представлений компонента.
  8. ngOnDestroy : вызывается непосредственно перед уничтожением директивы.

14. В чем разница между ViewChild и ContentChild?

ViewChild и ContentChild используются для взаимодействия компонентов в Angular, например, если родительский компонент хочет получить доступ к одному или нескольким дочерним компонентам.
  • ViewChild — это любой компонент, директива или элемент, являющийся частью шаблона.
  • ContentChild — это любой компонент или элемент, проецируемый в шаблоне.
В Angular существуют два разных DOM:
  • Content DOM , который знает только шаблон, предоставленный имеющимся компонентом, или контент, введенный через <ng-content>.
  • Просмотрите DOM , который знает только об инкапсулированных и нисходящих компонентах.

15. В чем разница между модулем Angular и модулем JavaScript?

Оба типа модулей могут помочь модульизовать код, и Angular полагается на оба типа модулей, но они очень разные.
Модуль JavaScript — это отдельный файл с кодом JavaScript, обычно содержащий класс или библиотеку функций для определенной цели в вашем приложении.
NgModules специфичны для Angular, а NgModule — это класс, отмеченный декоратором @NgModuleс помощью объекта метаданных.

16. Что такое @HostBinding и @HostListener?

  • @HostListener()Функция декоратора позволяет обрабатывать события основного элемента в директивном классе. Например, его можно использовать для изменения цвета основного элемента при наведении мыши на основной элемент.
  • @HostBinding()Функция декоратора позволяет вам установить свойства основного элемента из директивного класса. В этом классе директив мы можем изменить любое свойство стиля, такое как высота, ширина, цвет, поля, граница и т. д.

17. В чем разница между OnPush и обнаружением изменений по умолчанию?

Пожалуйста, прочитайте мою статью The Last Guide For Angular Change Detection You Ever Need для подробного объяснения. 

18. Что такое ViewEncapsulation?

Стили CSS компонента инкапсулированы в представление компонента, чтобы избежать побочных эффектов стиля в остальной части приложения Angular.
Тип инкапсуляции можно контролировать для каждого компонента с помощью encapsulationсвойства в метаданных компонента:
// warning: few browsers support shadow DOM encapsulation at this time
encapsulation: ViewEncapsulation.ShadowDom
Вы можете выбрать один из следующих режимов:
  • ViewEncapsulation.Emulatedкоторый является режимом по умолчанию и эмулирует поведение теневого DOM. Он переименовывает и предварительно обрабатывает код CSS, чтобы эффективно ограничить CSS представлением компонента. К каждому элементу DOM прикрепляются дополнительные атрибуты, такие как _nghostили _ngcontent. Элемент, который был бы теневым хостом DOM в собственной инкапсуляции, имеет сгенерированный _nghostатрибут. Это обычно имеет место для компонентов хост-элементов. Элемент в представлении компонента имеет _ngcontentатрибут, который определяет, к какой эмулируемой теневой модели DOM хоста принадлежит этот элемент.
  • ViewEncapsulation.Noneкоторый сообщает Angular не использовать инкапсуляцию представления и добавляет CSS к глобальным стилям. По сути, это то же самое поведение, что и передача стилей компонента в HTML.
  • ViewEncapsulation.ShadowDom который использует собственную теневую реализацию DOM браузера . Он прикрепляет теневой DOM к основному элементу компонента, а затем помещает представление компонента внутрь этого теневого DOM. Стили компонента включены в теневой DOM.

Заключение

Я надеюсь, что этот список вопросов для собеседования по Angular поможет вам получить следующую должность в Angular. Оставьте мне комментарий, если вы знаете какие-либо другие важные вопросы для собеседования по Angular.
Наше ИТ кадровое агентство предлагает вам найти разработчиков менее чем за 2 недели. Свяжитесь с нами сегодня, чтобы узнать больше о том, как мы можем помочь масштабировать ваш следующий проект до новых высот. Мы гарантируем поиск самого сильного, а не самого дорого кандидата. За 10 лет в подборе it специалистов, мы закрыли 5500+ вакансий и собрали 25+ команд с нуля. Убедитесь сами и ознакомьтесь с отзывами клиентов о нашем рекрутинговом агентстве! Нужно больше референсов? Напишите нам в телеграмм.