Сервисы в Angular представляют довольно широкий спектр классов, которые выполняют некоторые специфические задачи, например, логгирование, работу с данными и т.д.
В отличие от компонентов и директив сервисы не работают с представлениями, то есть с разметкой html, не оказывают на нее прямого влияния. Они выполняют строго определенную и достаточно узкую задачу.
Стандартные задачи сервисов:
Предоставление данных приложению. Сервис может сам хранить данные в памяти, либо для получения данных может обращаться к какому-нибудь источнику данных, например, к серверу.
Сервис может представлять канал взаимодействия между отдельными компонентами приложения
Сервис может инкапсулировать бизнес-логику, различные вычислительные задачи, задачи по логгированию, которые лучше выносить из компонентов. Тем самым код компонентов будет сосредоточен непосредственно на работе с представлением. Кроме того, тем самым мы также можем решить проблему повторения кода, если нам потребуется выполнить одну и ту же задачу в разных компонентах и классах
Например, добавим в папкy src/app новый файл data.service.ts. Этот файл будет содержать код сервиса. Согласно условностям в названии файла после названия самого сервиса должна идти подстрока .service:
Если название сервиса состоит из нескольких слов, которые начинаются с большой буквы, то в названии файла все эти слова пишутся с маленькой буквы и разделяются дефисами. Например,
если сервис называется SpecialSuperHeroService
, то файл сервиса будет называться special-super-hero.service.ts.
Определим в этом файле следующий сервис:
export class DataService{ private data: string[] = [ "Tom", "Bob", "Sam"]; getData(): string[] { return this.data; } addData(name: string){ this.data.push(name); } }
В сервисе определен массив данных и методы для работы с ним. В реальном приложении эти данные можно получать с сервера или из какого-либо внешнего хранилища.
Теперь определим код компонента:
import { Component} from "@angular/core"; import { FormsModule } from "@angular/forms"; import {DataService} from "./data.service"; @Component({ selector: "my-app", standalone: true, imports: [FormsModule], providers: [DataService], template: `<div> <div><input [(ngModel)]="name" /> <button (click)="addItem(name)">Добавить</button> </div> <ul> @for(item of items; track $index){ <li>{{item}}</li> } </ul> </div>` }) export class AppComponent{ items: string[] = []; name: string = ""; constructor(private dataService: DataService){} addItem(name: string){ this.dataService.addData(name); } ngOnInit(){ this.items = this.dataService.getData(); } }
Чтобы задействовать сервис в компоненте, его не только надо импортировать:
import {DataService} from "./data.service";
Но также необходимо его добавить в коллекцию providers компонента:
providers: [DataService]
Все используемые сервисы добавляются в коллекцию providers. Тем самым определяется провайдер сервиса, который будет использоваться для его получения. И после этого мы сможем задействовать встроенный в Angular механизм dependency injection и получить объект сервиса в конструкторе компонента и затем использовать по необходимости:
constructor(private dataService: DataService){}
Для загрузки данных реализуется метод ngOnInit()
интерфейса OnInit, который вызывается после конструктора.
И так как мы используем директиву ngModel для работы с элементами формы, то нам надо подключить модуль FormsModule:
import { FormsModule } from "@angular/forms"; @Component({ imports: [FormsModule],
В итоге мы сможем и выводить данные и добавлять новые элементы через сервис: