49 Вопросов и ответов на собеседовании по Angular в 2023 году

Вы планируете пройти собеседование на должность разработчика Angular? Тогда лучше всего подготовиться с помощью этих вопросов для собеседования по Angular. Если вы являетесь разработчиком JavaScript, вы, вероятно, знаете фреймворк Angular для фронтенд-разработки. Он стал одним из самых востребованных навыков для разработчиков в современном мире. Тем не менее, может быть немного сложно иметь хорошее понимание фреймворка Angular. В этом случае необходимо быть готовым ко всему, что может подкинуть вам интервьюер. От директив до фреймворков – это поможет вам успешно пройти собеседование и получить работу, которая выведет вашу карьеру на новый уровень. Мы отсортировали некоторые из самых популярных вопросов собеседования по Angular, к которым вы должны быть готовы, чтобы получить работу своей мечты.

Что такое Angular и почему он был представлен?

Angular – это JavaScript-фреймворк с открытым исходным кодом для создания одностраничных приложений. Angular построен с использованием TypeScript и предназначен для расширения синтаксиса HTML. Angular был создан в 2009 году Мишко Хевери, инженером из Google. Он создал этот фреймворк как домашний проект и назвал его AngularJS, но позже компания Google забрала его себе. После того как Google взял на себя разработку и поддержку этого фреймворка, он был переименован в Angular 2.0, или просто Angular.

Упомяните преимущества Angular.

• Модульная архитектура: Код в Angular сгруппирован в компоненты, что позволяет легко повторно использовать и переписывать код без изменения всего исходного кода. Таким образом, вы можете построить сложное приложение, разделенное на компоненты, с легко читаемым и организованным кодом.
• Построен на TypeScript: TypeScript – это надстрочный индекс JavaScript. TypeScript известен своим качеством кода, что позволяет легко обнаруживать проблемы в коде на ранней стадии.
• Поддерживается компанией Google: Google – одна из самых известных компаний в мире технологий, в которой работают лучшие инженеры.
• Декларативный пользовательский интерфейс: Angular расширяет функциональность HTML, который является простым в использовании языком.
• Поддержка прогрессивных веб-приложений (PWA): Разработчики Angular могут создавать Progressive Web Apps, которые функционируют как мобильные приложения, что снижает затраты на разработку.

Обсудите различия между Angular и Angular JS

Большинство людей используют AngularJS и Angular как взаимозаменяемые понятия. Однако это два разных фреймворка. AngularJS был создан первым, и он был построен с использованием JavaScript. Мишко Хевери создал AngularJS, но со временем Google взял на себя его поддержку. Google прекратил поддержку AngularJS в январе 2022 года. После того, как компания Google взяла AngularJS на себя, она воссоздала все с нуля и использовала TypeScript для создания нового фреймворка под названием Angular 2.0 или просто Angular. В новом фреймворке появилась архитектура, основанная на компонентах, и другие улучшенные возможности.

Что такое Angular Expression? Чем они отличаются от JavaScript Expression?

Angular Expression – это фрагмент кода, который кодеры помещают в связку {{ expression }}. Существенные различия между выражениями Angular и JavaScript заключаются в следующем:

• Легко использовать фильтры перед отображением данных формата.
• Оценка прощает undefined и null вместо JavaScript undefined, который генерирует ReferenceError и TypeError.
• Оценивается по объекту области видимости.
• Выражения Angular включают исключения, условия и циклы.

Объясните привязку данных

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

• Связывание свойств
• Двустороннее связывание данных
• Привязка к событиям
• Интерполяция строк

Познакомьтесь с различными крючками жизненного цикла Angular

Хуки жизненного цикла Angular популярны при проверке триггеров и изменений фазы в течение всего времени действия конкретной фазы. Компонент жизненного цикла включает в себя Конструктор, который делится на четыре основные части: ngOchanges, ngOnInit, ngDoCheck и ngOnDestroy. ngOchanges также делится на ngAfterViewInit, ngAfterContentInit, ngAfterViewChecked и ngAfterContentChecked.

• ngOnchanges( ) – Когда в компонентах изменяется одно (или несколько) входных свойств, вызывается этот метод. Предыдущее и текущее значения свойств получаются в хуке – SimpleChanges.
• ngOnInit( ) – Вызывается после ngOchanges для инициализации наборов входных свойств и компонентов.
• ngDoCheck( ) – Он появляется на третьем этапе, чтобы действовать и обнаруживать изменения, что невозможно с помощью Angular. С помощью этого хука можно быстро реализовать алгоритм обнаружения изменений.
• ngAfterContentInit( ) – Еще один хук, который срабатывает после появления проектов контента в компоненте.
• ngAfterContentChecked( ) – Далее ngAfterContentChecked, который вызывается после каждого последующего ngDoCheck и ngAftercontentInit, реагируя после проецирования контента.
• ngAfterViewInit( ) – Следующий вызываемый хук – ngAfterViewInit для ответа на представление дочернего компонента после проверки представления компонента.
• ngOnDestroy( ) – Он помогает отсоединить обработчики событий и очистить код перед тем, как Angular уничтожит компонент.

