In this exercise we will demystify the Angular Service by taking a simple pragmatic approach to implementing a service that retrieves a JSON file from the server using the HttpClientModule.
The notion of Services is that of a “Design Pattern”.
The notion of Services is that of a “Design Pattern”. At the end of the day a Service is nothing more than a class. What makes it fancy is combining it with Dependency Injection (DI) which handles instantiation & construction for us.
Coincidentally Services are “Singletons”. Meaning that they will only be instantiated once within the current context. By injecting a Service in multiple locations such as a parent & child component you can effectively share the state of objects.
Why should I use a service?
Anytime you want to provide re-usability at the logic level you should wrap it into a service. By de-coupling your logic from the scope of Component Classes you maintain “Separation of Concerns”. Doing so will
Declaring a Service
ng generate service
/src/app/forms.service.ts: import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable, Subject} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class FormsService { public constructor(private httpClient: HttpClient) { } public getFormSchema(): Observable { let subject: Subject = new Subject(); this.httpClient.get('assets/form-schema.json').subscribe((results: any) => { console.log(results); subject.next(results); }); return subject; } }
Consuming a Service
In this example we will use “Dependency Injection” to be able to call our services getFormSchema() method:
/src/app/app.component.ts
import {Component} from '@angular/core'; import {FormsService} from './forms.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public constructor(private formsService: FormsService) { formsService.getFormSchema().subscribe((results: any) => { console.log(results); }); } }
If time is on your side, what is on the other?
Stay up to date with the latest docker, kubernetes & angular practices... by email!
I won't overload ya. You'll only get messages when the computer gods have allowed me to complete my new content :)
WOOHOO! Got ya covered!