Angular 4 Tutorial

Part-7 Angular 4 Services

learn about creating and using services in Angular 4

getting started with angular

       
What we've learned so far
This tutorial on creating and using Services in Angular 4 app is in continuation of our Angular 4 Tutorial Series and if you have not read the previous parts of the tutorial , it is recommended that you go through them first.
  1. Part-1 :: Introduction
  2. Part-2 :: Angular 4 Project Structure
  3. Part-3 :: Angular 4 Components
  4. Part-4 :: Angular 4 Create Components
  5. Part-5 :: Angular 4 two way data binding
  6. Part-6 :: Angular 4 adding css bootstrap styles
Services in Angular 4
Think of Services in Angular 4 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 ::
  • If we need same data in multiple components , it's good to create a service instead of instantiating the data objects again and again
  • When using services , modification of source of data is easier , e.g. right now we're using mock data but in practical situations we might end up consuming rest APIs , so instead of updating data at all places , we only need to update the service code and things work fine.
In this tutorial , we'll create a Service which serves Inventions data to the component of our InventionsHub project.
Creating a Service in Angular 4
In the above section , we got the basic idea of why we may need Services in an Angular 4 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
  1. With @angular/cli it's easy to create a new Service , just type the following command in your terminal
  2. 
    ng g service inventions 
    
    
    
  3. Upon successful execution , the above command creates 2 files 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.
  4. 
    // inventions.service.ts
    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class InventionsService {
    
      constructor() {
    
       }
    
    }
    
    
Note that @Injectable() is a decorator used with angular services. Time to add some code to our service file. But before we do that , let's create a new file and move the code for Invention class from 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; 
}


Now let's edit our service file 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; 
   }

}


Great ! , our service is now ready to be consumed , all it does is , it returns some default inventions when it's getInventions() method is called.
Consuming Services in Components
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 = ''; 
  }

}



Before we run the app and see it in action , let's get some basics in place first. Make sure that you understand the following points about the above snippet.
  1. first we imported the service class from the service file
  2. then we added the service name to the providers array of our component
  3. then we instantiated our service in the constructor and used its getInventions() method
So above are the steps we need to consume any service. Now to see our app in action , use the same old ng serve command. Following is a screenshot of our InventionsHub app.
angular 4 services
Summary
In this part of the tutorial , we learned the following
  1. Why use services in Angular 4
  2. How to create and use services in Angular 4 components
Hope you enjoying learning about the angular 4 , in the next part we'll come back with more exciting Angular 4 stuff.

       


More from RISHABH.IO















developed & nourished with by rishabh.io