Using Angular Services

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We saw how we can divide our app in multiple components in last article. We will go further and try using angular services to make our app more flexible and well structured.In this article, we are going to solve problems those were introduced in last article.

Using Angular Services:

Previously, we kept our bikes in AppComponent. It is not quite good practice to have something that logically shouldn’t belong there. We should use some store  which gives array of bikes to some service and it can be consumed by AppComponent.

Create a Store:

Create a file called bikes-store.ts and export bikes array from it.

Right now this array acts as a database. We will consume this data in bike service.

Create bike service:

Let us fire up command line and create a service.

BikeService
BikeService

Your files will be generated. Note the warning given. Even though we created a service, we have to specify it as a provider somewhere to be useful. (We will get back to it later).

Write service as below,

BikeService:

  • We should generally mark services as @Injectable(). This makes a class available to angular injector for instantiation. We should not create instances of angular services manually. i.e. bikeService = new BikService(); is not advisable at all. Angular takes care of instantiation internally. We should not interfere with it.
  • We have simply imported BIKES from bikes-store and returned from getBikes() method.

After using angular services, we need to modify existing AppComponent to use it.

Consume BikeService in AppComponent:

Things to notice here:

  • constructor(private bikeService: BikeService) : This means whenever AppComponent is created, it will have a BikeService injected into it.
  • ngOnInit() : This method runs after constructor. We are invoking getBikes() method from BikeService.

Although we are using angular services here, we are not done yet. We still need to declare BikeService as Provider. As discussed in angular architecture article, we usually specify provider in components where service is needed.

All other files remain same:

app.module.ts:

app.component.html:

bike-info.component.ts:

bike-info.component.html:

Bike.ts:

We have created app using angular services. Run it and you should see the same output as that of previous article.

Bike details
Bike details

You can directly clone code from git https://github.com/theJavaGeek/angular. Checkout branch angular-services.

 

Share Button

Prasad Kharkar

Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

3 thoughts on “Using Angular Services

Leave a Reply

Your email address will not be published. Required fields are marked *