Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Angular Services

Angular Services

Let’s learn about Angular services in this lesson.

We'll cover the following...

Angular services

In the newly-created photos.service.ts file. The Angular CLI has generated the outline of a service:

Press + to interact
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class PhotosService {
  constructor() { }
}

🙋‍♂️ Joe asks: What Does providedIn Mean?

An Angular app can be made up of any number of modules. These modules can be split up and dynamically loaded on the frontend as needed. Angular needs to know which module we want our service to be under. Providing a service in root means that the entire application can access a single, shared instance of this service (and is the default option).

Bringing in the HttpClient

The first order of business is to bring in HttpClient.

There are two steps for injecting anything in Angular.

  1. The first is to import the class from the Angular library itself. This import is used for type hinting as well as informing Angular what needs to be injected:
import { HttpClient }
...