45 самых популярных вопросов на собеседовании по AngularJS с ответами

На этом пути вы освежите свои знания о CSS, HTML, JavaScript и фреймворках с помощью десятков реальных вопросов.

Успеть на собеседовании перед фронтендом

1. Что такое AngularJS и его ключевые функции?

AngularJS — это JavaScript-фреймворк для создания крупномасштабных одностраничных веб-приложений. С помощью AngularJS вы можете использовать HTML в качестве языка шаблонов и расширять синтаксис HTML для выражения компонентов приложения.

AngularJS известен тем, что пишет клиентские приложения с помощью JavaScript и модели MVC, создавая кроссбраузерную совместимость. приложений и проста в обслуживании.

Ключевые особенности AngularJS:

2. Что такое области видимости в AngularJS?

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

$ scope — это встроенный объект с данными и методами приложения. Вы создаете свойства объекта $ scope внутри функции контроллера.

3. Что такое службы в AngularJS?

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

AngularJS поставляется со многими встроенными службами, такими как $ https: сервис для создания запросов XMLHttpRequests. Большинство разработчиков AngularJS создают свои собственные сервисы.

4. Объясните ключевое различие между выражениями AngularJS и выражениями JavaScript.

Как и JavaScript, выражения AngularJS представляют собой фрагменты кода, помещенные в привязку, например {{выражение}} . Их наиболее заметные различия:

