Creating Services in Angular 2

Posted By : Sachin Dixit | 31-Jan-2018

angularjs

In angular 2 service is used to define the common functionality that can be used in any module across the application.

for example we can have Database connectivity code written in our service class.

Services need to be registered in the providers array at the parent component that will be using it, so there will be one instance of service on per injection.

Now we will see how to create a service

Steps to create a service:

step:1 Create a service file with .service.ts extension.

for ex--> Hello.service.ts

step:2 Import the Injectable Member.

for ex--> import { Injectable } from '@angular/core';

step:3 Decorate with @Injectable.

for ex-->@Injectable()

It is recommended to decorate our service class with @Injectable decorator to perform dependency injection.

step:4 Create the service class.

for ex--> export class HelloService{ }

After all of the above step our service class looks like this

for ex-->

 
import { Injectable } from '@angular/core';
             @Injectable() // to perform dependency injection but right now our service doesn't have any dependency.
             export class HelloService //export keyword is used to expose this functionality to other module of application.
             {
                getMessage() 
                           {
                           return 'Welcome to Angular services!';
                           }

             }

step:5 Import HelloService to appComponent.

for ex-->import { HelloService } from '../services/Hello.service';

step:6 Register the service in providers array of appComponent.

for ex-->

@Component({

selector: 'root-component',

templateUrl: './app.component.html',

providers: [HelloService]

})

step:7 Call function define in the HelloService.

from step:5 to step:7 our code look like this

for ex-->

 

import { Component } from '@angular/core';
		import { HelloService } from '../services/Hello.service';

			@Component({
  				selector: 'root-component',
 				 templateUrl: './app.component.html',
  				styleUrls: ['./app.component.css'],
 				 providers: [HelloService]
				   })
                export class AppComponent 
                           {
                                title:string;
                                constructor(private _HelloService:HelloService) //creating _HelloService variable of type HelloService
                                {

                                }
                              ngOnInit() //lifecycle hook method
                                       {
                                       this.title=this._HelloService.getMessage(); //calling getMessage() define in HelloService
                                       }
                           }