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

Ниже приведен список из 20 вопросов и ответов на собеседовании по Angular 2.

Q1. Что такое Angular 2?

Angular 2 - это полностью обновленная структура на основе компонентов, в которой приложение представляет собой дерево слабо связанных компонентов. Это более продвинутая версия angularJS. Это скорее фреймворк «все в одном», поэтому он также помогает создать единый веб-сайт, не попадая в ловушку разных JS-фреймворков. Angular 2 - это модульная структура, в которой наш код разделен на отдельные процедуры, которые предлагают аналогичные функциональные возможности, что улучшает тестирование, улучшенную градацию и обслуживание приложения. Он имеет множество полезных функций, таких как рендеринг на стороне сервера, кроссплатформенность, и поддерживает больше языков, чем любой другой фреймворк. Это новый фреймворк машинописного текста, построенный на концепции компонентов, который прокладывает путь для более качественной и обширной разработки. Мы даже можем создавать гибридные приложения с использованием Angular 2, что дает нам резкое преимущество, предоставляя нам гибкость в использовании тех же стандартных кодов для разработки других приложений.

Q2. Перечислите некоторые преимущества Angular 2 перед Angular1.

Angular 2 - это переписанная версия Angular1, а не обновление. Лучший способ сравнить Angular 2 и Angular 1 - это узнать о новых функциях Angular 2. Таким образом мы сможем точно определить преимущества Angular 2 перед Angular1. Итак, некоторые из преимуществ Angular 2: -

Angular 2 Angular1 Angular 2 - это фреймворк, ориентированный на мобильные устройства, тогда как Angular1 разрабатывался не для мобильных устройств. Angular 2 - это универсальный фреймворк, то есть у нас есть больше вариантов для языков. Мы можем использовать ES5, ES6, Typescript или Dart для написания кода Angular 2, тогда как код Angular1 может быть написан с использованием только ES5, ES6 и Dart. У нас не так много вариантов языка в Angular1. В настоящее время контроллеры заменяются компонентами, и Angular 2 полностью основан на компонентах. В то время как Angular1 был основан на контроллерах, объем которых теперь исчерпан.

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

Q3. Какие новые возможности Angular 2?

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

  • Универсальный серверный рендеринг. Это библиотека, которая позволяет упростить создание универсальных приложений. Это важная особенность Angular 2.
  • Мобильный инструментарий. Он предоставляет весь мобильный инструментарий и методы для создания высокопроизводительных мобильных приложений. Веб-приложения, разработанные с использованием мобильного инструментария, могут быть загружены на любое устройство с подключением к Интернету или без него, что является большим преимуществом.
  • Интерфейс командной строки - он может генерировать компоненты, маршруты, службы и каналы с помощью команд.
  • Привязка данных - привязка данных была улучшена в Angular 2. Итак, какое бы свойство элемента DOM вам ни нужно было привязать, вы просто заключаете его в квадратные скобки. Например.-
  • ‹Img [src] =’ product.image ’/›
  • Modular - из ядра angular были удалены различные модули, что привело к повышению производительности.
  • Modern- Angular 2 был нацелен на современные браузеры, в которых были удалены различные хаки, затрудняющие разработку angular.

Q4. Как вы определяете переход между двумя состояниями в angular?

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

Эти переходы анимации помещаются в триггеры анимации. Переход зависит от того, какой была анимация в предыдущем состоянии и какой она станет в следующем состоянии. Другими словами, если определен переход, который соответствует критериям старого / текущего состояния, то будет запущена соответствующая анимация.

Синтаксис: -

function transition (stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata []):AnimationTransitionMetadata;

Q5. Как объявить компонент в Angular 2?

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

Объявление компонента: -

@component ({selector: 'great', template: 'hello {{name}}!'}) Class greet{ Name: string = 'world'; }

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

Q6. В чем разница между наблюдаемым и обещаниями?

