Angular Fundamentals: Understanding Angular’s Dependency Injection

Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 10th module: Understanding Angular’s Dependency Injection

The previous modules are:

• Getting Started With Angular
• Creating and Communicating Between Angular Components
• Exploring the Angular Syntax
• Creating Reusable Angular Services
• Routing and Navigating Pages
• Collecting Data with Angular Forms and Validation
• Communicating Between Components
• Reusing Components with Content Projection
• Displaying Data With Pipes

The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.

This module broadly covers the material that is in the Dependency Injection in Angular guide.

Using Third Party Global Services — The Problem

Joe wants to add notifications at the point of login, but first he points out a problem.

We’ve been using the Toastr library (which is not part of Angular) in places throughout this course and have created a Toastr service to make using it easier to test.

Our Toastr service wraps each of the four main functions, success, info, warning error. We wouldn’t want to use this pattern for a bigger library such as jQuery because it would require so much code.

But just using the global objects in vanilla fashion means we lose the ability to do Tree Shaking, and other ES6 modules features.

Angular Dependency Injection Lookup

Joe explains the Dependency Injection Lookup mechanism and says we need to create and export a class for our Toastr object.

Using Angular’s InjectionToken

In this clip Joe creates a new toastr service which exports a TOASTR_TOKEN variable which is a type of InjectionToken. He explains why this technique avoids naming collisions.

In our original toastr service we have:

declare let toastr:any;

We move this code into our app.module.ts and change it to:

declare let toastr:Toastr = window[‘toastr’];

The type of Toastr is defined by an interface that we create.

And we add to our providers array the entry:

{ provide: TOASTR_TOKEN, useValue: toastr },

Using Angular’s @Inject Decorator

We can start thinking about adding toastr notifications in our profile component now.

First we add the @Inject decorator in the profile component constructor, and its parameter is our TOASTR_TOKEN.

When we change our profile, we get the notification “Profile Saved”.

Try the practice exercise.

The useClass provider

Joe explains the differences between the shorthand and longhand notations in the providers array. Deborah Kurata also explains this in her Getting Started course.

We’ve previously seen useValue and now we see useClass. This can be useful if we have a specific implementation of a generic service (e.g. a FileLogger implementation of a Logger service).

The useExisting and useFactory providers

There are two more ways to register providers, but Joe says its unlikely you’ll ever need to use either of them!

useExisting is also known as the alias provider. Joe explains how this can be used for API minimization.

useFactory is even more complex than useExisting. It takes a function and allows you to parameterize the creation of an object. For further information check out the official documentation.

Try the practice exercise.

Thanks for reading. The next module in the course is Creating Directives and Advanced Components in Angular.