Angular Tutorial

Angular tutorial for Beginners – Part 5 : Services

Tuba Mansoor
Latest posts by Tuba Mansoor (see all)

Welcome to part 5 of the Angular tutorial for beginners. We will be building up on the sample code referred in the earlier parts of this series. So it is recommended that you go through the earlier parts. We have covered the following topics till now:

Part 1: Getting started with Angular

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

Par 4: Interfaces

Services in Angular.

In our demo we have directly used hardcoded data in the employee.component.ts. We will now have a look at how we can use a service to get data in angular. Let’s create an employee service.

See also  Angular Tutorial for Beginners - Part 3 : Data Binding

In the angular CLI type in the following:

ng generate service employee
Angular Tutorial

Notice the employee.service.ts file is created. It is also provided in ‘root‘ by default, which means the service will be available throughout the application. You can also modify this, so that the service is available only for certain modules.

Angular Tutorial

Notice how Angular decorates our service with @Injectable. This marks our service as a service that can be injected with something in the constructor. For e.g in the next section when we learn how to use HttpClient to make requests, we will inject our service with an instance of the HttpClient in its constructor. If we don’t mark our service as @Injectable, we won’t be able to do inject anything in its constructor. So, when we mark our service as @Injectable, we are specifying that our service can be injected.

We will now create a getEmployees method in this service as below. Note that we have copied the hardcoded information from employee.component.ts into this service as below.

getEmployees() : IEmployee[]{

    return[
  {
    "employeeId" : 1,
    "employeeName" : "Tuba",
    "projectId":100
  },
  { 
  "employeeId" : 2,
  "employeeName" : "Atul",
  "projectId":101
  },
  { 
    "employeeId" : 3,
    "employeeName" : "Theran",
    "projectId":101
  }]

Now in our employee.component.ts, we make some changes so that we can now fetch data from our service.

See also  SOUND : An Effective Coding and Code Review Technique

Note how we have imported the service and passed it to the constructor through dependency injection. In dependency injection we pass an instance of the service.Then we defined employees as an array of ‘IEmployee’. We then assigned our employees array with the return array that we are getting from the employee service.

Our application should work as before.

Here we have used a source of hardcoded values in our service. We could also use our service to fetch values from a webapi. This will be clear in the next part when we work with services using Http with Observables.

This concludes part 5 of the Angular tutorial for Beginners series. The official Angular website also has some exciting material on services.

Let’s have a look at using Http with Observables for creating services in the next part.

Contents of the Angular tutorial for Beginners series:

Part 1: Getting Started

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

Part 4 : Interfaces

Part 5: Services in Angular

Part 6: Http Requests with Observables.