Билет 4

Что такое сервисы? Для чего используются и какие решают задачи?

За общение с сервером отвечает отдельная сущность – сервисы. Сервисы — это так же обычные классы. Сервис предлагается как готовый ресурс, который реализует некоторые дополнительные возможности, необходимые всем разнородным программам для технической поддержки, нужной потенциальным пользователям. Как правило, описания сервисов содержат в себе информацию об их возможностях, интерфейсах, поведении и характеристиках.

Сервисы в Angular представляют довольно широкий спектр классов, которые выполняют некоторые специфические задачи, например, логгирование, работу с данными и т.д.

В отличие от компонентов и директив сервисы не работают с представлениями, то есть с разметкой html, не оказывают на нее прямого влияния. Они выполняют строго определенную и достаточно узкую задачу.

Стандартные задачи сервисов:

1. Предоставление данных приложению. Сервис может сам хранить данные в памяти, либо для получения данных может обращаться к какому-нибудь источнику данных, например, к серверу.

2. Сервис может представлять канал взаимодействия между отдельными компонентами приложения

3. Сервис может инкапсулировать бизнес-логику, различные вычислительные задачи, задачи по логгированию, которые лучше выносить из компонентов. Тем самым код компонентов будет сосредоточен непосредственно на работе с представлением. Кроме того, тем самым мы также можем решить проблему повторения кода, если нам потребуется выполнить одну и ту же задачу в разных компонентах и классах

Билет 5

Что такое директивы в Angular? Для чего используются и какие решают задачи?

рективы в Angular – определенный набор инструкций, который применяется при рендеринге html кода. Angular директивы используются для изменения внешнего вида или поведения DOM-элемента.

Выделяют три типа директив:

1. С собственным шаблоном, или по-другому компоненты (являются директивами);

2. Структурные, которые изменяют структуру DOM-дерева при помощи удаления и изменения html-элемента;

3. Атрибутивные, которые изменяют внешний вид или поведение элемента DOM-дерева к которому применяются. Компоненты уже были разобраны ранее, поэтому в этой и следующей главах будут рассмотрены только структурные директивы и директивы атрибуты.

СТРУКТУРНЫЕ К встроенным структурным директивам относятся: *ngIf, *ngFor, *ngSwitch и др. Все Angular директивы этой группы предваряются символом *.

*ngIf

*ngIf добавляет или удаляет элемент из DOM-дерева в зависимости от истинности переданного выражения (true - добавление, false - удаление).

<div *ngIf="true">This will be added to the DOM</div>

<div *ngIf="false">This will be removed from the DOM</div>

*ngFor

*ngFor используется для визуализации массива данных. Директива применяется к блоку HTML-кода, определяющего, как должны отображаться данные элемента массива. Далее Angular использует этот HTML как шаблон для всех последующих элементов в массиве.

Предположим, имеется следующий массив данных:

cars: any[] = [

{name: 'Audi', year: 2018},

{name: 'BMW', year: 2015},

{name: 'Mercedes', year: 2016}

];

Отображение списка в шаблоне выглядит так:

<ul>

<li *ngFor="let car of cars; let i = index">

{{i + 1}}. {{car.name}}, {{car.year}}

</li>

</ul>

В результате будет сгенерирован следующий HTML-код:

<ul>

<li>1. Audi, 2018</li>

<li>2. BMW, 2015</li>

<li>3. Mercedes, 2016</li>

</ul>

Angular *ngFor поддерживает ряд шаблонных переменных:

index - хранит порядковый номер текущего элемента массива, отсчет начинается с 0;

first - true, если элемент первый в массиве;

last - true, если элемент последний в массиве;

even - true, если элемент четный;

odd - true, если элемент нечетный.

ngSwitch

ngSwitch эмулирует работу оператора switch применительно к шаблонам.

car: string = 'Audi'

<div [ngSwitch]="car">

<p *ngSwitchCase="'Audi'">This is Audi</p>

<p *ngSwitchCase="'BMW'">This is BMW</p>

<p *ngSwitchCase="'Mercedes'">This is Mercedes</p>

<p *ngSwitchDefault>Car is undefined</p>

</div>Angular директивы *ngSwitchCase и *ngSwitchDefault отображают указанный шаблон в зависимости от значения переданной ngSwitch переменной или шаблон по умолчанию, если ни один из описанных случаев не соответствует реальному значению.

АТРИБУТИВНЫЕ

ngStyle

[ngStyle] принимает объект, в котором ключами служат наименования CSS-свойств, а их значениями - возможные значения соответствующих CSS-свойств.

elementStyles: any = {

color: 'red',

opacity: 0.5

}

<div [ngStyle]="elementStyles">Some text</div>

Объект стилей можно определить прямо в шаблоне, причем можно использовать выражения и условия.

<div [ngStyle]="{color: 5 < 10 ? 'green' ? 'red' }">Some text</div>

ngClass

[ngClass] также принимает объект, но ключами здесь служат наименования классов, а значениями - выражения типа Boolean. Если выражение истинно, класс будет добавлен к списку уже имеющихся классов.

Angular директива [ngClass] не заменяет уже установленное значение.

<div [ngClass]="{'label': true}">Some text</div>

Также директива может принимать массив со списком классов, которые необходимо применить к элементу.

<div [ngClass]="['label', 'label-small']">Some text</div>

Пример

import { Component} from '@angular/core';

@Component({

selector: 'my-app',

template: `<div [ngClass]="{verdanaFont:true}">

<h1>Hello Angular 8</h1>

<p [ngClass]="{segoePrintFont:true}">

Angular 8 представляетмодульнуюархитектуруприложения

</p>

</div>`,

styles: [

`.verdanaFont{font-size:13px; font-family:Verdana;}

.segoePrintFont{font-size:14px; font-family:"Segoe Print";}`

]

})

exportclassAppComponent { }

В секции styles у компонента определены два класса, которые устанавливают различные стилевые свойства шрифта: verdanaFont и segoePrintFont.

В шаблоне для привязки класса к элементу применяется директива [ngClass]="{verdanaFont:true}". Эта директива принимает js-объект, в котором ключи - это названия классов. Этим названиям присваиваются булевые значения true (если класс применяется) и false (если класс не применяется). То есть в данном случае класс verdanaFont будет применяться ко всему блоку div.

Однако в блоке div есть параграф, и мы, допустим, хотим, чтобы к этому параграфу применялся другой класс. А по умолчанию вложенный параграф унаследует стили от родительского блока div и также применяет класс segoePrintFont, в котором можно переопределить унаследованные стили.