Angular 2 - Services


Advertisements

A service is used when a common functionality needs to be provided to various modules. For example, we could have a database functionality that could be reused among various modules. And hence you could create a service that could have the database functionality.

Modules

The following key steps need to be carried out when creating a service.

Step 1 − Create a separate class which has the injectable decorator. The injectable decorator allows the functionality of this class to be injected and used in any Angular JS module.

@Injectable() 
   export class classname {  
} 

Step 2 − Next in your appComponent module or the module in which you want to use the service, you need to define it as a provider in the @Component decorator.

@Component ({  
   providers : [classname] 
})

Let’s look at an example on how to achieve this. Following are the steps involved.

Step 1 − Create a ts file for the service called app.service.ts.

Demo ts

Step 2 − Place the following code in the file created above.

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
} 

Following points need to be noted about the above program.

  • The Injectable decorator is imported from the angular/core module.

  • We are creating a class called appService that is decorated with the Injectable decorator.

  • We are creating a simple function called getApp, which returns a simple string called “Hello world”.

Step 3 − In the app.component.ts file, place the following code.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
} 

Following points need to be noted about the above program.

  • First, we import our appService module in the appComponent module.

  • Then, we register the service as a provider in this module.

  • In the constructor, we define a variable called _appService of the type appService so that it can be called anywhere in the appComponent module.

  • As an example, in the ngOnInit lifecyclehook, we called the getApp function of the service and assign the output to the value property of the AppComponent class.

Once you save all the code changes and refresh the browser, you will get the following output.

Services

Useful Video Courses


Video

AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma

Video

Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma

Video

Step By Step Angular For Beginnners

11 Lectures 7.5 hours

SHIVPRASAD KOIRALA

Video

Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain

Video

Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac

Video

JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac

Advertisements