- •Билет 1
- •Билет 2
- •Структура приложения¶
- •Модуль¶
- •Компонент¶
- •Сервис¶
- •Директива¶
- •Билет 3
- •Билет 4
- •Билет 5
- •Билет 6
- •Билет 7
- •Билет 8
- •Билет 9
- •Билет 10
- •Привязка к сеттеру
- •Билет 12
- •Билет 13
- •Билет 14
- •Билет 15
- •Билет 16
- •Корневой уровень
- •Уровень модуля
- •Уровень компонента
- •Билет17 Не то
- •Билет 18
- •Билет 19
- •Билет 20
- •Билет 21
- •Билет 22
- •Билет 23
- •Билет 24
- •Заключение
- •Билет 25
- •Билет 26
- •Билет 27
- •Билет 28
- •Билет 29
- •Билет 30
Билет 6
Что такое модули? Для чего используются и какие решают задачи?
Angular модуль - это класс с декоратором @NgModule(), который служит изолирующей логической объединяющей структурой для компонентов, директив, фильтров и сервисов. Все перечисленные сущности определяются и конфигурируются с помощью @NgModule(). Angular приложение имеет модульную архитектуру и состоит, по крайней мере, из одного главного, или корневого, модуля. Все остальные относятся к второстепенным.
Модули Angular помогают разбивать приложение на части (модули), которые взаимодействуют между собой и представляют в конечном итоге целостное приложение. Иными словами, модуль — это упаковка или инкапсуляция части функционала приложения. Модули можно проектировать с учетом многократного использования, т.е. не зависящие от конкретной реализации приложения.
Корневой модуль в приложении Angular используется в качестве точки входа. Модуль- это класс, который декорирован при помощи @NgModule. Стандартный код модуля:
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
Всвойстве declarations мыобъявляемкомпоненты, которыесодержитнашмодуль. Компонентов может быть несколько, они объявляются через запятую (как в обычном JavaScript массиве). NgModule представляет функцию-декоратора, которая принимает объект, свойства которого описывают метаданные модуля. Наиболее важные свойства:
· declarations: классы представлений (viewclasses), которые принадлежат модулю. Angular имеет три типа классов представлений: компоненты (components), директивы (directives), каналы (pipes)
· exports: набор классов представлений, которые должны использоваться в шаблонах компонентов из других модулей
· imports: другие модули, классы которых необходимы для шаблонов компонентов из текущего модуля
· providers: классы, создающие сервисы, используемые модулем
· bootstrap: корневой компонент, который вызывается по умолчанию при загрузке приложения
Билет 7
Что такое пайпы? Для чего используются и какие решают задачи?
Angularpipe, или просто фильтр, нужен для преобразования данных прямо в HTML-шаблоне. Например, отображение даты и времени в желаемом формате или задание формата вывода числового значения.
В Angular имеется ряд встроенных фильтров, но также предусмотрена возможность создания собственных.
Рассмотрим пример использования встроенного date pipe.
date-pipe-example.component.ts
@Component({
selector: 'date-pipe-example',
template: `
<p>Transformed date: {{ exampleDate | date: 'dd.MM.yyyy' }}</p>
`
})
exportclassDatePipeExampleComponent {
exampleDate = newDate(2000, 12, 12)
}
Как видно из примера, наименование Angular pipe указывается после символа |, следующим за значением, которое необходимо преобразовать.
Ниже приведен список некоторых наиболее часто используемых встроенных Angular pipe:
date - преобразование даты;
number - преобразование числа;
uppercase (lowercase) - приведение строкового значения в верхний (нижний) регистр;
slice - используется для ограничения вывода информации, в качестве параметров принимает начало и конец интервала отображаемых данных, применяется совместно с директивой *ngFor.
Примериспользования slice.
slice-pipe-example.component.ts
@Component({
selector: 'slice-pipe-example',
template: `
<p *ngFor="let user of list | slice: 0:1">{{ user }}</p>
`
})
exportclassSlicePipeExampleComponent {
list = ['Jack', 'Alice', 'Michael']
}
Отсчет выводимых элементов, как и индекс, начинается с нуля.
К одному значению допустимо одновременное применение нескольких фильтров.
{{someString | pipe1 | pipe2 | pipe3 | ... }}
Встроенные фильтры подходят в основном для решения "базовых" задач. Поэтому часто требуется создавать собственные (Angular custom pipe).
Рассмотрим на примере создание cutTextPipe, который обрезает слово, если его длина превышает заданное количество символов, и добавляет в конце многоточие.
cut-text.pipe.ts
@Pipe({ name: 'cutText' })
exportclassCutTextPipeimplementsPipeTransform {
transform(value: string, maxLength: number = 200): string {
if (value.length>maxLength) return`${value.substring(0, maxLength)}...`
elsereturnvalue
}
}
Angularpipe - этокласс, которыйпредваряетсядекоратором @Pipe() иреализуетинтерфейс PipeTransform соднимединственнымметодом transform().
В примере декоратору в качестве аргумента передается объект со свойством name, значение которого является именем фильтра. Именно по нему он будет вызываться в HTML-шаблоне.
Метод transform() в качестве первого аргумента принимает преобразуемое значение, далее - параметры в порядке их передачи в HTML-шаблоне. Метод обязательно должен возвращать итоговое значение.
Как и компоненты, фильтры должны объявляться в свойстве declarations того модуля, в котором они будут использоваться.
Pure & Impure Angular pipes
Различают два типа фильтров: pure (по умолчанию) и impure.
Отличаются они по принципу работы механизма отслеживания изменений.
Для первого типа обновление выражения происходит только при его прямом изменении или смены ссылки, если речь идет о массивах и объектах.
Выражение с примененным к нему фильтром второго типа (impure) будет обновляться при любом изменении данных, а также в ответ на любое фиксирующееся в приложении событие, например, клик мыши.
Использование фильтров второго типа требуется в том случае, если фильтру передается массив или объект, изменение структуры или данных которых должно инициировать повторную обработку.
Для создания impure pipe в объекте, передаваемому декоратору, необходимо указать значение свойства pure false.
@Pipe({
name: 'cutText',
pure: false
})