Различия между наблюдаемым и обещаниями:

  1. Observable - это более мощный способ обработки асинхронных HTTP-запросов. Принимая во внимание, что обещание обрабатывает одно событие, когда асинхронная операция завершается или терпит неудачу.
  2. Наблюдаемый объект похож на поток, который позволяет передавать ноль или более событий, при этом обратный вызов вызывается для каждого события. Принимая во внимание, что обещание в конечном итоге вызывает успешный или неудачный обратный вызов, даже если вам больше не нужно уведомление или результат, который он предоставляет.
  3. Observable работает с несколькими значениями в течение определенного времени. В то время как Promises работает с одним значением и даже возвращает за раз.
  4. Наблюдаемые можно отменить. Принимая во внимание, что обещания не могут быть отменены.
  5. Observable поддерживает map, filter, reduce и подобные операторы. В то время как Promises имеют более читаемый код с try / catch и async / await.
  6. В Observable можно использовать один оператор retry, чтобы повторить попытку, когда это необходимо. Принимая во внимание, что Promises нельзя повторить. Обещание должно иметь доступ к исходной функции, которая вернула обещание, чтобы иметь возможность повторной попытки.

Q7. Перечислите различия между компонентами Angular 2 и директивами.

Помимо компонентов, в Angular 2 также используются директивы, которые позволяют нам прикреплять поведение к элементам в DOM. Есть определенные различия между компонентами и директивами в Angular 2. Они: -

  1. В Angular 2 компонент - это директива с представлением, тогда как директива - это декоратор без представления. Компоненты - это особый тип директив, который позволяет нам использовать функциональные возможности веб-компонентов во всем нашем приложении. Принимая во внимание, что Директива - это механизм, с помощью которого мы привязываем поведение к элементам.
  2. Компонент используется для разделения приложения на более мелкие компоненты. Принимая во внимание, что Директива используется для разработки повторно используемых компонентов.
  3. Компоненты могут использоваться для определения труб. Принимая во внимание, что мы не можем определять каналы с помощью директив.
  4. Компоненты могут присутствовать в каждом элементе DOM. Принимая во внимание, что Директива используется для добавления поведения к существующему элементу DOM.

Q8. Что такое ECMAScript?

ECMAScript - это стандарт для языков сценариев. Это подмножество Javascript. Такие языки, как ActionScript и JavaScript, используют ECMAScript в качестве ядра. ECMA означает Европейская ассоциация производителей компьютеров. Кодеры обычно используют ECMAScript для написания сценариев на стороне клиента во всемирной паутине. Он также используется для серверных приложений и служб. Он включает в себя структурированные, динамические, функциональные и прототипные функции. ECMAScript был разработан Бренданом Эйхом из Netscape. ECMAScript стандартизирован международной организацией по стандартизации ECMA в спецификациях ECMA-262 и ECMA-402. Это язык программирования, который разработан специально для работы с существующим объектом или системой. В нем содержатся правила, подробности и рекомендации, которым должен соответствовать язык сценариев, чтобы его можно было считать совместимым с ECMAScript.

Q9. Что такое компилятор Traceur?

Traceur - это компилятор, который берет ECMAScript и компилирует его до обычного Javascript, который запускается в вашем браузере. Traceur можно использовать несколькими способами, например, набрав или вставив код ES6 на страницу чтения-оценки-печати-цикла, или включив traceur на веб-страницу и скомпилировав содержимое кода ES6 на лету, или многими другими способами. Даже traceur написан на ES6, скомпилирован под ES5. Основная цель компилятора трейсера - информировать дизайн о функциях Javascript и позволяет нам лучше писать код. В настоящее время компиляторы трассировщиков широко используются на платформе Angular 2. Он также поддерживает транспилинг и проверку типов с помощью аннотаций типов.

Q10. Перечислите современные браузеры, поддерживаемые Angular 2.

Angular поддерживает большинство последних браузеров, некоторые из которых -

  • Гугл Хром
  • Fire Fox
  • Край
  • IE для версий 9–11
  • Сафари
  • iOS 7.1
  • Android 4.1
  • IE Mobile

Q11. Когда использовать Ngoninit и конструктор в Angular 2?