• В AngularJS выражения оцениваются по объекту области видимости ( см. # 2 ).
• В JavaScript выражения оцениваются по отношению к глобальному окну.
• В AngularJS оценка выражений прощает null и undefined код>.
• В JavaScript любые неопределенные свойства будут возвращать ошибку
• В AngularJS циклы и условные выражения не могут быть добавлены к выражению

5. Что такое директивы в AngularJS?

Директивы — это маркеры на элементах DOM, которые придают ему новое поведение. Мы можем использовать их для создания пользовательских HTML-тегов, которые работают как пользовательские виджеты. Директивы, возможно, являются наиболее важным компонентом приложения AngularJS.

Наиболее распространенными встроенными директивами являются:

• ng-model
• ng-repeat
• ng-App
• ng-show
• ng-bind

6. Что такое привязка данных в AngularJS?

В AngularJS привязка данных — это автоматическая синхронизация данных между компонентами модели и представления. Директива ng-model используется для привязки данных.

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

7. Что такое интерполяция? Зачем использовать его в AngularJS?

Разметка интерполяции со встроенными выражениями обеспечивает привязку данных к текстовым узлам и значениям атрибутов. В процессе компиляции компилятор сопоставляет текст и атрибуты.

AngularJS использует службу $ interpolate , чтобы проверить, содержат ли они какую-либо разметку интерполяции со встроенными выражениями, которые затем обновляются и регистрируются как часы.

8. Что такое фабрика в AngularJS?

Фабрика — это простая функция, которая позволяет нам добавлять логику к объекту и возвращать этот объект. Фабрику также можно использовать для создания многоразовой функции. При использовании factory он всегда будет возвращать новый экземпляр для этого объекта, который можно интегрировать с другими компонентами, такими как фильтр или директива.

9. Каковы характеристики Scope?

Scope имеет пять основных характеристик:

• Scope предоставляет контекст, по которому оцениваются выражения
• Для наблюдения за масштабами мутаций модели с помощью $watch
• Области предоставляют API, используя $ apply , который будет распространять изменения модели через система в представлении из-за пределов области контроллеров, служб или обработчиков событий AngularJS
• Scope наследует свойства от своего родителя и предоставляет доступ к общим свойствам модели.
• Области могут быть вложенными для изоляции компонентов

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

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

Внедрение зависимостей (DI) — это шаблон проектирования программного обеспечения, который обращается к тому, как компоненты зависят от их зависимостей. Это избавляет компонент от нахождения зависимости и делает его более настраиваемым, многоразовым и тестируемым.

DI широко распространен во всем AngularJS, и его можно использовать либо при предоставлении run / config или при определении отдельных компонентов.

AngularJS предоставляет отличную функциональность внедрения зависимостей с использованием следующих компонентов:

• Поставщик
• Значение
• Завод
• Константа
• Служба

11. Как вы интегрируете AngularJS с HTML?

1. Включите AngularJS JavaScript в HTML-страницу.

1. Добавьте атрибут ng-app в тег тела HTML.

 // пример    

12. Почему мы используем двойной щелчок в AngularJS?

Директива ngDblclick позволяет указать настраиваемое поведение для любого события dblclick . Эта директива дает AngularJS действие при двойном щелчке по HTML-элементу. Директива ngDblclick не отменяет событие ondblclick элемента.

 //example  Увеличение (при двойном щелчке)  count: {{count}}  

13. Как сбросить $ timeout и отключить $ watch () ?

Вы должны присвоить результат функции Переменная. Чтобы повторно отправить $ timeout или $ interval () , мы используем .cancel () .

  var customTimeout = $ timeout (function () {}, 55); $ timeout. cancel (customTimeout);  

Чтобы отключить $ watch , мы вызываем его.

14. Что такое фаза дайджеста?

Цикл дайджеста имеет решающее значение для привязки данных. По сути, он сравнивает старую и новую версии одной и той же модели прицела. Цикл дайджеста может запускаться автоматически или вручную с помощью $ apply () .

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

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

15. Что такое $ rootScope и как он соотносится с $ scope ?

$ rootScope — это область, созданная в элементе DOM, который содержит директиву ng-app . Он доступен во всем приложении. Приложение AngularJS может иметь только один $ rootScope . Другие области — это дочерняя область .

16. Что такое иерархия областей видимости в AngularJS?

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

$ rootScope

• $ scope для myController 1
• $ scope для myController 2

р>

17. Как можно выполнить вызов ajax с помощью AngularJS?

AngularJS использует $ https: для выполнения вызовов ajax. Сервер будет обращаться к базе данных для получения записей. AngularJS использует формат JSON для данных.

  function employeeController ($ scope, $ https :) {var url = "tasks.txt";  $ https.get (url) .success (function (response) {$ scope.employee = response;});}  

18. Каковы некоторые общие функции Angular Global API?

В AgularJS обычно используются следующие четыре функции Global API:

• Angular .isNumber : возвращает true , если ссылка является числовым значением.
• Angular.isString : возвращает true, если ссылка представляет собой строковый тип.
• Angular.lowercase : преобразует строку в строчные буквы.
• Angular. верхний регистр : преобразует строку в прописные буквы.

19. Как скрыть HTML-тег?

Вы можете использовать директиву ngHide , чтобы показать или скрыть HTML-элемент, предоставленный атрибуту. При удалении или добавлении CSS-класса .ng-hide к элементу HTML-элемент скрывается или открывается. Класс CSS .ng-hide предопределен.

Класс .ng-hide будет стилизовать элемент с помощью display: none! important по умолчанию. Его можно перезаписать с помощью класса CSS .ng-hide .

20. Назовите и опишите различные фазы жизненного цикла AngularJS Scope.

Фазы жизненного цикла AngularJS Scope следующие:

• Создание : Корневая область видимости создается во время приложения.
• Мутация модели: Директивы регистрируют наблюдения в области, которые распространяют значения модели в DOM.
• Регистрация наблюдателя: мутации должны производиться только в пределах области . $ apply () . Это делается неявно с помощью AngularJS.
• Наблюдение за мутацией: после $ apply $ digest запускается в корневой области видимости, во время которой выражения $ watched проверяются на наличие любых мутаций модели.
• Разрушение области: Создатель области видимости уничтожит ненужные дочерние области с помощью API scope. $ destroy () . Память, используемая дочерними областями, затем освобождается сборщиком мусора.

21. Как вы создаете вложенные контроллеры в AngularJS?

В AngularJS можно создавать вложенные контроллеры. Контроллеры вложенности будут связывать $ scope , и это также изменяет ту же переменную $ scope в родительском контроллере.

   
 
 {{msg}} {{name}}! 
 
 
 Привет {{name  }}! 
 
 
 {{msg}} {{name}}!  Ваше имя: {{name}}. 
 

22. Объясните разницу между Angular и jQuery. Что вы используете в определенных случаях?

jQuery — это библиотека для управления DOM. Функции jQuery лучше всего подходят для следующих целей:

• HTML и манипуляции с DOM
• Обработка событий
• CSS-манипуляции
• Управление анимацией
• Поддержка Ajax/JSON

AngularJS — это среда JavaScript. Лучше всего подходит для следующих случаев использования:

• Директивы как расширение HTML
• Разработка веб-приложений
• Внедрение зависимостей
• Модульное тестирование
• Поддержка MVC Framework
• Двусторонняя привязка данных
• Поддержка RESTful API

AngularJS считается более сложным для понимания, в то время как jQuery считается более простым для понимания, чем AngularJS. AngularJS поддерживает процесс двустороннего связывания и jQuery. не. AngularJS также обеспечивает поддержку маршрутизации с глубокими ссылками , а jQuery — нет.

23. Какие хуки доступны в AngularJS? Каковы их варианты использования?

Компонент AngularJS может реализовывать хуки жизненного цикла, то есть методы, вызываемые в течение жизненного цикла компонента. В AngularJS можно реализовать следующие методы-перехватчики.

• $ onInit ()
• $ onChanges (changesObj)
• $ doCheck ()
• $ onDestroy ( )
• $ postLink ()

24. Что такое каналы в AngularJS?

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

Чтобы создать канал, мы используем символ канала ( | ), за которым следует фильтр в выражении шаблона.

  
 Их полное имя - {{lastName |  верхний регистр}} 
  

25. Что такое изолированные модульные тесты?

В AngularJS изолированный модульный тест включает проверку экземпляра класса без использования введенных значений . Модульное тестирование означает, что мы тестируем отдельные модули кода. Чтобы правильно провести тестирование программного обеспечения, мы должны изолировать модуль, который мы хотим протестировать. Это позволяет избежать других сложностей, таких как выполнение вызовов XHR для получения данных.

26. Что такое Angular CLI? Для чего он нужен?

Angular CLI также называется инструментом интерфейса командной строки для AngularJS. Его можно использовать для создания, инициализации или поддержки приложений Angular. Он предлагает интерактивный интерфейс, такой как командная оболочка. Angular CLI резко ускоряет время разработки.

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

27 Как работает angular.Module work?

angular.Module — это глобальное место для создания и регистрации модулей. Любые модули, доступные для приложения AngularJS, должны быть зарегистрированы с помощью angular.Module .

При передаче одного аргумента будет получен angular.Module . Передача более одного аргумента создает новый angular.Module.

28. Какими способами можно повысить производительность в приложении AngularJS?

Есть два метода, которые официально рекомендуются для производства: включение строгого режима DI и отключение данных отладки .

Включение режима строгого DI может быть достигнуто путем установки в качестве директивы, например:

Отключить данные отладки можно с помощью $ compileProvider , например:

  myApp.config (function ($ compileProvider) {$ compileProvider.debugInfoEnabled (false);});  

Некоторые другие популярными улучшениями производительности являются:

• Использование одноразовой привязки (когда возможно)
• Создание $ httpProvider используйте applyAsync

29. В чем разница между компонентом Angular и директивой?

Компонент AngularJS — это директива, которая позволяет использовать функциональные возможности веб-компонента во всем приложении. С помощью компонента вы можете разделить приложение на более мелкие компоненты. Роль компонентов заключается в следующем:

• Объявление нового HTML с помощью templateUrl или template
• Создавать компоненты как часть архитектуры компонентов
• Привязать логику представления к HTML
• Определить каналы

Директива AngularJS — это метод, который мы используем для привязки поведения к элементу. Это помогает повторно использовать ваши компоненты. Роль директив заключается в следующем:

• Добавить поведение или расширить существующий DOM
• Добавить существующее поведение к элементу

30. Когда область действия завершается, запускаются два события destroy . Для чего они используются?

Первое событие — это событие AngularJS с именем $ destroy . Это может использоваться областями действия AngularJS.

Второе событие — это событие jqLite/jQuery . Это событие вызывается при удалении узла.

Еще 15 вопросов для изучения

Как подготовиться к собеседованию

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

• Прочитать и понять официальное руководство разработчика AngularJS.
• Изучить проблемы с производительностью и научиться формулировать решения
• Практикуйтесь с вопросами.
• Повысьте свои навыки собеседования, включая HTML и JavaScript.

Чтобы получите больше практики с фронтенд-собеседованием, ознакомьтесь с тщательно разработанным планом обучения Educative Ace the Front End Interview . Этот путь поможет вам избавиться от паутины и произвести неизгладимое положительное впечатление на собеседников. Вы изучите все ключевые концепции CSS, HTML и JavaScript, фреймворки, библиотеки и многое другое, которые вам необходимо знать.

Удачного обучения!

Продолжить чтение об собеседованиях по внешнему программированию

• 5 проверенных и надежных методов подготовки к собеседованию по кодированию
• Angular vs Vue vs React: выбор лучшего фреймворка в 2021 году
• 15 советов по JavaScript: лучшие практики для упрощения вашего кода