Angular 2 Services

 

What’s a service in angular 2 typescript project?

If a piece of code is needed by many components in our application. A good practice is to create a single reusable service.

When a component needs this service we can simply inject it (the service).

angular 2 services example
angular 2 services example

let’s discover what’s a service

angular 2 service
angular 2 service

 

try the live example Yourself.

try angular 2 service
try angular 2 service

 

  • A service is the mechanism used to share functionalities over Components (or with one Component if our app contains only one Component)
  • As you may already know, we can create Components in angular 2 and nest multiple Components together with selectors. Once our Components are nested we need to manipulate some Data and maybe this Data is not just a variable within our Component. Or we want to do some calculations.
  • In real life Data comes from Server. (e.g. JSON file)
  • Service is the best way to handle this.
  • Service is the best place from where we can bring our external Data to our app. Or do some repetitive task or calculations.
  • Service can be shared between as many as Components we want.
  • Or maybe you want to share other things (functionalities) over multiple Components or Portions of your app? The answer is : Service

 

angular 2 services - build our example
angular 2 services – build our example

 

let’s build our example / Solar System Planets

  • First we create a class Planet (as instance we will have Earth, Mars, Jupiter … )

File : planet.ts

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
export interface Planet{
    id:number,
    name: string,
    surface: string,
    parentSystem: string,
}

 

  • In this example we mock the data, later we will see how to bring data from server using HTTP.

Let’s create our data.

File : planets-data.ts

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Planet} from "./planet";

export const PLANETS: Planet[] = [
    {id:1,name:'Earth',surface:'Rocky',parentSystem:'Solar System'},
    {id:2,name:'Mars',surface:'Rocky',parentSystem:'Solar System'},
    {id:1,name:'Jupiter',surface:'Gaseous',parentSystem:'Solar System'},
    {id:1,name:'Mercury',surface:'Rocky',parentSystem:'Solar System'},
];

 

create the service
create the service

 

It’s time to create our service; this service will return the data just created abode.

file: planet.service.ts

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Injectable} from 'angular2/core';
import {PLANETS} from './planets-data';

@Injectable()
export class PlanetService {
    getPlanets(){
        return Promise.resolve(PLANETS);
    }
}

mark a class as a service

mark a class as a service

How to mark a class as a service?

  • We need to declare a Decorator called Injectable.
  • This will make our (service) class injectable in other components in our application.
  • We can now get an instance of our Service Class in another Class.
  • Inside our service we have a method called getPlanets(). We use inside this method a promise to return the value of PLANETS.

 

In this chapter we explain just the Service; you can check other tutorials on: angulartypescript.com.

  • We adopt this approach to make it easy to understand each part independently.

 

call / inject the service
call / inject the service

 

In our main component we inject the service using the provider property in @

File: planets-list.component.ts

  • In this example we use nested components, we have already explained what it means in a previous tutorial, so it will be easy for you understand. We have a planet component; we call this component inside another component planets-list component.
  • Please check the live example to get the code related to the planet component.
/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from "angular2/core";
import {PlanetService} from "./planet.service"; //1
import {PlanetComponent} from "./planet.component";
import {Planet} from "./planet";


@Component({
    selector: "my-app",
    templateUrl: "app/planet-list.component.html",
    directives: [PlanetComponent],
    providers:[PlanetService], //2
    styles:[`
                body{
                    padding:0;
                    margin:0;
                    font-family:Roboto,Arial,sans-serif;
                    font-size:16px
                }
                .title {
                    color:#018EFA;
                }
                .clicked{
                    background-color: #9C00FE;
                    color:white;
                }
                .labels{
                    background-color: black;
                    color: white;
                }

    `]
})
export class PlanetListComponent{
    public planets : Planet[];

    public selectedPlanet = {};

    public onNameClick(planet){
        this.selectedPlanet = planet;
    }
    constructor(private _planetService: PlanetService){  // 3
        this.getPlanets();
    }

    // make a call to our planet service
    getPlanets(){  //4
        this._planetService.getPlanets().then((planets:Planet[])=>this.planets = planets);
    }

}

 

1) In this part of code we import our service. (//1)

2) Next step is to inject our service in the component using the providers property. (//2)

3) We create a private variable called _planetService , the type of this variable is PlanetService. (//3)

4) In this method we call the service using the promise. (//4) getPlanets().then()

 

 

In another tutorial we will show you how to optimize the call. In this tutorial we try to keep it easy to understand.

Done !