Kreiranje servisa u Angular-u

Hajde da počnemo učenje o servisima kreiranjem našeg sopstvenog. Za ovo, u folderu test/src/app napravićemo fajl data.service.ts. Neka naš servis bude odgovoran za prikaz nekih podataka na ekranu.

Napravićemo klasu za naš servis:

data.service.tsexport class DataService {
  
}

Sada nam treba dekorator Injectable. Njegova primena će omogućiti da se klasa servisa može ubaciti (injektovati) u klasu komponente. O ubacivanju ćemo razgovarati u sledećoj lekciji. A sada importujmo potreban dekorator:

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

export class DataService {
  
}

Primenimo ga na našu klasu:

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

@Injectable()
export class DataService {
  
}

Sada hajde da napravimo da u našoj klasi postoje neki podaci. Obično u Angular aplikacijama podaci se učitavaju sa servera, ali mi ćemo u svrhe učenja koristiti niz. Napravićemo ga kao privatno svojstvo:

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

Sada napišimo metod za dobijanje podataka:

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

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

Naš servis je spreman. U sledećoj lekciji ćemo ga povezivati sa klasom komponente.

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