What Is Service And When Wwill You Use It Angular

Author avatar

Understanding the Purpose of Services in Angular

Parul Saxena

Languages Frameworks and Tools

Introduction

A reusable Angular service is designed to encapsulate business logic and data with dissimilar components of Athwart. It is basically a class that has a well-divers purpose to do something. You lot tin can create a service class for data or logic that is not associated with any specific view to share beyond components.

Why Services Are Needed

If you write all the business logic in components, you will have the following problems:

You volition not exist able to reuse that logic anywhere else and you will have to re-lawmaking the entire logic in the target component.

Your components will become difficult to maintain as y'all volition have to maintain two copies of the same code.

And so, if you wrap your business concern logic in a reusable Angular service, yous will non but keep your components clean but also get the benefits of reusability and maintainability.

Best Practices

If any component method has logic that goes beyond ten lines of code, it should be considered a candidate to be wrapped in a reusable Angular service. Always make sure to decorate your service class with the @Injectable() decorator so that when y'all inject any other service in this service, you don't get an fault.

Dependency Injection

Dependency injection is used to provide components with the services they can employ. To define a class as a service in Angular, the @Injectable() decorator is used. It provides the metadata that allows Athwart to inject it into a component as a dependency. Similarly, the @Injectable() decorator is used to indicate that a component or other class (such as another service, a pipage, or an NgModule) has a dependency.

Registering a Service in Dependency Container

There are two means to register a service in the providers assortment of any module:

Longhand Method

In the longhand method, you register an object with ii backdrop, provide and useValue , in the providers assortment of whatever module, as shown below:

                                      one                    import { BrowserModule } from '@angular/platform-browser';                                        iiimport { NgModule } from '@athwart/core';                    3                    4import { AppRoutingModule } from './app-routing.module';                    fiveimport { AppComponent } from './app.component';                    6import { EventService } from './events/shared/event.service';                    viiimport { VoterService } from './events/issue-details/voter.service';                    8                    ix@NgModule({                    10                    declarations: [                    xi                    AppComponent                    12                    ],                    13                    imports: [                    14                    BrowserModule,                    fifteen                    FormsModule,                    sixteen                    AppRoutingModule                    17                    ],                    18                    providers: [                    nineteen                    {                    20                    provide: EventService,                    21                    useValue: EventService                    22                    }                    23                    ],                    24                    bootstrap: [AppComponent]                    25})                    26export grade AppModule { }

Shorthand Method

In the shorthand method, you specify the name of your service class in the providers array in your module equally shown below:

                                      1                    import { BrowserModule } from '@athwart/platform-browser';                                        iiimport { NgModule } from '@angular/cadre';                    3                    ivimport { AppRoutingModule } from './app-routing.module';                    5import { AppComponent } from './app.component';                    siximport { EventService } from './events/shared/effect.service';                    7import { VoterService } from './events/upshot-details/voter.service';                    8                    9@NgModule({                    x                    declarations: [                    11                    AppComponent                    12                    ],                    13                    imports: [                    xiv                    BrowserModule,                    15                    FormsModule,                    sixteen                    AppRoutingModule                    17                    ],                    18                    providers: [                    19                    EventService                    xx                    ],                    21                    bootstrap: [AppComponent]                    22})                    23export class AppModule { }

Component Communication Using Angular Services

Reusable Angular services tin also be used to institute communication betwixt 2 components. The components can be in a parent-child human relationship or can be siblings. Irrespective of the human relationship type, the services tin can be used to share information between two components. All y'all demand is public properties in the service course which one component will fix and the other component will swallow and vice-versa. The service that is being used every bit a bridge between the ii components has to be injected into both the components.

Service Instances in Athwart

No affair how many components you lot try to consume a service in, Athwart creates only i instance of the service. And then, Angular services by default are singletons. This helps services to establish communication between two or more components.

Conclusion

Congratulations! Y'all are now familiar with Angular services, the methods used to register them, and how to found component advice in Angular. For more information, delight refer to the Fundamentals of Angular.