Made withAngularClip

Angular Tutorial - 19 - Using a Service

C

Codevolution

Creator on the Angular channel

Watch on YouTube ↗

540K viewsDec 25, 20178:39 runtime

Learn how to create and use services in Angular to manage shared data and logic efficiently. This tutorial walks you through the entire process, starting with generating a new service using the Angular CLI. You'll discover how to register the service with Angular's hierarchical…

Chapters

#angular#clip#frontend

Using Services in Angular

This document outlines the three fundamental steps for implementing and using a service in an Angular application.

Step 1: Create the Service

Services are used to share data and business logic across multiple components.

Generate a service using the Angular CLI: ng generate service <service-name> (or ng g s <service-name>).
Define methods within the service class to provide data or perform actions. For example, a getEmployees() method can return an array of employee data.

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

@Injectable()
export class EmployeeService {
  getEmployees() {
    return [
      { "id": 1, "name": "Andrew", "age": 30 },
      { "id": 2, "name": "Brandon", "age": 25 },
    ];
  }
}

Note
Initially, it's good practice for components that will use the service to initialize their local data properties (e.g., employees) to an empty array.

Step 2: Register the Service

A service must be registered with Angular's dependency injector to be available for use.

Registration Scopes: Where you register a service determines its availability.
- Component Level: The service is available only to that component and its children.
- Module Level: The service is available to all components declared within that module. This is the most common and recommended approach for feature-wide services.
How to Register: Add the service class to the providers array in the appropriate NgModule decorator (@NgModule).

import { EmployeeService } from './employee.service';

// ... in @NgModule metadata
providers: [EmployeeService],

Important
Angular has a hierarchical dependency injection system. Registering a service at the module level makes a single instance of that service available to all components in that module, promoting efficiency and state sharing.

Step 3: Inject the Service into a Component

Once registered, components can declare the service as a dependency to use it.

Declare Dependency: Use the component's constructor to inject an instance of the service.
- TypeScript's shorthand syntax (private _employeeService: EmployeeService) is a concise way to declare it as a private property.
Use the Service: Call the service's methods to fetch data or execute logic, typically within a lifecycle hook like ngOnInit.

import { EmployeeService } from './employee.service';

// ... in component class
export class EmployeeListComponent implements OnInit {
  public employees = [];

  constructor(private _employeeService: EmployeeService) { }

  ngOnInit() {
    this.employees = this._employeeService.getEmployees();
  }
}

Tip
The ngOnInit lifecycle hook is the ideal place for initial data fetching because it runs after the component has been initialized and its inputs are set.

Understanding the @Injectable Decorator

The @Injectable() decorator on a service class tells Angular that this class can have its own dependencies injected into it.
While not strictly necessary if the service has no dependencies, it is a best practice to add it to all services from the start, as the Angular CLI does automatically.
Why don't components need @Injectable()? Components already have the @Component() decorator, which informs Angular that they are part of the dependency injection system.

Creating an Angular Service

Alright guys, in this video, let's implement the three steps to use a service in Angular. Let's begin with step one: creating the employee service.

Now, to generate a basic service template, we use Angular CLI. So in the integrated terminal within the project folder, run the command ng g for generate, s for service, and followed by the name of the service. In our case, it is the employee service. When the command completes, you should have a new file in the source folder: employee.service.ts. And if you take a look inside, you have the basic template for an Angular service.

Now, what is our service responsible for? To provide the employee data. So in the EmployeeService class, let's create a new method, getEmployees, and we just return the array of employees. And in the list and detail components, initialize the employees array to an empty array. Empty array in the list component, empty array in the detail component.

So the service now has a method that returns the employees. Our first step is complete. We have created our service.

Registering the Service with the Injector

The second step is to register the service with Angular's injector. If we don't register, the service will be just another regular class according to Angular. Now, there are multiple places where you can register the service, but the place you register is important because Angular has a hierarchical dependency injection system.

So consider the example application: it has AppModule. The AppModule has AppComponent. The AppComponent has two components nested inside: EmployeeList and EmployeeDetail. Here is how Angular's DI system will work: if you register in the EmployeeListComponent, the service can be used by the EmployeeListComponent and its children. No other components, not even the EmployeeDetailComponent, can use it. So this is not a good choice.

Now, if you register with the AppComponent, the AppComponent and all its children can make use of the service. This works fine, but each module is usually a feature area in your application and might grow, so it is better if you register the service at the module level. By doing so, components under the AppModule can use it.

And to register a service, we use the providers metadata. So let's go back to Visual Studio Code. In the AppModule, include EmployeeService in the providers array. Also, make sure to import EmployeeService. So our second step is now complete. We have registered a service with Angular's injector using the providers metadata.

Injecting the Service and Fetching Data

The third step is to mention the dependency for this service in the component that needs it. And if you remember from the last video, the dependency is specified in the constructor. So let's go back to EmployeeListComponent. In the constructor, I'm going to use TypeScript's shorthand syntax to make use of the dependency. So in the constructor: private _employeeService: EmployeeService. And we also need to import it.

So now we have a local variable _employeeService that gives us an instance of the EmployeeService. Next, we need to make use of the service instance and fetch the employee data. And the code for that goes inside the ngOnInit lifecycle hook. We haven't talked about lifecycle hooks, but the ngOnInit hook gets called once the component has been initialized. So inside the ngOnInit method, this.employees is going to be equal to this._employeeService.getEmployees().

So here is how this works: we have the EmployeeService class. The EmployeeService class has a getEmployees method that returns the employee data. So in our EmployeeListComponent, we get hold of an instance of EmployeeService, which is _employeeService, and call getEmployees method and assign the returned data to the employees array that belongs to the EmployeeListComponent.

Using the Service in Multiple Components

Now let me do the exact same thing in the EmployeeDetailComponent: private _employeeService: EmployeeService. And then in the ngOnInit method, this.employees is equal to this._employeeService.getEmployees().

So now if we save this and restart our application—so npm start—take a look at the browser, and we still have the list and details displayed, but this time we are doing it much more efficiently. Of course, we might have different views to display the list and details and also make use of routing to switch between the views, but I wanted to focus solely on how to use a service.

And this is how you do it: create a service, register it with the injector, and declare it as a dependency in the component that wants to use it. Alright.

The Role of the @Injectable Decorator

One last topic of discussion is about the @Injectable decorator, this right here. Why is it required? Well, the @Injectable decorator tells Angular that this service might itself have injected dependencies. So if you ever want to inject a service into another service, the @Injectable decorator is a must. Right now, the EmployeeService doesn't have dependencies, so the @Injectable decorator is not necessary. But the EmployeeService might have dependencies in the future, and that is why it is recommended to add this @Injectable decorator as soon as you create a service class. And since Angular CLI follows best practices, it adds the @Injectable decorator when you generate a new service.

Now you might ask, so how come we don't use the decorator on the EmployeeList or EmployeeDetail component? We don't see an @Injectable decorator here, right? And the class still makes use of the EmployeeService. Well, that is because components have the @Component decorator that lets Angular know, 'Hey, I might have dependencies and might make use of the dependency injection system.' But for a service, we don't have that @Component decorator. If you remove the @Injectable decorator as well, it becomes a plain TypeScript class, nothing to do with Angular. And that is why @Injectable is required only for a service and not a component.

Alright, that is what I wanted to cover about services. Let's take a look at HTTP and observables in the next video. Thank you guys for watching, don't forget to subscribe, and I'll see you guys in the next video.