Коришћење сервиса у Angular-у

У претходној лекцији смо креирали сопствени сервис DataService. Хајде сада да га увеземо у компоненту:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // овде

У декоратору @Component у својству providers треба навести наш сервис:

@Component({
	.....
	providers: [ DataService ] // овде
})

Сада ћемо искористити специјални приступ, који се зове убризгавање зависности (dependency injection). Његова суштина се састоји у томе што у конструктору компоненте можемо проследити наш сервис као параметар и он ће аутоматски доспети у приватно својство наше компоненте. Погледајте у коду:

export class AppComponent {
	constructor(private dataService: DataService) { // убризгавамо зависност
		console.log(this.dataService); // сервис у приватном својству
	}
}

Убризгавање за наш сервис ради, јер sмо му раније применили декоратор Injectable.

Хајде сада у конструктору класе компоненте да добијемо податке из нашег сервиса, позивајући одговарајућу методу:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

Хајде да прикажемо добијене податке у темплејту компоненте:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Добијте артикле из вашег сервиса у компоненти и прикажите их у темплејту компоненте.

Направите у вашем сервису методу за додавање новог артикла. У компоненти направите дугме, по клику на које ће се додавати нови артикал.

Направите форму са два поља за унос и дугметом, по притиску на које ће се додавати нови артикл.