Конструкторы используются для инициализации членов класса, а также для внедрения зависимостей. Ngonlnit используется для инициализации. Оба эти метода вызываются при создании компонента. Очень важно знать, когда и как их использовать. Они используются для обеспечения наилучшей структуры кода вашего компонента. Метод конструктора - это предварительно определенный метод в классе конструктора, который вызывается только при создании экземпляра класса. Он также используется для правильной инициализации полей. Конструктор в Angular 2 используется для создания нового экземпляра класса. Ngonlnit - это класс, который мы импортируем, когда реализуем конструктор, чтобы использовать его в классе. В этом случае используется метод ngOnlnit (). Этот метод помогает инициализировать директиву или компонент после отображения свойств с привязкой к данным и установки входных данных директивы или компонентов.

Q12. Как кэшировать наблюдаемые данные в Angular 2?

Кэширование наблюдаемых данных осуществляется с помощью «observable.cache». Мы можем использовать кеширование, чтобы кэшировать ответ в памяти, а затем, при следующей подписке, вместо повторного запроса удаленного сервера. Этот оператор используется в конце строки. Кэширование важно для производительности, особенно на устройствах с ограниченной пропускной способностью и медленных сетях. Вы должны хорошо разбираться в кешировании при работе с обещаниями, но при переводе его в наблюдаемое это немного сложно. Следовательно, при взаимодействии с наблюдаемыми объектами мы обычно настраиваем подписку на стороне потребителя и реагируем на значения, поступающие по конвейеру. Мы можем легко добавить кеширование наблюдаемых объектов, добавив publishReplay (1) и refCount.

В13. Перечислите различия между ActivatedRoute и RouterState со ссылкой на Angular 2.

Вот некоторые из различий между ActivatedRoute и RouterState применительно к Angular 2: -

  1. ActivatedRoute состоит из информации о маршруте, связанном с компонентом, загруженным в розетку. В то время как RouterState представляет состояние, в котором на самом деле находится писатель.
  2. Нам нужен ActivatedRouteSnapchat для обхода всех активированных маршрутов. В то время как во время навигации после применения перенаправления маршрутизатор создает RouterStateSnapshot.
  3. ActivatedRouteSnapshot имеет старые данные. При изменении маршрута ActivateRouteSnapshot получает данные из предыдущего маршрута. В то время как RouterState заботится о компонентах приложения или, точнее, об их расположении.

Общий модуль используется для импорта сервисов как в модулях с активной, так и в отложенной загрузке. Все мы знаем, что ленивые загружаемые модули создают свою собственную ветку в дереве внедрения зависимостей. Общий модуль состоит из сервисов, которые регистрируются angular в инжекторе корневого приложения. Для этого нам не нужно импортировать его в ленивый модуль, потому что ленивые загруженные модули уже имеют доступ к сервисам, определенным в корне. Компоненты, каналы и директивы также определены в общем модуле. Другие модули, которые импортируют общий модуль, могут использовать его в своих шаблонах. Это означает, что модули можно нормально импортировать в модуль с отложенной загрузкой. Общий модуль содержит код, который будет использоваться в приложениях и избранных модулях. Он также состоит из общих компонентов шаблона. В совместно используемом модуле также должны присутствовать «глупые компоненты». Обычно он также состоит из некоторых распространенных модулей angular. Когда вы импортируете общий модуль, вам также необходимо импортировать модуль с его поставщиками, потому что в тесте нет модуля приложения.

Q15. Что вы имеете в виду под структурной директивой в Angular 2?

Структурные директивы используются для управления DOM в angular. Структурные директивы отвечают за верстку HTML. Добавляя, удаляя или изменяя LMN в angular, они формируют или изменяют структуру DOM. Эта структурная директива применяется к элементу хоста с помощью других директив. Затем директивы делают все, что должны делать с этим элементом хоста и его потомками. Структурные директивы легко распознать. Это также может задержать создание экземпляра компонента или элемента. Его также можно использовать для косметического эффекта или для ручной настройки времени загрузки компонентов. Структурные директивы привязаны к шаблону. Две наиболее распространенные структурные директивы - это «ngIf» и «ngFor». Процесс, происходящий в структурной директиве, является динамическим.

Q16. Что вы понимаете под шаблонной переменной? Как это используется?

