Palvelun luominen Angularissa

Aloitetaan palveluiden tutkiminen luomalla oma. Tee tätä varten kansioon test/src/app tiedosto data.service.ts. Olkoon palvelumme vastuussa joidenkin tietojen näyttämisestä näytöllä.

Tehdään luokka palvelullemme:

data.service.tsexport class DataService {
  
}

Nyt tarvitsemme dekoraattorin Injectable. Sen käyttö mahdollistaa sen, että palveluluokan voi injektoida komponenttiluokkaan. Puhumme injektoinnista seuraavalla oppitunnilla. Tuodaan nyt tarvittava dekoraattori:

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

export class DataService {
  
}

Käytetään sitä luokassamme:

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

@Injectable()
export class DataService {
  
}

Tehdään nyt niin, että luokassamme on joitain tietoja. Yleensä Angular-sovelluksissa tiedot ladataan palvelimelta, mutta opetustarkoituksissa käytämme taulukkoa. Tehdään se yksityiseen ominaisuuteen:

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

Kirjoitetaan nyt metodi tietojen hakemiseksi:

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

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

Palvelumme on valmis. Seuraavassa oppitunnissa liitämme sen komponenttiluokkaan.

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