Назад
Посмотреть правильные ответы
Тест по Angular: привязка данных, директивы, паттерны проектирования в Angular.
Тест содержит несколько вопросов по теоретическим сведениям языка JavaScript, вопросы по поводу директив в Angular, привязки данных
и передачи данных от родительского компонента дочернему. Приводятся примеры их использования. Также есть вопросы, включающие работу
с библиотекой ReactiveX и вопросы по паттернам проектирования, используемым в этой библиотеке.
Для написания теста использовались материалы из книг Адам Фримен
«Angular для профессионалов» ,
Яков Файн, Антон Моисеев
«Angular и TypeScript. Сайтостроение для профессионалов»
.
В тесте 20 вопросов.
1). (из 20): JavaScript является языком у которого:
Выберите несколько правильных ответов
а) статическая типизация;
б) динамическая типизация;
в) сильная типизация;
г) слабая типизация;
д) явная типизация;
е) неявная типизация;
ж) абсолютная типизация;
з) относительная типизация;
2). (из 20): Замыкание в JavaScript – это:
Выберите несколько правильных ответов
а) область видимости, которая формируется во время компиляции на этапе прохода исполнения;
б) функция, у которой есть доступ к своей внешней функции по области видимости, даже после того, как внешняя функция прекратилась;
в) проход компиляции, при котором интерпретатор просматривает код в поисках объявлений переменных и функций и поднимает эти объявления в верхнюю часть текущей области видимости;
г) «синтаксический сахар» для JavaScript, который вводит более короткий синтаксис и который позволяет писать чистый и лаконичный код;
д) шаблон проектирования, который может быть полезен в том случае, если нужно замаскировать некоторые переменные и предотвратить доступ к ним из конкретных областей видимости;
е) комбинация функции и лексического окружения, в котором эта функция была объявлена;
3). (из 20): Укажите каким образом в языке JavaScript реализовано наследование классов:
Выберите единственный правильный ответ
а) с помощью ключевого слова prototype;
б) с помощью метода Object.create();
в) с помощью ключевого слова extends;
г) с помощью метода constructor();
д) с помощью ключевого слова new;
4). (из 20): Пусть имеется файл main.ts (см. рис. 2.1)в приложении Angular и файл app.module.ts (см. рис. 2.2). Укажите, какой именно компонент будет использоваться в качестве основного при загрузке приложения Angular, и какое именно свойство используется для указания этого компонента.
Выберите несколько правильных ответов
а) свойство environment;
б) компонент AppComponent;
в) свойство bootstrap;
г) компонент AppModule;
д) свойство imports;
е) компонент NgModule;
ж) компонент BrowserModule;
з) свойство declarations;
5). (из 20): Укажите правильные утверждения по поводу директив в Angular 8:
Выберите несколько правильных ответов
а) директива – это обычный класс, написанный на typescript, к которому применяется декоратор Directive;
б) ngSwitch – это атрибутивная директива;
в) директивы предназначены для изменения структуры DOM-дерева;
г) директивы предназначены для изменения внешнего вида или поведения по-умолчанию элемента DOM-дерева;
д) ngFor – это структурная директива;
е) директивы предназначены для форматирования данных в таблице CSS;
ж) ngClass – это структурная директива;
6). (из 20): Директива в Angular может содержать:
Выберите несколько правильных ответов
а) всегда только один Input и один selector;
б) несколько Input’ов и один selector;
в) несколько селекторов, перечисленных через запятую;
г) в селекторе элемент input c атрибутами как целевой элемент HTML;
7). (из 20): Декоратор HostListener применяется в случаях, если:
Выберите единственный правильный ответ
а) необходимо связать события DOM и методы директивы для изменения стандартного поведения DOM-элемента при возникновении пользовательского события;
б) необходимо связать свойство класса со свойством DOM-элемента, к которому применяется директива для изменения стандартного вида DOM-элемента;
в) нужно синхронизировать значение полей форм и свойства модели форм для каждого элемента управления формы;
г) необходимо повторение блока контента в заданной позиции, что может быть полезно для генерирования одного контента в нескольких местах с предотвращением дублирования;
8). (из 20): Необходимо указать директиву, компонент и модуль приложения Angular (см. рис. 2.6а-г), решающих следующую задачу: вывести на экран содержимое (см. рис. 2.3). При этом, при наведении мыши на словосочетание «Работа с директивами!» должен изменяться размер шрифта и цвета (font-size:30px, цвет:красный) (рис. 2.4). При наведении мыши на второй абзац «Тесты по Angular» также должен изменяться размер шрифта и цвета (font-size:30px, цвет:голубой) (рис. 2.5). Если курсор мыши находится за пределами указанных текстовых блоков, то их стилизация возвращается к первоначальному виду (font-size:18px, цвет:зелёный)(рис. 2.3).
Выберите единственный правильный ответ
а) 2.6-а;
б) 2.6-б;
в) 2.7-в;
г) 2.8-г;
9). (из 20): Укажите правильные утверждения, касающиеся привязки данных в Angular:
Выберите несколько правильных ответов
а) в Angular существует четыре односторонние привязки данных;
б) в Angular существует две двухсторонних привязки данных;
в) в Angular существует три односторонних привязки данных;
г) в Angular существует одна двусторонняя привязка данных;
д) в Angular существует три двухсторонних привязки данных;
10). (из 20): Укажите правильные формы привязки данных в Angular:
Выберите несколько правильных ответов
а) привязка метода компонента к событию в DOM;
б) привязка значения элемента HTML к свойству компонента Angular;
в) привязка свойства элемента DOM к значению компонента, при этом изменения свойства влечёт изменение значения компонента и наоборот;
г) привязка элемента DOM к значению компонента Angular;
д) привязка свойства элемента DOM к значению компонента Angular;
е) привязка значения компонента Angular к событию в DOM;
ж) привязка элемента DOM к значению компонента, при этом изменение элемента DOM приводит к изменению значения компонента и наоборот;
з) привязка значения элемента HTML к методу компонента, при этом изменение значения элемента HTML приводит к изменению метода компонента и наоборот;
11). (из 20): Укажите какой тип привязки данных используется в следующем фрагменте кода (см. рис. 2.7):
Выберите единственный правильный ответ
а) двусторонняя привязка;
б) привязка свойств (атрибутов) html-элемента;
в) привязка событий;
г) строчная интерполяция;
д) привязка метода компонента;
12). (из 20): Пусть имеется директива и компонент в Angular приложении (см. рис. 2.8). Какой вид будет иметь страница сразу после загрузки приложения (см. рис. 2.9)?
Выберите единственный правильный ответ
а) рис 2.9а;
б) рис 2.9б;
в) рис 2.9в;
г) рис 2.9г;
д) рис 2.9д;
е) рис 2.9е;
13). (из 20): Пусть есть Angular-приложение с именем «AngularApp», использующее Angular 9 и с установленной библиотекой Bootstrap версии v4.0.0-alpha.4. Для подключения к данному приложению Bootstrap необходимо (укажите правильно последовательность действий, см. рис. 2.10):
Выберите единственный правильный ответ
а) II →IV;
б) I→VI→V;
в) I→III→IV;
г) III→V;
д) III→VI→V;
е) II→V;
14). (из 20): Укажите верные утверждения относительно RxJS:
Выберите несколько правильных ответов
а) RxJS - это Javascript библиотека для работы с синхронными потоками данных;
б) RxJS – это реализация библиотеки ReactiveX в языке JavaScript;
в) RxJS - это Javascript библиотека для работы с асинхронными потоками данных;
г) RxJS - это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями;
д) RxJS – это поведенческий шаблон проектирования, который реализует у класса механизм, позволяющий объекту этого класса получать оповещения об изменении состояния других объектов и тем самым наблюдать за ними;
е) RxJS - это название механизма, который используется в Angular для программирования асинхронных потоков данных в декларативном стиле;
15). (из 20): Пусть имеется следующая структура папок в Angular –приложении с именем «Auction» (рис. 2.11). Содержимое файла product-service.ts представлено на рис. 2.12. Содержимое файла product-item.ts представлено на рис. 2.13. Укажите, как правильно импортировать класс Product из файла product-service.ts в компонент product-item.ts (2-ая строка на рис. 2.13)?
Выберите несколько правильных ответов
а) import {Product} from '~/services/product-service';
б) import {Product} from './services/product-service';
в) import {Product} from '../services/product-service';
г) import {Product} from '../../services/product-service';
д) import {Product} from '~/../../services/product-service';
е) import {Product} from '/services/product-service';
ж) import {Product} from '././services/product-service';
з) import {Product} from '~/././services/product-service';
и) import {Product} from 'd:/Angular_App/auction/app/services/product-service';
к) import {Product} from '~/auction/app/services/product-service';
16). (из 20): C помощью декоратора @Input() можно:
Выберите единственный правильный ответ
а) передать данные из родительского компонента дочернему, сразу на несколько уровней иерархии;
б) передать данные из родительского компонента дочернему, но только на один уровень иерархии;
в) имитировать возникновение события ввода в дочернем компоненте и передать введённые данные родительскому компоненту;
г) передать данные из дочернего компонента родительскому , но только на один уровень иерархии;
д) передать данные из дочернего компонента родительскому , сразу на несколько уровней иерархии;
е) имитировать возникновение события ввода в родительском компоненте и передать введённые данные дочернему компоненту;
17). (из 20): Укажите пункты, которые необходимо выполнить при передаче данных из родительського компонента в дочерний:
Выберите несколько правильных ответов
а) в дочернем компоненте необходимо создать свойство с помощью декоратора @Input. В это свойство будем получать данные;
б) в родительском компоненте необходимо создать свойство с помощью декоратора @Output. Из этого свойства будем передавать данные в дочерний компонент;
в) в родительском компоненте необходимо создать свойство, которое будем передавать;
г) при вызове дочернего компонента, используя привязку свойства элемента DOM к значению компонента Angular, привязываем к свойству дочернего компонента данные из свойства родительского компонента;
д) при вызове дочернего компонента, используя привязку элемента DOM к значению компонента Angular, привязываем к элементу DOM родительского компонента данные из свойства дочернего компонента;
е) в дочернем компоненте необходимо подключить модуль import {Input} from '@angular/core';
ж) в родительском компоненте необходимо подключить модуль import {Output} from '@angular/core';
18). (из 20): Для какого паттерна проектирования характерен следующий фрагмент кода (см. 2.14):
Выберите единственный правильный ответ
а) observer – наблюдатель;
б) singleton – одиночка;
в) factory – фабрика;
г) decorator – декоратор;
д) module – модульный;
19). (из 20): Укажите основное назначение сервисов в Angular:
Выберите несколько правильных ответов
а) хранение данных в памяти;
б) хранение глобального состояния приложения;
в) программирование асинхронных потоков данных в декларативном стиле;
г) инкапсулирование бизнес-логики для решения проблемы повторения кода, если необходимо выполнить одну и ту же задачу в разных компонентах и классах;
д) получения данных из какого-либо источника данных;
е) преобразование данных прямо в HTML-шаблоне;
ж) изменение внешнего вида или поведения DOM-элемента;
з) изолирование логической объединяющей структуры для компонентов, директив и фильтров;
20). (из 20): Укажите правильные утверждения, характерные для паттерна Observer в JavaScript:
Выберите несколько правильных ответов
а) паттерн Observer переводится как Издатель-Подписчик;
б) паттерн Observer переводится как Наблюдатель;
в) идея паттерна Observer заключается в создании зависимости типа один ко многим;
г) идея паттерна Observer заключается в создании зависимости типа многие ко многим;
д) паттерн Observer применяется тогда, когда необходимо передать запрос на выполнение одному из нескольких объектов, точно не определяя, какому именно объекту;
е) для реализации паттерна Observer в Angular используется сторонняя библиотека (RxJS);
ж) паттерн Observer применяется тогда, когда необходимо добавить новые состояния к классам, при этом не изменяя их общую структуру;
з) паттерн Observer характеризуется отсутствием прямой связи между объектами Subject и Observer;
и) паттерн Observer характеризуется наличием прямой связи между объектами Subject и Observer;
к) паттерн Observer характеризуется тем, что существует один наблюдаемый объект и множество наблюдателей. При изменении наблюдаемого объекта автоматически происходит оповещение всех наблюдателей;