Angular 2 Dependency Injection (DI) Explained

27 minutes

This course will teach you the ins and outs of dependency injection in Angular 2. You will learn what dependency injection means, how it applies to software in general and how it is implemented in Angular 2. We will take a look at simple use cases like injecting services, to exploring different providers recipes and when they are useful. We will also cover almost unknown features like viewProviders, OpaqueToken and edge cases where forwardRef() is needed.

This Angular 2 course assumes knowledge of some fundamentals.
We have an Angular 2 course that will Get you started

pro-course-rss-logo

PRO RSS Feed

What is Dependency Injection?

Injecting a service into a component

Understanding Providers

P

Factory Providers

P

Factory Providers with dependencies

P

Understanding @Injectable

P

Value Providers

P

Understanding OpaqueToken

P
angular2 tutorial about What is Dependency Injection?

What is Dependency Injection?

2:36 angular2

To get started with Dependency Injection, we first want to understand what it is actually all about. In this lesson, we take a look at Dependency Injection as a software design pattern and clarify why it is so useful that Angular implements a system for it.

angular2 tutorial about Injecting a service into a component

Injecting a service into a component

3:07 angular2

This lesson explains how we can inject simple service dependencies into Angular 2 components using providers. We’ll also discuss what providers are and why they are needed.

angular2 tutorial about Understanding Providers

Understanding Providers

3:57 angular2 PRO

In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token.

angular2 tutorial about Factory Providers

Factory Providers

3:29 angular2 PRO

In this lesson, we discuss how and when to use factory providers, to enable dependencies that shouldn’t be available to Angular’s DI.

angular2 tutorial about Factory Providers with dependencies

Factory Providers with dependencies

3:05 angular2 PRO

This lesson discusses when and how to add dependencies, resolved by Angular’s DI, to factory providers. The example used in this lesson builts upon the previous lesson on understanding factory providers.

angular2 tutorial about Understanding @Injectable

Understanding @Injectable

4:27 angular2 PRO

In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits metadata. In this lesson we’ll explore how the @Injectable decorator ensures metadata generation for services that have their own dependencies.

angular2 tutorial about Value Providers

Value Providers

3:00 angular2 PRO

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this lesson we’ll discuss, how they are created.

angular2 tutorial about Understanding OpaqueToken

Understanding OpaqueToken

3:53 angular2 PRO

When using provider string tokens, there’s a chance they collide with other third-party tokens. Angular has with the concept of opaque tokens, that allow us to make whatever token we use unique, so we don’t run into collision problems. In this lesson we’ll explore how they work.

Presented by:

Pascal Precht

I like headphones, art, skateboarding and coding. Angular GDE at @Google, @thoughtram co-founder and creator of @5thingsAngular

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?