This tutorial on creating and using Services in Angular 8 app is in continuation of our Angular 8 Tutorial Series and if you have not read the previous parts of the tutorial, it is recommended that you go through them first.
Think of Services in Angular 8 as reusable entities which are instantiated once and can be used by multiple components, so following are the scenarios where we may need to use services:
InventionsHub
project.
In the above section, we got the basic idea of why we may need Services in an Angular 8 app. In the following sections, lets walk through the steps involved in creating and using a Service. Let's add a Service to our InventionsHub
project
@angular/cli
it's easy to create a new Service , just type the following command in your terminal:
ng g service inventions
inventions.service.ts
& inventions.service.spec.ts
and as per the angular naming convention, .spec.ts
are the files used to write test cases which we're not covering here. So when you open the inventions.service.ts
file , it should look something like the following.
// inventions.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class InventionsService {
constructor() {
}
}
inventions.component.ts
to its own file inventions.class.ts
, first let's create a file inventions.class.ts
and add following code to it.
// add a new class
// inventions.class.ts
// remove this code from app.component.ts
export class Invention {
name : String ;
inventor : String ;
year : String;
}
inventions.service.ts
and add the following code to it.
// inventions.service.ts
// import the requied dependencies
import { Injectable } from '@angular/core';
// import Invention class so we can use it here
import { Invention } from './inventions.class';
// injectable is decorator used with angular services
@Injectable()
export class InventionsService {
// declare rawInventions array of type Invention to instantiate our mock inventions
rawInventions : Invention[] = [
{
name : 'Java',
inventor : 'James Ghosling',
year : '1995'
} ,
{
name : 'Python',
inventor : 'Guido van Rosum',
year: '1991'
} ,
{
name : 'C++',
inventor : 'Bjarne Stroustrup',
year : '1983'
}
]
constructor() {
}
// define a getInventions() method to get the default inventions
getInventions() : Invention[] {
return this.rawInventions;
}
}
getInventions()
method is called.
We're ready to consume the service we just created in our inventions.component.ts
Just open the file inventions.component.ts
in your editor and ensure that it looks like the following:
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Invention } from './inventions.class';
// import the service class
import { InventionsService } from './inventions.service';
// add service to the providers array
@Component({
selector: 'app-inventions',
templateUrl: './inventions.component.html',
styleUrls: ['./inventions.component.css'] ,
providers: [ InventionsService ]
})
export class InventionsComponent implements OnInit {
nameModel : String;
inventorModel : String;
yearModel : String;
inventions : Invention[];
constructor( private inventionsService : InventionsService ) {
this.nameModel = '';
this.inventorModel = '';
this.yearModel = '';
// consuming the service method getInventions() to fetch default inventions
this.inventions = inventionsService.getInventions();
}
ngOnInit() {
}
createInvention(){
let newInvention : Invention = {
name: this.nameModel ,
inventor : this.inventorModel ,
year : this.yearModel
};
this.inventions.push( newInvention );
this.nameModel = this.yearModel = this.inventorModel = '';
}
}
InventionsHub
app.
In this part of the tutorial , we learned the following