Angular стал одним из самых популярных фреймворков для создания интерфейсных веб-приложений . Этот набор вопросов об Angular, безусловно, будет полезен для вашего интервью, но прежде чем мы углубимся в это, позвольте нам кратко рассказать об Angular.
Что такое Angular?
Вы могли бы подумать, ах … Еще одна основа для изучения Но Angular действительно отличается. Вам понравится изучать эту среду разработки веб-приложений с открытым исходным кодом на основе TypeScript. Прежде чем я расскажу вам больше, позвольте мне прояснить, что Angular отличается от AngularJS, но была сделана той же командой Google, что и AngularJS . Первоначально оно было разработано как одностраничное приложение (SPA), но затем были выпущены лучшие инструменты, такие как React и Vue, поэтому Angular пришлось превратить в нечто большее — если оно будет таким, каким оно является сегодня!
Вам также может понравиться: Angular: все, что вам нужно знать [Учебники]
Эта оболочка имеет множество многократно используемых и надежных компонентов, и вы можете написать чистый, поддерживаемый код с этим. В 2018 году Angular была признана второй по популярности технологией, первой из которых стала Node.js. Настоящая сила Angular заключалась в его версии 4, которая предлагала обратную совместимость, более быструю компиляцию, больше возможности повторного использования, что приводит к меньшему количеству кодирования, улучшенным библиотекам для HTTP-запросов, условному отключению анимации и многому другому.
Angular основан на HTML, CSS и TypeScript и является отличной платформой для создания как настольных, так и мобильных приложений.
Чего ждать?
Но я недавно где-то читал, что браузеры не поддерживают typeScript!
Да, TypeScript конвертируется в другой язык (JavaScript). Этот процесс называется транспиляцией (а не компиляцией).
Angular также называется Angular 2+. Поскольку Angular основан на TypeScript, он вмещает в себя все функции JavaScript, а также TypeScript.
Почему угловой?
Теперь встает критический вопрос.
Angular поставляется с множеством преимуществ и функций, которые подходят для корпоративных приложений и веб-сайтов с большим количеством динамического контента или несколькими рабочими процессами. Будь то исчерпывающая документация, обширная поддержка со стороны Google или компонентная архитектура (начиная с версии 2), у Angular есть все, что вы можете запросить в среде веб-разработки . Вот некоторые причины, по которым вам следует использовать Angular:
- Отличная поддержка со стороны Google, что делает платформу удобной и надежной.
- Компонентная архитектура, в которой приложение разделено на функциональные и логические компоненты, которые не зависят друг от друга. Детали можно легко разъединить, заменить или использовать повторно. Этот тип архитектуры также обеспечивает более легкое тестирование на каждом этапе.
- Доступно много кода многократного использования и сторонних компонентов, что повышает производительность.
- Код отображается быстрее, потому что он конвертируется из TypeScript (или HTML) в JavaScript во время самого процесса сборки. Это называется сборкой с опережением времени (AOT).
- Интерфейс командной строки (CLI) — CLI облегчает разработку наиболее эффективным способом. Вы можете создать новый проект, добавить свои функции и быстро их протестировать. Кроме того, инициализация и настройка также становятся простыми.
- Angular six позволяет добавлять пользовательские элементы в веб-приложения, созданные в других средах, таких как React, Vue, jQuery и т. Д.
- В Angular Six также включен рендерер Ivy, который переводит компоненты и шаблоны в JavaScript путем рендеринга. В ходе процесса любой неиспользуемый код удаляется, что ускоряет загрузку веб-приложений.
- Angular Universal, который используется для рендеринга на стороне сервера, помогает увеличить количество пользователей на сайте и ускорить загрузку страниц.
- Отличная документация и поддержка сообщества
Как взломать угловое интервью?
Просто расслабься. Angular очень прост, и если у вас есть практический опыт, вы сможете ответить на большинство вопросов. В Angular нет сложных вопросов. В самом интервью Angular вам могут также задать несколько вопросов о TypeScript. Кроме того, вы можете поделиться своим опытом работы с Angular.
Иногда могут возникнуть субъективные вопросы, например, над какими другими технологиями вы работали, сравнение двух методов, созданных для одной и той же цели с вашей точки зрения (например, какой из них был более удобным, какой с лучшей кривой обучения и т. Д.) Или даже ваше личное мнение о том, какая ваша любимая технология из тех, над которыми вы работали.
Ответ зависит от вашего личного опыта, и именно здесь вы можете получить это дополнительное преимущество. Чем более личный опыт вы поделитесь, тем больше интерес будет интервьюер задавать вам дополнительные вопросы. Приведенные ниже вопросы носят чисто технический характер, и иногда ваш ответ, естественно, приведет к следующему вопросу.
Угловые вопросы интервью
Вопрос: Что такое Angular / Что вы знаете об Angular?
Ответ: Если вы упомянули Angular в своем резюме, действительно, это будет первый Angular вопрос, который вам зададут.
Angular — это интерфейсная среда разработки с открытым исходным кодом, основанная на TypeScript. Он наиболее подходит для разработки корпоративных веб-приложений, поскольку код можно использовать повторно и поддерживать. Angular начинался как инфраструктура SPA (Single-Page-Application) и теперь поддерживает динамический контент на основе разных пользователей посредством внедрения зависимостей. YouTubeTV — самая популярная компания, которая использует Angular.
Вопрос: Какова цель Angular?
Ответ: Целью использования Angular является легкое создание быстрых, динамичных и масштабируемых веб-приложений с использованием компонентов и директив.
Вопрос: Какие основные строительные блоки угловые?
Ответ:
- Концепция Angular основана на компонентах, которые являются первым строительным блоком. Компоненты следуют древовидным структурам, где компонент App является корневым компонентом. Компонент инкапсулирует логику представления, данных и разметки HTML. Каждое приложение должно иметь хотя бы одну часть. Чем больше частей меньшего размера, тем лучше читаемость кода.
- Модуль, второй по важности строительный блок — это контейнер, который группирует связанные компоненты. Модуль по умолчанию в приложении — это модуль приложения. Лезвия должны быть небольшими по размеру и иметь соответствующие компоненты.
Другие важные строительные блоки Angular:
- Шаблоны. Шаблоны написаны на HTML и содержат угловые элементы и атрибуты. Модели предоставляют пользователю динамическое представление, комбинируя информацию с контроллера, а также просматривая и отображая ее.
- Директивы: Директивы позволяют разработчикам добавлять новый синтаксис HTML, который зависит от приложения. Поведение по существу добавляется к существующим элементам DOM.
- Сервисы: вместо вызова службы Http Angular позволяет создавать новые классы сервисов. Когда новые сервисы создаются в Angular, они могут использоваться различными компонентами.
Вопрос: расскажите нам разницу между Angular и Angularjs
Ответ: вот различия между обоими —
| AngularJS | угловатый |
| На основе JavaScript | Основано на TypeScript |
| На основе шаблона проектирования MVC | Основано на компонентах, модулях и директивах |
| Нет поддержки для мобильного приложения | Поддерживает мобильный |
| Не могу создавать SEO-дружественные приложения | SEO-дружественные приложения могут быть легко созданы |
| Токены зависимости могут быть только строками. Также присутствует только инжектор. | Токены DI могут быть любого типа, например, строки или класс. Angular следует древовидной иерархии для инжекторов, начиная с корневого инжектора, и впредь сопла для каждого компонента. |
| Нет поддержки или обратной совместимости | Обратная совместимость может быть выполнена без проблем. Кроме того, есть много вспомогательной документации для того же |
| Использует $ routeprovider.when () для маршрутизации | Маршрутизация выполняется с помощью @RouteConfig [()] |
| Требуется специальная директива ng для каждого свойства, события и изображения | Для привязки события используется (), а для привязки изображения или свойства [] |
Вопрос: упомянуть некоторые особенности Angular
Ответ: некоторые важные особенности —
- Компонентная архитектура — приложения написаны как набор независимых компонентов.
- Детали могут быть созданы, протестированы, интегрированы с помощью Angular CLI.
- Отличная поддержка сложных анимаций без написания большого количества кода.
- Из-за компонентного маршрутизатора Angular поддерживает автоматическое разделение кода. Следовательно, загружается только код, необходимый для отображения конкретного представления.
- Разработка кроссплатформенных приложений.
- Синтаксис шаблона для создания представлений пользовательского интерфейса.
Вопрос: обсудите некоторые преимущества использования Angular
Ответ: Есть много преимуществ, кроме того факта, что Angular дает нам отрыв от шаблона MVC, так как он следует структуре на основе компонентов. Вот еще несколько важных преимуществ —
- Поддерживает двустороннюю привязку данных.
- Поддерживает проверки и синтаксис шаблона (как угловой, так и статический).
- Мы можем добавлять собственные анимации, директивы и сервисы.
- Процесс обработки событий является бесшовным.
- Иерархическая структура внедрения зависимостей (Parent-child).
- Предоставление услуг RESTful и клиент-серверных коммуникаций.
В качестве продолжения интервьюер (ы) может спросить вас больше о любом из вышеперечисленных преимуществ. Одной или двух строк должно быть достаточно. Мы ответим на каждый, когда вы прочитаете дополнительные вопросы.
Вопрос: Можете ли вы вспомнить какие-либо недостатки использования Angular?
Ответ: Не в качестве недостатка, но в некоторых случаях Angular может не подходить. Например, для краткосрочных проектов или легких веб-сайтов с более статичным содержимым не требуется сложная структура, такая как Angular. Точно так же приложения, использующие подход проектирования микросервисов, найдут слишком много неиспользуемых функций, если они используют Angular, поскольку это законченное решение. У разработчика меньше гибкости в выборе дополнительных инструментов.
Вопрос: что такое Angular CLI? Как вы используете его?
Ответ: Angular CLI автоматизирует сквозной процесс разработки. Процесс инициализации, настройки и разработки приложения становится простым и понятным. Используя CLI (интерфейс командной строки), мы можем создать новый проект, добавить новые функции и запустить тесты (модульные тесты и сквозные тесты), просто набрав несколько простых команд. Таким образом, процессы разработки и тестирования становятся быстрее.
Например,
Чтобы создать новое приложение, мы должны набрать —
Простой текст
1
ng new <appname> [options]
2
to create a class using CLI (in Angular 7), we have to type –
3
ng generate class MySampleClass [options]
4
to generate a component,
5
ng g c <componentname>
Вопрос: что такое директивы в угловых?
Ответ: С помощью директив разработчики могут написать собственный синтаксис HTML для приложения. Новый язык написан на DOM, и компилятор Angular выполняет директивные функции, когда находит новый синтаксис HTML. Существует три типа директив — атрибутные, компонентные, структурные.
Вопрос: упомянуть пример структурной директивы
Ответ: Структурные директивы меняют структуру DOM. Примеры * ngIf и * ngFor. Пример использования.
<div *ngIf = “product” class=”name”>{{product.name}}</div>
Так же.
<ul> <li *ngFor = “Show product list”>{{product.name}}</li> </ul>
Вопрос: Как вводится зависимость (DI) в угловых?
Ответ: В Angular класс запрашивает службы или объекты при его создании, что означает, что, если класс вызывается, он не создает никаких объектов, скорее он зависит от внешнего источника для создания объектов, служб или параметров. В этом процессе инъекционный сервис создается и регистрируется. Форсунки могут быть настроены тремя различными способами,
- @Injectable () декоратор для сервиса.
- @NgModule для NgModule.
- @ Компонент для компонента.
Вопрос: Что такое шаблоны в угловых?
Ответ . Шаблон — это просто представление HTML, в котором элементы управления привязкой могут отображать данные в свойствах компонента Angular. Шаблоны могут быть определены встроенными, используя свойство шаблона как —
Шаблон:
<div>My sample Template</div>
Или может быть вызван из другого файла HTML с помощью свойства URL @Component decorator —
templateUrl: 'app/app.component.html'
Вопрос: Чем угловые выражения отличаются от выражений Javascript?
Ответ: оба схожи и могут иметь операторы, переменные и литералы. Тем не менее, некоторые различия между ними —
| Угловые выражения | Выражения JavaScript |
| Условия, исключения и циклы (операторы управления) не могут быть использованы | Все контрольные заявления могут быть использованы |
| Регулярные выражения не могут быть использованы | Регекс широко используется |
| Фильтры могут использоваться внутри самого выражения, чтобы данные отображались перед отображением | Такой концепции не существует |
| Выражения сравниваются с объектом области | Выражения сравниваются с глобальным окном. |
| Оценка выражения прощает неопределенному или нулевому | Если при оценке выражения или свойства возникают проблемы, JS генерирует ReferenceError или TypeError. |
| Функции не могут быть объявлены | Любое количество функций может быть объявлено |
| Новые, запятые, побитовые, пустые операторы не могут быть использованы. | Это возможно |
Вы можете указать любые 3-4 экзаменатора. Если они конкретно спрашивают, вы можете сказать, что конкретная точка разницы.
Вопрос: Объясните архитектуру Angular
Ответ: Как мы видели в вопросе 2, компоненты, модули, шаблоны и т. Д. Являются основными строительными блоками Angular. Все они снова основаны на NgModules, которые обеспечивают контекст компиляции для компонентов. Когда вас спросят в интервью, вы можете поговорить об основных строительных блоках, а затем нарисовать следующую диаграмму (источник: угловая документация ), чтобы изобразить отношения между каждым —
Вы можете видеть, что представление содержится в шаблоне, а свойства привязаны от компонентов к шаблону. Службы DI впрыскиваются инжектором в части по мере необходимости. Директивы добавлены в модель. Модули содержат основную логику, такую как сервисы, значения, функции и компоненты.
Вопрос: расскажите нам некоторые различия между компонентом и директивой
Ответ: Компонент — это особый тип директивы, который имеет представление.
| Составная часть | директива |
| Для регистрации компонента используется аннотация @Component | @Directive используется для регистрации директивы |
| Основное назначение ингредиентов — разбить сложное приложение на более мелкие, более управляемые части (компоненты) | Цель директивы `состоит в создании новых пользовательских компонентов, которые можно использовать повторно |
| Каждый элемент DOM может иметь только один компонент | Любое количество директив может быть использовано в одном элементе DOM |
| Компоненту обязательно требуется @View оформитель, шаблон или шаблон URL для указания представления. | Директива не имеет ничего общего с представлениями |
Вопрос: Какой основной язык используется в Angular?
Ответ: Angular основан на TypeScript и HTML. HTML используется для шаблона, а TypeScript (расширенный набор JavaScript) используется для компонентов.
Вопрос: Что такое привязка данных и каковы различные категории привязки данных?
Ответ: привязка данных используется для соединения данных приложения и DOM, т.е. компонентов с шаблоном. Их можно классифицировать в зависимости от направления потока данных.
| Направление потока данных | Тип | Описание |
| От источника к виду (в одну сторону) | Интерполяция — Атрибут, стиль, класс, свойство | Интерполирует значения, рассчитанные из данных приложения, в HTML |
| От источника света до источника (в одну сторону) | Мероприятие | Позволяет приложениям отвечать пользователям в целевой среде. |
| Вид-источник-вид (двусторонний) | Двусторонний | Изменения в состоянии приложения автоматически отражаются в представлении и наоборот. Для этого типа привязки используется директива ngModel. |
Вопрос: Объясните разницу между односторонним и двусторонним связыванием
Ответ:
| Односторонняя привязка | Двухстороннее связывание |
| Представление не изменяется и не обновляется автоматически при изменении модели данных. Пользовательский код должен быть написан вручную, чтобы отразить изменения. | Пользовательский интерфейс или представление постоянно обновляется автоматически при изменении модели данных. Процесс похож на процесс синхронизации. |
Вопрос: Какие различные фильтры поддерживаются Angular?
Ответ:
| Название фильтра | Описание |
| Верхний регистр | Преобразовать строку в верхний регистр |
| Строчные | Преобразовать строку в нижний регистр |
| Дата | Конвертировать дату в указанный формат |
| валюта | Преобразовать число в формат валюты |
| номер | Форматировать номер в строку |
| Сортировать по | Упорядочивает массив по определенному выражению |
| ограничено до | Ограничивает массив указанным количеством элементов; строка с указанным количеством символов |
| JSON | Форматировать объект в строку JSON |
| Фильтр | A выбрать подмножество элементов из массива |
Вы можете упомянуть несколько из них и показать пример —
<p>Amount: {{ amount | currency }}</p>
Вопрос: что такое Ngmodules? Различение между модулями Javascript и модулями Ng
Ответ: NgModule был введен после Angular 2, чтобы позволить разработчикам объявлять все отношения в одном месте с метаданными. Таким образом, короче говоря, NgModules построены из метаданных, которые описывают компоненты, сервисы, директивы, каналы и т. Д. Angular затем создает фабрику компонентов, класс, который создает компоненты.
Разница между модулями JS и NgModules —
| JS модули | NgModules |
| Ограничивает все классы | Ограничивает только декларируемые классы |
| Все классы-члены определены в одном файле | Классы модуля перечислены в списке @ NgModule.declarations |
| Не могу расширить все приложение с услугами | Все приложение может быть расширено службами с помощью списка @ NgModules.providers для добавления поставщиков |
| Может импортировать или экспортировать любые виды классов | Он может импортировать или экспортировать только те декларируемые классы, которыми он владеет или которые импортирует из других модулей. |
Вопрос: Что такое ngIf и ngFor? Можете ли вы показать небольшой пример, чтобы использовать их?
Ответ: Так же, как и в других языках, ngIf и ngFor используются в качестве управляющих операторов. Пример —
<p * ngIf = «display»> Показывать это, только если логическое значение «display» истинно </ p>
Где дисплей является логическим со значением true или false. Узнайте больше о ngIf.
ngFor используется для просмотра и отображения элементов массива (набора данных).
<tr *ngFor="let student of students; let i = index"> <td>{{student.name}}
</td> <td>{{i}}</td> </tr>
Вторая часть (i = index) является необязательной и нужна только если вы хотите отобразить индекс.
Вопрос: Какая последняя версия Angular? Каковы новые функции в нем?
Ответ: последняя версия Angular 8. Некоторые функции —
- Поддержка TypeScript 3.4.
- Динамический импорт для ленивых маршрутов.
- Веб-работники.
- Дифференциальная загрузка кода приложения.
- Внедрение Angular Ivy — улучшенный размер полезной нагрузки, обратная совместимость, более быстрое время восстановления, упрощенная отладка и т. Д.
Вопрос: что такое компонент?
Ответ: Компонент представляет собой логический кусок кода. Компонент состоит из шаблона (который содержит HTML (или URL), который должен быть отображен), класса (класс, который определяет свойства и методы, поддерживающие представление) и метаданных (определенных с помощью декоратора).
Пример —
@Component ({ selector: 'my-app', template: ` <div> <h1>{{appTitle}}</h1>
<div>What is your name?</div> </div>, })
Вопрос: Есть ли способ конвертировать код Typescript в код Javascript? Как это сделано?
Ответ: Да, преобразование TypeScript в JavaScript называется транспиляцией.
Вопрос: Что такое цикл дайджеста?
Ответ: Цикл дайджеста — это процесс мониторинга списка наблюдения для отслеживания изменений в значении переменной наблюдения. Цикл дайджеста запускается неявно, но мы также можем запустить его вручную, используя функцию $ apply ().
Вопрос: что такое труба? Напишите простой код для демонстрации.
Ответ: Труба (|) используется для преобразования входных данных в желаемый формат. Например,
<p>Price is {{ price | currency }}</p>
Вопрос: Можете ли вы создать параметризованную трубу в приведенном выше примере?
Ответ: да,
<p>Price is {{ price | currency : “USD$” : 0.00 }}</p>
Вопрос: Объясните, как вы можете цепные трубы
Ответ: мы можем добавить любое количество фильтров, используя трубы —
<p>Average is {{ average | uppercase | number}}</p>
Вопрос: возможно ли создать собственную трубу? Как?
Ответ: Да, мы можем создавать собственные трубы.
- Метаданные трубы @Pipe decorator можно импортировать из базовой библиотеки Angular
- Pipe — это класс, который украшен вышеуказанными метаданными (@Pipe ({name: ‘myCustomPipe’}))
- Следующим шагом является определение преобразования. Для этого класс pipe должен реализовывать метод transform () класса PipeTransform.
- Укажите название трубы в основном коде
<p>Size: {{number | myCustomPipe: 'Error'}}</p>
Вопрос: Какова цель асинхронной трубы?
Ответ: асинхронный канал подписывается на обещание или наблюдаемое и возвращает последнее значение. Если выбрано новое значение, канал помечает компонент, который необходимо проверить на наличие изменений.
<code>observable|async</code>
Вопрос: В чем разница между чистой и нечистой трубой?
Ответ:
| Чистая труба | Нечистая труба |
| Не зависит от внутреннего состояния | Может производить разные выходные данные для одного и того же входа в зависимости от внутреннего состояния |
| Можно поделиться со многими различными экземплярами | Он не может быть разделен, потому что на внутреннее состояние могут влиять любые факторы. |
Вопрос: Объясните важность HttpClient.
Ответ: HttpClient — это упрощенный Http API для приложений Angular. Это дает лучше наблюдаемые API, улучшенные механизмы обработки ошибок, тестируемость, перехват запросов и ответов, типизированные объекты запросов и ответов. HttpClientAPI опирается на интерфейс XMLHttpRequest, предоставляемый браузерами.
Вопрос: Как работает угловой маршрутизатор?
Ответ: Angular router интерпретирует URL браузера как команды для перехода к сгенерированному клиентом представлению. Маршрутизатор привязан к ссылкам на странице. Таким образом, Angular знает, как перемещать представление приложения на нужную страницу, когда пользователь нажимает на нее.
Вопрос: Что такое навигационные события маршрутизатора?
Ответ. События навигации маршрутизатора помогают отслеживать жизненный цикл маршрута. Это —
- NavigationStart,
- RouteConfigLoadStart,
- RouteConfigLoadEnd,
- RoutesRecognized,
- GuardsCheckStart,
- ChildActivationStart,
- ActivationStart,
- GuardsCheckEnd,
- ResolveStart,
- ResolveEnd,
- ActivationEnd
- ChildActivationEnd
- NavigationEnd,
- NavigationCancel,
- NavigationError
- манускрипт
Вопрос: является ли модуль маршрутизации обязательным для приложения?
Ответ: Нет, модуль маршрутизации может быть полностью пропущен, если есть простые конфигурации.
Вопрос: Что такое маршрутный символ?
Ответ. У подстановочного маршрута есть путь, состоящий из двух звездочек (**), которые могут соответствовать любому URL. Это полезно, когда URL не соответствует ни одному из предопределенных маршрутов. Вместо того, чтобы выдавать ошибку, мы можем использовать маршрутный символ и определять компонент для того же самого.
Вопрос: объясните крючки жизненного цикла
Множество процессов, которые Angular проходит от начала до конца вместе, называются хуками жизненного цикла.
| ngOnChanges | Этот метод вызывается при изменении значения свойства с привязкой к данным |
| ngOnInit | Это вызывается всякий раз, когда происходит инициализация директивы / компонента. |
| ngDoCheck | Этот метод предназначен для обнаружения и принятия мер в отношении изменений, которые Angular не обнаружит самостоятельно. |
| ngAfterContentInit | Это вызывается в ответ после того, как Angular проецирует любое внешнее содержимое в представление компонента. |
| ngAfterContentChecked | Это вызывается в ответ после того, как Angular проверяет содержимое, проецируемое в компонент. |
| ngAfterViewInit | Это вызывается в ответ после того, как Angular инициализирует представления компонента и дочерние представления. |
| ngAfterViewChecked | Это вызывается в ответ после того, как Angular проверит представления компонента и дочерние представления. |
| ngOnDestroy | Эта очистка выполняется до того, как Angular уничтожит директиву / компонент. |
Вопрос: Как анимация выполняется в угловом формате?
Ответ: Чтобы использовать модуль анимации, он должен быть включен. Для этого необходимо импортировать модуль BrowserAnimationModule.
Простой текст
xxxxxxxxxx
1
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; After this, import the required animation functions into the component files. Example, import { state, animate, transition, // ... } from '@angular/animations';
Затем добавьте свойство метаданных анимации в декоратор @Component () в файле компонента.
Простой текст
xxxxxxxxxx
1
({ selector: 'app-root', templateUrl: 'app.component.html', animations: [ // animation triggers go here ] })
Вопрос: что такое особые переходные государства?
Ответ: Специальные переходные состояния — это символы подстановки (*) и void. Подстановочный знак соответствует любому состоянию анимации. Состояние void используется для настройки переходов для элементов, входящих или покидающих страницу.
Вопрос: Как вы можете отключить все анимации в Angular?
Ответ: Чтобы отключить все анимации, поместите привязку хоста @ .disabled в самый верхний угловой компонент.
- Объясните шаги для создания многоразовой анимации.
Чтобы создать анимацию, которую можно использовать повторно, используйте метод animation () и определите анимацию в отдельном файле .ts. Объявите эту анимацию как переменную экспорта const. Затем его можно импортировать и повторно использовать в любых компонентах приложения, использующих API useAnimation (). Посмотрите пример на сайте Angular .
Вопрос: Упомяните некоторые функции, которые помогают управлять сложными анимационными последовательностями.
Ответ:
| запроса () | находит один или несколько внутренних элементов HTML в текущем элементе, анимируемом в последовательности |
| в шахматном порядке () | применяет каскадную задержку (временной интервал) после каждой анимации |
| группа () | выполняет несколько шагов анимации параллельно. |
| последовательность() | запускает анимационные шаги один за другим (последовательно) |
Вопрос: Объясните особенности форм в угловых.
Ответ: есть два подхода к обработке данных формы (пользовательский ввод) — реактивный и управляемый шаблоном.
Реактивные формы можно использовать, когда вы используете реактивные шаблоны в вашем приложении, и формы являются ключевой частью вашего приложения. Эти формы являются масштабируемыми, надежными и проверяемыми.
Шаблонно-управляемые формы используются для добавления простых форм, например, страницы регистрации. Они не так масштабируемы, как реагирующие формы, и их следует использовать, только если ваши требования к форме просты и минимальны.
Вопрос: Как метаданные представлены в угловых?
Ответ: Метаданные представляются с использованием декораторов, таких как декораторы классов, декораторы свойств, декораторы методов, декораторы свойств. Пример, @Component, @NgModule и т. Д.
Вопрос: Что такое декораторы классов в Angular?
Ответ: Класс-декоратор содержит метаданные подходящего типа класса. Он появляется непосредственно перед определением класса и объявляет класс определенного типа. Некоторые декораторы классов — @Component, @NgModule, @Pipe, @Directive, @Injectable.
Вопрос: Объясните разницу между аннотациями и декораторами в угловых
Ответ: Аннотации являются жестко закодированными функциями Angular и хранят в нем массив. Компилятор создает атрибут am аннотированного класса и создает экземпляр объекта с тем же именем, передавая метаданные конструктору.
Декораторы, с другой стороны, являются функциями, которые получают объект, который должен быть декорирован. После получения они могут свободно модифицировать объект так, как ему нравится. Декораторы реализованы компилятором TypeScript.
Вопрос: В чем разница между декораторами классов и декораторами полей классов?
Ответ: Декораторы классов появляются непосредственно перед определением класса, тогда как декораторы полей класса появляются непосредственно перед полем в определении класса. Примерами декораторов классов являются @Component, @NgModule и т. Д.… Примерами декораторов полей класса являются @Input, @Output и т. Д.
Вопрос: Что такое Package.json? Объясните свою цель
Ответ: С пакетом json становится легко управлять зависимостями проекта. Мы можем упомянуть такие детали, как версия, язык и т. Д. В package.json. Например, если в нашем проекте используется машинописный текст, мы можем упомянуть машинописный текст и его версию в package.json. Примерами являются metadata.json, tsconfig.json и т. Д.
Вопрос: Что представляет {{}} ? Для чего это используется? Показать пример
Ответ: двойные фигурные скобки представляют собой интерполяцию. Это специальный синтаксис. Angular превращает его в свойство привязки. Вы можете думать об этом как об альтернативе привязки свойств. Имя компонента написано во внутренних фигурных скобках. Во время выполнения имя заменяется фактическим строковым значением свойства. Например,
<h2> {{apptitle}} <img src="{{imgname}}" style="height:30px"> </h2>
Angular оценит и заменит apptitle и imgname их фактическими значениями.
Вопрос: Что означает представление [()]?
Ответ: Это представление для ngModel, используемое для двусторонней привязки данных. Он записывается как [(ngModel)] = «propertyvalue».
Вопрос: Что такое модуль начальной загрузки в Angular?
Ответ: корневой модуль, который вы загружаете для запуска приложения, называется модулем начальной загрузки. Каждое приложение Angular имеет модуль начальной загрузки. Он также называется AppModule. Модуль начальной загрузки упоминается в классе AppModule.
@NgModule ({объявления: [AppComponent], импорт: [BrowserModule, FormsModule, HttpClientModule], поставщики: [], начальная загрузка: [AppComponent]}) класс экспорта AppModule {}
Вопрос: поговорим о некоторых различиях между обещанием и наблюдаемым
Ответ:
| обещание | наблюдаемый |
| Выполняется сразу же после создания | Выполняется только при запуске подписки |
| Используется с предложением .then () | Имеет цепочку и подписку для обработки сложных приложений |
| Ошибки доводятся до детских обещаний | Централизованная и предсказуемая обработка ошибок с помощью метода subscribe () |
| Предоставляет только одно значение | Может предоставить несколько значений с течением времени |
Вопрос: Что такое одностраничное приложение? Чем он отличается от традиционных веб-технологий?
Ответ. В одностраничном приложении (SPA) поддерживается только домашняя страница (index.html), хотя URL-адрес постоянно меняется. Это быстрее и проще в реализации по сравнению с традиционными веб-технологиями. В традиционной технологии каждый раз, когда пользователь делает запрос, запрос передается на сервер. Это займет больше времени.
Вопрос: Какие существуют типы компиляций в Angular?
Ответ: два типа компиляций — AOT (опережая время) и JIT (точно вовремя).
Вопрос: Перечислите различия между компиляцией «точно в срок» (JIT) и компиляцией «опережающее время» (AOT)
Ответ: С JIT компиляция происходит во время выполнения в браузере. Это способ по умолчанию, используемый Angular. Команды, используемые для компиляции JIT:
ng build ng serve
При компиляции AOT компилятор компилирует код во время самой сборки. Команда CLI для компиляции —
ng build --aot ng server –aot
AOT больше подходит для производственной среды, а JIT — для локального развития.
Вопрос: Какой лучше из AOT и JIT?
Ответ: AOT уменьшает нагрузку и время загрузки приложения. Страницы также загружаются быстрее. Любые ошибки также отображаются во время самой сборки приложения. Следовательно, AOT является лучшим вариантом.
Вопрос: обсудите некоторые различия между Angular и Jquery. Какой из них наиболее подходит для сложного веб-сайта с множеством рабочих процессов?
Ответ:
| угловатый | JQuery |
| Фреймворк, основанный на TypeScript и JavaScript | Библиотека JS, которая поддерживает анимацию и манипулирование DOM |
| Возможна двусторонняя привязка данных | Двухстороннее связывание данных невозможно |
| Проверка формы может быть сделано | Нет опции для проверки формы |
| Поддерживает RESTful API | Нет поддержки для RESTful API |
Для сложного веб-сайта с несколькими рабочими процессами Angular более удобен и прост в разработке и обслуживании.
Вопрос: Что такое угловая библиотека? Можете ли вы создать свою собственную библиотеку в Angular?
Ответ: Angular library — это набор общих решений, которые другие разработчики собрали для повторного использования. Мы можем создать собственную библиотеку, используя Angular. Эти библиотеки могут быть опубликованы и предоставлены в виде пакетов npm. Библиотека должна быть импортирована в приложение.
Вопрос: Что вы знаете о пакете NPM?
Ответ: Компоненты, инфраструктура и CLI, используемые приложениями Angular, упакованы в пакеты npm. Пакеты Npm можно загрузить с помощью клиента CLI npm.
Вопрос: напишите пример кода для создания библиотеки
Ответ: Для этого вы можете использовать Angular CLI. Следующий набор команд генерирует новый библиотечный скелет —
ng new my-workspace --create-application=false cd my-workspace
ng generate library my-lib
Резюме
Если вы хотите изучать Angular или AngularJS, посмотрите несколько хороших учебников на Youtube. Есть еще много вопросов об интервью Angular и вопросов об интервью AngularJS, но этот список охватывает все основные и наиболее часто задаваемые понятия. Дайте нам знать в комментариях, если вы хотите, чтобы мы добавили вопросы из вашего личного опыта в этот список.
Дальнейшее чтение
Best of DZone: угловые уроки для начинающих и экспертов