python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Dependency Injection

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!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions