Tworzenie serwisu w Angular

Zacznijmy naukę o serwisach od stworzenia własnego. W tym celu w folderze test/src/app utwórzmy plik data.service.ts. Niech nasz serwis odpowiada za wyświetlanie niektórych danych na ekranie.

Stwórzmy klasę dla naszego serwisu:

data.service.tsexport class DataService {
  
}

Teraz potrzebujemy dekoratora Injectable. Jego zastosowanie pozwoli na to, aby klasę serwisu można było wstrzykiwać do klasy komponentu. O wstrzykiwaniu porozmawiamy w następnej lekcji. A teraz zaimportujmy potrzebny dekorator:

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

Zastosujmy go do naszej klasy:

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

Teraz sprawmy, aby w naszej klasie znalazły się jakieś dane. Zwykle w aplikacjach Angular dane są ładowane z serwera, ale my w celach edukacyjnych będziemy używać tablicy. Stwórzmy ją w prywatnej właściwości:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

Napiszmy teraz metodę do pobierania danych:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

Nasz serwis jest gotowy. W następnej lekcji będziemy podłączać go do klasy komponentu.

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]