Dependency Injection (DI) in Angular 2 [Why @Injectable()?]

Dependency Injection is a powerful pattern for managing code dependencies.

Angular 2 Dependency Injection consists of three things.

              1.       Injector

              2.       Provider

              3.       Dependency

Injector :- The injector object use to create instances of dependencies.

Provider :- A provider is help to injector for create an instance of a dependency. A provider takes a token and maps that to a factory function that creates an object.

Dependency :- A dependency is the type of which an object should be created.

When use @Inject()?	When Use @Injectable ()?	@Injectable() vs. @Inject() ?
How to use Dependency Injection (DI) correctly in Angular 2?	Dependency Injection (DI) in Angular 2?

@Injectable() marks a class as available to an injector for instantiation. An injector reports an error when trying to instantiate a class that is not marked as @Injectable().

Injectors are also responsible for instantiating components. At the run-time the injectors can read class metadata in the JavaScript code and use the constructor parameter type information to determine what things to inject.

How to use Dependency Injection (DI) correctly in Angular 2?

The basics Steps of Dependency injection,

1.      A class with @Injectable() to tell angular 2 that it’s to be injected “UserService”.

2.      A class with a constructor that accepts a type to be injected.

Example, UserService marked as @Injectable as,

import {Injectable, bind} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable() /* This is #Step 1 */
export class UserService {
  constructor(http: URL /* This is #Step 2 */ ) {
    this.http = URL;
  }
}

Example as,

import {Injectable} from "@angular/core";

@Injectable()
export class InjectToService {
    id: string;

    constructor() {
        this.resetPasscode();
    }

    resetPasscode(): void {
        this.id = this.generatePasscode();
    }

    private generatePasscode(): string {
        var date = new Date().getTime();

        var pascode = '00X000-00000-7000-Z0000-00000'.replace(/[xy]/, function(f) {
            var random = (date + Math.random() * 16) % 16 | 0;
            date = Math.floor(date / 16);
            return (f == '0' ? random : (random & 0x3 | 0x8)).toString(16);
        });

        return pascode;
    };
}

I hope you are enjoying with this post! Please share with you friends. Thank you!!