Сервисы и dependency injection

Сервисы

Последнее обновление: 14.11.2023

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

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

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

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

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

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

Например, добавим в папкy src/app новый файл data.service.ts. Этот файл будет содержать код сервиса. Согласно условностям в названии файла после названия самого сервиса должна идти подстрока .service:

Сервисы в Angular и Typescript

Если название сервиса состоит из нескольких слов, которые начинаются с большой буквы, то в названии файла все эти слова пишутся с маленькой буквы и разделяются дефисами. Например, если сервис называется 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],

В итоге мы сможем и выводить данные и добавлять новые элементы через сервис:

Сервисы в Angular 17
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850