Angular 2 Dependency Injection

What is dependency injection (DI)

Dependency injection is a feature of a dynamic language that we quite often use in JAVA web applications and .NET applications. This feature enables efficient re-use of code and instances thus making the programs more memory efficient and light weight, still at the cost of a few additional lines of code (CPU cycles). This could also in turn provide the programmer with the benefit of design patterns such as Singleton and Factory patterns without having to code them from scratch (We will discover how as we proceed). To conclude what is DI, it's a mean by which we inject an instance of an object (called services in Angular 2) to another Object (mostly to a component) in order to have clean code and reusable code.

Advantages of DI

Improved changeability

Since the object creation is taken away from the components that uses the object, we no longer worry about the object constructor. Which is great if we're to work in large teams, which might bring continuous changes in to services and components, not for DI would require changes at both ends making it difficult to maintain code.

Cleaner code

Using DI makes the code cleaner. This is because we just have to mention the required object and reference name. Programmer can directly use the instance without having to worry about creating the code with a messy set of constructor parameters and so on.

Object Re-use

Most of the Angular 2 UI's are interaction intensive and requires web requests to be sent often. The best example would be us typing in a text box with suggestions flowing seamlessly. If we are to initiate instances of a single service and keep sending requests there might be a race condition and can cause the TCP sockets to overwhelm. Also having concepts like ES7 Observables (Will be discussed in another blog post) which enables the components to observe services rather than update through call backs or promises, would not be useful if we are to replicate objects without a clear purpose. 

An example:

We have a userDataService to fetch the user profile. This update the users profile picture on the UI. If we are use use a separate services each time we update the profile there will be so many objects and all these will be reflected in your RAM usage. Also if there are repeated requests we cannot guarantee which request will be served last, which is the result that will cause the UI to reflect.

DI in action

Sample Service

It is required to use @Injectable() in order to make the injection possible.

Injecting the dependency

This demonstrate the use of the UserManagementService within AuthService. Which is quite simple. Just call the name of the method required to get the task done

Using Singleton and Different instances for DI

Singleton

If we are to use a singleton design pattern using the DI we should add the providers (Which is the injectable object class) within the angular 2 module. This will directly enable the injection of the dependency throughout the module without any clutter.

@NgModule({

    providers: [UserManagementService]

})

export class AppModule {

    ...

}

Non-singleton

If we are to use separate instances over different components we could declare the providers within their individual components

@Component({

    templateUrl: 'events-page.html',

    providers: [PostService]

})

export class EventsPage {

    ...

}