Ответы на вопросы на собеседование Основы AngularJS.
- Что такое AngularJS?
AngularJS - структурированный JavaScript-фреймворк с открытым исходным кодом для динамических web-приложений. Предназначен для разработки одностраничных приложений. Позволяет использовать HTML в качестве языка шаблонов, а так же расширять HTML-синтаксис, чтобы код вашего приложения выглядел кратко и лаконично. Его цель - расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.
- Какие преимущества использования AngularJS?
Некоторые из преимуществ AngularJS.
- Какие основные компоненти AngularJS ви знаете?
Основные компоненти Angular:
- область видимости (scope) - связующее звено между представлением и контроллером
- контроллер (controller) - поведение программы
- модель (model) - данные программы
- вид или представление (view) - то что видит пользователь
- директивы (directives) - расширение HTML-синтаксиса
- фильтры (filters) - форматируют данные в соответствии с региональными установками пользователя
- ижектор (injector) - собирает приложение
- модуль (module) - настраивает инжектор
- $ - пространство имен Angular
- Что такое AngularJS выражения? Отличие выражений AngularJS от выражений в JS.
Заманчиво думать о выражениях Angular как о JavaScript выражения, но это не совсем корректно, так как Angular не использует JavaScript eval() для вычисления выражений. Вы можете думать о выражениях Angular как о JavaScript выражения со следующими отличиями:
- Значение Атрибутов: значение всех свойств вычисляются в области видимости в отличие от JavaScript, где выражения вычисляются в глобальном window.
- Снисхождение: вычисление выражений лояльно к неопределенным и нулевым значениям, в отличие от JavaScript, где такие вычисления выдадут исключение NullPointerException.
- Последовательность действий не изменяется: в Angular нельзя использовать условные операторы, циклы и исключения.
- Фильтры: можно передать результат вычисления выражений через цепочку фильтров. Например, чтобы преобразовать объект даты в специфичный для данного региона понятный человеку формат.
- Что такое $scope в AngularJS?
$scope в AngularJS - ето область видимости, связующее звено между представлением и контроллером. Область видимости является объектом, относящимся к модели приложения. Это контекст выполнения выражений. Области расположены в иерархической структуре, имитирующей DOM-структуру приложения. Они могут отслеживать изменения выражений и распространять события.
- Что такое $rootScope в AngularJS?
$rootScope - это самый верхний уровень $scope - объекта, от которого создаются все остальные объекты области видимости. После того, как Angular начинает рендер приложения, фреймворк создает $rootScope - объект, и все дальнейшие привязки и логика вашего приложения добавляют новые $scope - объекты, которые являются детьми $rootScope. Как правило, мы не трогаем $rootScope, но мы можем пользоваться этим уровнем для коммуникации между разними областями данных.
- Что такое директива (directive) в AngularJS? Назовите несколько основных директив.
Директива - атрибут или элемент, который дополняет существующий элемент DOM или представляет собой многократно используемый компонент DOM - виджет.
Директивы описывают изменение поведения или преобразование DOM модели, связанное с пользовательским атрибутом, именем элемента, или css классом. Директивы позволяют расширить HTML-синтаксис в декларативной форме.
Angular поставляется с набором директив, полезных для создания веб-приложений, но может быть расширен так, чтобы превратить HTML в декларативный предметно-ориентированный язык (DSL).
Несколько основных директив: ngApp , ngController, ngRepeat, ngModel, ngBind.
- Какие есть типы использования директив в AngularJS?
В AngularJS есть четыре типа использования директив.
- в качестве собственного элемента DOM: <my-directive></my-directive>
- в качестве атрибута: <div my-directive></div>
- в качестве CSS-класса: <div class="my-directive: value"></div>
- в качестве комментария: <!-- directive: my-directive value -->
- Что такое сервис (service), в AngularJS?
Сервисы это функции, которые раньше выполнялись только на сервере. Angular же перенес их на клиентскую сторону. Сервисы в Angular - приложениях являются замещаемыми объектами, которые взаимодействуют друг с другом с помощью внедрения зависимости. Сервисы это singleton-ы, выполняющие какую-либо конкретную задачу, которая является общей для всех или конкретного веб-приложения.
- Что такое модуль (module) в AngularJS?
Модуль - представляет хранилище различной информации: директив, фильтров, контроллеров и т.д. При этом одно приложение может иметь несколько модулей. Например, разные модули могут представлять какую-либо специфическую функциональность.
Модули позволяют ассоциировать определенный участок html-страницы с приложением AngularJS. Модули также позволяют организовать и структурировать различные компоненты приложения AngularJS. Кроме того, модульность архитектуры приложения повышает тестируемость, и мы можем использовать различные части-модули приложения в других приложениях.
Для создания модуля используется метод angular.module(). Этот метод принимает три параметра, два из которых являются обязательных:
- Название модуля. Согласно соглашениям о наименовании модуль должен иметь суффикс App
- Набор других модулей в виде строкового массива, от которых данный модуль зависит
- Конфигурационные настройки модуля
- Что такое фильтр (filter) в AngularJS?
Фильтры в Angular форматируют данные для отображения пользователю. Например, имеется объект данных, который должен быть отформатирован в соответствии с языковыми настройками, прежде чем он будет показан пользователю. Можно передать выражения через цепочку фильтров.
Общий способ использования фильтров: {{expression | filter}}
- Что такое контролер (controller) в Angular?
В Angular контроллер является функцией JavaScript (типа/класса), использующейся для расширения экземпляров областей видимости, за исключением корневой области.
Для создания контроллера используется метод controller(name, constructor), который определен у объекта Module. Первый параметр передает имя контроллера, а второй - функцию, которая выполняет настройку контроллера. Эту функцию еще называют конструктором.
- Что катое провайдер (provider) в AngularJS?
Провайдер - это рецепт особого рода, позволяющий выполнить дополнительные настройки перед созданием экземпляров объектов. Для эффективной поддержки провайдеров, AngularJS разбивает жизненный цикл модуля на две фазы:
- фаза настройки: в течение этой фазы производится сбор и настройка всех рецептов;
- фаза выполнения: в течение этой фазы выполняется любая логика после создания экземпляров.
- Что катое шаблон в AngularJS?
Шаблон Angular является декларативной спецификацией, которая, наряду с информацией из модели и контроллером, влияет на то, что пользователь видит в браузере. Это статичный DOM, содержащий HTML, CSS, и специальные элементы и атрибуты Angular. Элементы и атрибуты заставляют Angular добавить поведение и преобразовать DOM-шаблон в динамический DOM.
- Что такое ижектор (injector) в AngularJS?
Инжектор - это надстройщик всех сервисов. Для каждого Angular - приложения существует один и только один инжектор. Инжектор позволяет находить экземпляры объектов по их именам. Инжектор поддерживает внутри себя кэш объектов, таким образом несколько вызовов поиска какого-либо объекта вернут один и тот же экземпляр. Если инжектор ничего не находит, он просит фабрику создать новый экземпляр.
- Для чего нужен сервис $ location?
Сервис $location разбирает URL в адресной строке браузера (по ссылке window.location) и делает URL доступным для приложения. Изменения в URL в адресной строке отражаются в сервисе $location и изменения в $location отражаются в адресной строке браузера.
Сервис $location:
- Предоставляет доступ к текущему URL в адресной строке браузера, так что вы можете
o Следить и наблюдать за URL.
o Изменять URL.
- Синхронизирует URL с браузером, когда пользователь
o Изменяет адресную строку.
o Щелкает по кнопкам вперед/назад (или перемещается по истории браузера).
o Щелкает по ссылкам.
- Представляет объект URL в виде набора методов (протокол, хост, порт, путь, поиск, хэш).
- Какие CSS классы предоставляються для оформления форм?
Для оформления форм так же, как и элементов управления, ngModel добавляется такие CSS классы:
- ng-valid
- ng-invalid
- ng-pristine
- ng-dirty
- Что такое Компилятор, на какие фазы делятся фазы компиляции angular приложения.
Компилятор - это angular-сервис, который сканирует DOM в поисках специальных атрибутов. Процесс компиляции делится на две фазы:
- Компиляция: просмотр DOM и подготовка всех директив. Результатом этой фазы является функция линковки.
- Связывание: слияние директив и их областей видимости для получения динамического вида. Любые изменения модели в области видимости моментально отображаются в представлении, а любые взаимодействия пользователя с представлением обновляют модель. Таким образом, модель, хранящаяся в области видимости, становится единственным «актуальным источником» в приложении.
- Опишите MVC компоненты в контексте AngularJS?
MVC компоненты в Angular:
- Model - модель, это данные из свойств области видимости; области видимости связаны с DOM.
- View - шаблон (HTML с привязками данных) из которого генерируется представление.
- Controller - директива ngController, определяющая класс контроллера; этот класс имеет методы и типичные выражения для отражения бизнес-логики приложения.
- Опишите директиву ng-app?
Директива ng-app используетса для автозагрузки приложения. Даная директива может быть использована только один раз в одном HTML документе. Директива обозначает корень приложения и обычно располагается в корне страницы.
- Опишите директиву ng-model?
Директива ng-model указывает Angular, что необходимо двухсторонее связывание данных. Что всегда применяется в директивах input, select, textarea. Можно легко писать собственные директивы, используя в них ng-model.
ng-model отвечает за:
- связывание вида с моделью при использовании с другими директивами, такими как input, textarea или select
- реализует поведение для проверки ввода (например, required, number, email, url)
- определяет состояние элементов управления (valid/invalid, dirty/pristine, validation errors)
- устанавливает требуемый css-класс для элемента (ng-valid, ng-invalid, ng-dirty, ng-pristine)
- регистрирует элемент управления в родительской директиве form
- Опишите директиву ng-bind?
Директива ng-bind говорит Angular заменить содержимое специального HTML-элемента значением заданного выражения и обновлять его содержимое при изменении значения выражения.
Как правило, ng-bind не используется явно, вместо этого используется выражение в двойных фигурных скобках, {{ expression }} которое имитирует предыдущую возможность.
Однако первый сценарий предпочтительнее, т.к. использование ng-bind, в отличие от привязки с помощью {{ expression }} не выводится в браузер перед компиляцией. Так как ng-bind является атрибутом элемента, то он не отображается в браузере и делает привязку невидимой для пользователя во время загрузки.
Альтернативным решением проблемы является использование директивы ng-cloak.
- Опишите директиву ng-controller?
Директива ng-controller назначает поведение области видимости. Это ключевой аспект поддержки в Angular шаблона Модель-Вид-Контроллер.
- Опишите директиву ng-init?
Директива ng-init выполняет код инициализации перед построением шаблона во время начальной инициализации приложения.
- Опишите директиву ng-repeat?
Директива ng-repeat создает экземпляры по шаблону для каждого элемента коллекции. Каждый экземпляр шаблона получает собственную область видимости, в которой создаются переменные, имеющиеся в текущем элементе коллекции и в $index устанавливается индекс или ключ элемента.
очень помогло для подготовки к собеседованию! спасибо!
ОтветитьУдалитьСпасибо! Было очень полезно!
ОтветитьУдалить