Dependency Injection in Angular

At bootcamp , I learned Ruby, Sinatra (Ruby), Rails (also Ruby), JavaScript, React (JavaScript) and Redux (also JavaScript) along with some SQL. I didn’t learn Angular, but I wanted to. So I taught myself the basics of Angular a few months ago and deployed my very basic, but fully functional, Angular app. So yes, I can build an Angular app. But I didn’t go through an intensive course to teach me how the framework actually works like I did for the other topics. So I’m writing this in an effort to better understand some of the inner workings of Angular, and, hopefully, help someone else along the way.

Dependency injection. It’s a term unique to the Angular framework and an important part of the framework’s overall functionality. As per the docs, in Angular, a dependency is a service or object that a class needs to perform its function. And dependency injection: Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them.

Now, I’ve used this in my app and will share some code with you in a moment. But, although I’d used it, I did not entirely understand the purpose. Why? Well, because I honed my skills at bootcamp using React. And React has built in dependency injection (probably another one of many reasons why I love it) via JSX using parent and child components. Angular does not. For a class to function, it’s going to need a way to access the object(s) or service(s) it depends on. Enter injectables.

Here is a bit of code from my Angular newsletter app:

//customer.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({ 
  providedIn: 'root'
})
export class CustomerService {
private baseURL = 'https://cd-news-backend.herokuapp.com/api/v1/customers';
httpOptions = {
  headers: new HttpHeaders({
   'Content-type' : 'application/json; charset=UTF-8'
  })
}
constructor(private httpClient: HttpClient)  { }
//all my functions 
}

What’s going on up there? Well, the injectable tag indicates that Angular can use this class in the dependency injectable system, and the providedIn: ‘root’ line means that this class, CustomerService, is visible throughout the application, which it needs to be for the app to function right (I redacted it, but the class simply contains functions for creating, reading, updating, and deleting records). All of the individual components, which are stored in separate files, will import the service like so:

//customer-create.component.ts
import { CustomerService } from 'src/app/services/customer.service';
export class CustomerListComponent implements OnInit {
....
....
constructor(
  private customerService: CustomerService
)

And this is allowed because we’ve used the injectable decorator to provide CustomerService at the root level. It can be provided in other locations depending on the need, but root is what will allow the class to be accessed throughout the app.

thank you for taking the time to read my little write up about Angular injectables. New responsibilities at my day job have left less and less time for studying code in recent months, but the show will go on, if not a bit more slowly than in the past!