Шаблон в Angular 2 используется для создания экземпляров встроенных представлений. Доступ к переменной шаблона можно получить двумя способами. Либо поместив директиву в элемент и введя переменную шаблона для этого встроенного представления в конструктор директивы с помощью токена переменной шаблона, либо вы можете запросить переменную шаблона из компонента или директивы с помощью запроса. Переменная шаблона в Angular 2 - это ссылка на элемент или директиву DOM в шаблоне. Переменные шаблона используются для доступа к значениям свойств элемента DOM. Он объявляется с помощью префикса «#» и «ref-». Например: - #myVar и ref-myVar. Имена переменных шаблона не могут быть дублированы, так как это может дать непредсказуемые значения. Объем ссылочной переменной - это весь шаблон. Его можно использовать в любом месте шаблона. В Angular 2 компонент должен иметь представление, и для определения представления используется переменная шаблона. Это позволяет нам выражать проблемы привязки данных и свойств, привязки событий и шаблонов.

В17. Объясните концепцию отложенной загрузки в Angular 2.

Ленивая загрузка - это модуль, который используется для уменьшения времени запуска. При использовании lazy нашему системному приложению не нужно загружать все сразу. Ему нужно только загрузить то, что пользователь ожидает увидеть при первой загрузке приложения. Модули, которые загружаются лениво, будут загружены только тогда, когда пользователь перейдет к их маршрутам. Ленивая загрузка улучшает производительность наших системных приложений. Он сохраняет начальную полезную нагрузку небольшой, и эти меньшие полезные нагрузки приводят к более высокой скорости загрузки. Это помогает снизить стоимость ресурсов, особенно в мобильных сетях. Если пользователь не зайдет в раздел приложения, он никогда не загрузит эти ресурсы. Концепция отложенной загрузки в angular требует от нас определенного форматирования приложения. Все активы, которые нужно отложить для загрузки, должны быть добавлены в отдельный модуль. Ленивая загрузка настраивается в основном файле маршрутизации. Ленивая загрузка решает проблему медленной загрузки приложений по-своему, что, следовательно, сокращает время загрузки приложения.

Ленивая загрузка может быть выполнена всего за четыре шага: -

  1. Обновите файл маршрута
  2. Установите angular-router-loader и добавьте загрузчик в файл конфигурации webpack.
  3. Определите ленивые маршруты
  4. Импортируйте маршруты в модуль.

В18. В чем разница между конструктором и ngOnlnit в Angular js?

Подробное сравнение, которое затрагивает процесс инициализации компонентов, приведено ниже:

  1. ngonInit - это просто метод в классе, который структурно не отличается от любого другого метода в классе. А вот конструктор - совсем другое дело. Он будет вызываться при создании экземпляра класса.
  2. Конструктор класса в angular используется для внедрения зависимостей, что называется шаблоном внедрения конструктора. В то время как, когда вызывается ngOnInit, он завершает создание компонентной DOM, вводит все необходимые зависимости через конструктор и обрабатывает привязки ввода.
  3. Конструктор - это метод класса по умолчанию, который выполняется при создании экземпляра класса. Принимая во внимание, что ngOnInit - это крючок жизненного цикла, вызываемый Angular 2, чтобы указать, что angular завершил создание компонента.
  4. ngOnInit полагается на привязку компонента. В то же время, когда используется конструктор, это не так.

В19. В чем смысл жизненного цикла компонентов в Angular 2?

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

Существует ряд крючков жизненного цикла, которые перечислены ниже:

  1. ngOnChanges
  2. ngOnInit
  3. ngDoCheck
  4. ngAfterContentInit
  5. ngAfterContentChecked
  6. ngAfterViewInit
  7. ngAfterViewChecked
  8. ngOnDestroy

Q20. Какая польза от директивы ngForTrackBy?

Для перебора коллекции в Angular 2 используется директива ngFor, которая создает экземпляр шаблона один раз для каждого элемента из коллекции. Если в какой-то момент коллекции необходимо изменить данные, возникает проблема, потому что angular не может отслеживать элементы в коллекции и не знает, какие элементы были добавлены или удалены. Это приводит к удалению всех элементов DOM, связанных с данными, и они снова создаются. Если коллекция большая, она становится более сложной, потому что происходит много дорогостоящих манипуляций с DOM. Итак, для решения этой проблемы используется функция trackBy, которая принимает индекс и текущий элемент в качестве аргументов и возвращает уникальный идентификатор для этого элемента.

Первоначально опубликовано на www.onlineinterviewquestions.com.