В чем разница между AOT и JIT в Angular?

Многие могут запутаться между AOT и JIT компилятором в Angular, поэтому важно знать основы:

• Компилятор Ahead-of-Time (AOT) компилирует код на сервере во время сборки. В то же время, компилятор Just-in-Time (JIT) находится во время выполнения приложения в браузере.
• AOT идеально подходит для производственного режима, в то время как JIT – для режима разработки, в котором можно компилировать код в проекте Angular.
• AOT-компиляция включает команды ng serve и ng build, в то время как JIT-компиляция включает команды ng serve и ng build CLI.
• AOT может уменьшить размер пакета для более быстрого рендеринга, в то время как JIT включает отладку и реализацию основных функций в файлах map.

Глубокое погружение в различные типы фильтров Angular

Angular использует фильтр, чтобы показать пользователям форматирование значения выражения, которое может быть добавлено в шаблоны, директивы, сервисы и контроллеры. Можно создавать персонализированные фильтры на основе требований, позволяющие пользователям упорядочивать данные на основе критериев. После символа трубы ( | ) в выражение помещаются фильтры. В Angular используются следующие основные фильтры:

• nunber – Преобразование значения в строку
• currency – Преобразование чисел в формат валюты
• json – Преобразование любого объекта в строку JSON
• date – Преобразование в любой формат даты
• limitTo – Ограничить массив или строку определенными строками или элементами
• orderBy – Упорядочить массив в выражении
• uppercase – Преобразование строки в верхний регистр
• lowercase – Преобразование строки в нижний регистр
• filter – Выбрать подмножество из заданного массива

Что такое инкапсуляция представления в Angular?

Инкапсуляция представления описывает инкапсуляцию шаблона и стиля. В Angular есть три типа инкапсуляции представления: Emulated, None и Shadow DOM. Emulated – это стиль по умолчанию, при котором Angular добавляет уникальный атрибут к HTML-элементам компонента. При таком подходе стилизация применяется только к его представлению.

Объяснение Angular CLI

Angular Command Line Interface, или просто Angular CLI, – это инструмент командной строки, который можно использовать для создания, разработки и поддержки приложений Angular. Вы также можете создавать и управлять рабочими пространствами с помощью этого инструмента. Вы также можете генерировать документацию с помощью Angular CLI.

Что такое Schematics CLI

Schematics CLI построен поверх Angular CLI и используется для генерации и обновления кода и выполнения других задач, связанных с Angular-приложением. Schematics CLI помогает сократить количество повторяющихся задач и имеет предопределенные чертежи, которые обеспечивают согласованность кода и лучшие практики.

Что такое Angular Universal?

Эта функция позволяет отображать приложения Angular на сервере. Эта технология позволяет предварительно отрендерить приложение Angular перед отправкой его клиенту/представлению.

Что такое элементы Angular?

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

Обсудите аутентификацию и авторизацию Angular

Аутентификация проверяет личность пользователя. От пользователя ожидается предоставление электронной почты/имени пользователя и пароля. Если аутентификация пройдена, пользователю предоставляется доступ к приложению. Авторизация относится к процессу отказа или предоставления доступа к ресурсам приложения на основе предоставленных учетных данных.

Дайте определение бутстраппинга

Bootstrapping – это способ запуска или инициализации приложения в Angular, автоматически или вручную. Давайте поможем вам лучше понять это понятие:

• Автоматический бутстраппинг включается при добавлении директив ng-app в тег, если это необходимо. Angular компилирует DOM и ассоциируется с модулем, находящим директиву ng-app.
• Ручной бутстраппинг предназначен для инициализации приложения Angular и предлагает разработчикам контроль над выполнением значительных операций и задач по компиляции страницы.

Прольем немного света на директивы Angular

Когда речь заходит о директивах Angular, можно выделить три основных вида, таких как:

• Атрибут – с его помощью можно изменить поведение и внешний вид элементов, другой директивы и компонентов. В качестве атрибутов элементов используются ngStyle и ngClass.
• Компоненты – состоят из шаблонов, которые могут определять единый пользовательский интерфейс, используя стили CSS, код TypeScript и HTML-шаблон. Он обычно украшен символом @, дающим возможность компилятору angular заменить его на шаблоны компонентов.
• Структурный – изменяет структуру представления, чтобы скрыть или показать некоторые данные с помощью различных директив, таких как директивы ngIf.

Что такое TypeScript?

TypeScript – это сильно типизированный язык программирования. Он представляет собой надстрочный индекс JavaScript, построенный поверх JavaScript. Таким образом, он предлагает все функциональные возможности JavaScript и введенные типы, позволяя разработчикам отлавливать ошибки до того, как они перейдут в производство.

Что такое одностраничные приложения?

Одностраничные приложения – это приложения, состоящие из одной HTML-страницы. SPA динамически обновляют содержимое веб-страницы по мере того, как пользователь взаимодействует с приложением, без перезагрузки всего приложения. Angular является примером фреймворка, создающего SPA.

Что такое аннотации?

Аннотации – это блоки текста, которые могут отображаться над коннектором или узлом. Их можно прикрепить к методам, свойствам или классам, чтобы предоставить дополнительную конфигурацию или изменить их поведение. Чтобы написать аннотацию, начните с символа @ перед целевым элементом, который вы украшаете.

Что такое компоненты?

Компоненты – это основные строительные блоки пользовательского интерфейса приложения Angular. Эти компоненты содержат HTML, CSS и TypeScript, которые определяют, как должна выглядеть и вести себя та или иная часть пользовательского интерфейса.

Объясните RxJS

Реактивные расширения для JavaScript (RxJS) используют наблюдаемые объекты, позволяющие разработчикам выполнять реактивное программирование. Цель состоит в том, чтобы составить код на основе обратных вызовов или асинхронных операций, используя фреймворк RxJS в Angular. Он может помочь в потоковой передаче данных подписчикам, выдающим значения от издателей. Если вы не используете Angular, другие языки программирования, такие как Python и Java, могут использовать наблюдаемые объекты в реактивном коде.

Что такое динамические компоненты?

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

Что такое трубы?

Трубы – это функции, которые принимают входное значение и возвращают преобразованное значение. Вы можете использовать трубы для преобразования сумм в валюте, дат или строк.

Что такое чистые и нечистые трубы?

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

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

Что такое интерфейс PipeTransform?

Интерфейс PipeTransform – это встроенный интерфейс, который принимает входное значение и возвращает преобразованное значение. В Angular метод преобразования, transform(), вызывается со значением привязки в качестве первого аргумента и другими параметрами в качестве второго аргумента в виде списка.

Что такое обещания и наблюдаемые?

• Promises в Angular являются одноадресными, то есть они будут выполнены только один раз, даже если вы вызовете их несколько раз.
• Observables в Angular являются многоадресными, то есть они будут выполняться каждый раз, когда вы подписываетесь на наблюдаемое.

Что такое контроллеры?

Контроллеры доступны только в AngularJS. Однако в Angular используются компоненты. Контроллеры – это одна из частей архитектуры MVC в AngularJS. Контроллеры в AngularJS определяют поведение и логику конкретных частей пользовательского интерфейса.

Что такое интерполяция строк?

Интерполяция строк позволяет отображать динамические данные конечному пользователю (на шаблоне HTML). Эта техника одностороннего связывания передает данные из кода TypeScript в HTML-шаблон или представление. Интерполяция строк использует двойные фигурные скобки ({{}}) для отображения данных из компонента в представление.

Что такое ленивая загрузка?

Эта функция позволяет загружать компоненты JavaScript при активации определенного маршрута. Такой подход может улучшить производительность вашего приложения, поскольку не загружает все сразу.

Что такое FormBuilder?

FormBuilder – это вспомогательный класс, который предлагает различные способы создания FormControl, FormGroup или FormArray. Этот класс сокращает количество Angular-шаблонов, необходимых для создания сложных форм.

Что такое реактивные формы?

Реактивные формы – это формы, состояние которых управляется программно. Эти формы предоставляют доступ к информации о данном элементе управления через методы и свойства, предоставляемые каждому экземпляру. Реактивные формы являются гибкими, мощными и легко тестируемыми.

Что такое декораторы?

Декораторы – это функции или возможности, которые позволяют добавлять метаданные к методу, классу, параметру или свойству. Декораторы могут изменять или улучшать поведение метода, класса, параметра или свойства во время проектирования. Перед декоратором мы используем символ @.

Что такое декораторы свойств?

Декораторы свойств применяются к свойствам класса для изменения их поведения или метаданных. Отличным примером декоратора свойств является декоратор @Input, который позволяет свойству получать/принимать значения от родителя.

Что такое декораторы классов и методов?

• Декораторы классов применяются к классам в Angular. Примерами декораторов классов являются @Component, @NgModule и @Directive.
• Декораторы методов применяются к методам внутри класса. Примерами декораторов методов являются @HostListener и @ViewChild.

Что такое связывание свойств?

Это односторонний механизм, который позволяет пользователям задавать представление свойств элемента. Привязка свойств позволяет динамически управлять поведением и внешним видом компонентов.

Что такое двустороннее связывание?

Этот механизм позволяет пользователям связывать свойство компонента и свойство HTML-элемента. Двустороннее связывание позволяет вашим компонентам прослушивать события и динамически обновлять значения между дочерними и родительскими компонентами.

Что такое шаблонные выражения?

Это выражения, которые оцениваются и отображаются в шаблоне. Шаблонные выражения используются для отображения динамического содержимого, например, результата вычисления или значения свойства.

Что такое утверждения шаблона?

Операторы шаблонов – это свойства/методы, которые вы можете использовать в HTML-коде для реагирования на события пользователя. К таким событиям относятся движение мыши, отправка формы или нажатие кнопки.

Что такое модули?

В Angular модуль – это контейнер, который объединяет связанные компоненты, сервисы, трубы и директивы, которые работают вместе в приложении. Система модульности в Angular известна как NgModule.

Что такое функция state?

Вы можете использовать функцию state() для определения различных состояний, которые можно вызывать в конце каждого перехода. Функция state() принимает два аргумента: уникальное имя, то есть закрытое или открытое, и функцию style().

Что такое функция стиля?

Функция style объявляет объект value/key, содержащий стили/свойства CSS, которые могут быть использованы для состояния анимации в рамках анимационной последовательности.

Что такое многоадресная передача?

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

Каковы различные типы событий, которые могут быть вызваны в маршрутизаторе Angular?

Существуют различные события, но мы упомянем лишь некоторые из них.

• NavigationStart: Срабатывает, когда маршрутизатор начинает навигацию по новому маршруту.
• NavigationEnd: Срабатывает, когда Angular router завершает навигацию по новому маршруту.
• NavigationError: Срабатывает, когда маршрутизатор сталкивается с ошибкой во время навигации.

Что такое ссылки маршрутизатора?

Ссылки маршрутизации в Angular используются для навигации между различными компонентами или представлениями в приложении с помощью модуля Angular Router.

Вы можете иметь маршрут, который ведет к маршруту “home” следующим образом;

<a routerLink="/home">Home</a>

Объяснение инъекции зависимостей

Инъекция зависимостей – это концепция в Angular, которая позволяет классам с декораторами Angular, такими как Injectables, Directives, Components и Pipes, настраивать необходимые им зависимости. Эта концепция облегчает взаимодействие между поставщиками и потребителями зависимостей через абстракцию Injector.

Объясните архитектуру MVVM

MVVM – это сокращение от Model-View-ViewModel.

• Модель: Представляет данные и бизнес-логику приложения Angular.
• Представление: This represents the user interface.
• Модель представления (ViewModel): Она выступает в качестве посредника между моделью и представлением. Компоненты в приложении Angular соответствуют ViewModel.

Обсудите различия между структурными директивами и директивами атрибутов

• Структурные директивы используются для добавления элементов или удаления элементов из DOM. Структурные директивы имеют символ * перед своим именем. Примерами являются *ngFor, *ngIf и *NgSwitch.
• Директивы атрибутов используются для изменения внешнего вида или поведения элементов DOM. Чтобы использовать эти директивы, необходимо добавить перед ними квадратные скобки [].

Объясните, как работают пользовательские элементы

Функция пользовательских элементов позволяет создать многократно используемый компонент Angular и повторно использовать его в других фреймворках, поддерживающих веб-компоненты. Например, вы можете создать пользовательский элемент с именем home-button, который отображает кнопку с функциональностью Angular. Позже вы можете повторно использовать эту кнопку home-button в своем HTML-коде, как обычный HTML.

Как компоненты обмениваются данными в Angular?

• Parent-to-child: Используйте декоратор @Input() для обмена данными от родительского компонента к дочернему.
• Child-to-parent: Используйте декоратор @output() для обмена данными от дочерних компонентов к родительским.
• Shared service: Вы можете внедрить сервис в родительский и дочерний компоненты, а затем использовать его для обмена данными.
• ViewChild: Вы можете получить доступ к дочернему компоненту из родительского компонента с помощью декоратора ViewChild.

Заключение

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