UrbanPro
true

Learn Angular.JS from the Best Tutors

  • Affordable fees
  • 1-1 or Group class
  • Flexible Timings
  • Verified Tutors

Search in

Dependency Injection in Angular 2

Ranjan P.
25/09/2017 0 1

Dependency injection

Service

Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.

Angular can tell which services a component needs by looking at the types of its constructor parameters. For example, the constructor of your HeroListComponent needs a HeroService:

Sample Code-

src/app/hero-list.component.ts (constructor)
constructor(private service: HeroService) { }

When Angular creates a component, it first asks an injector for the services that the component requires.

An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. This is dependency injection.

The process of HeroService injection looks a bit like this:

Service

If the injector doesn't have a HeroService, how does it know how to make one?

In brief, you must have previously registered a provider of the HeroService with the injector. A provider is something that can create or return a service, typically the service class itself.

You can register providers in modules or in components.

In general, add providers to the root module so that the same instance of a service is available everywhere.

src/app/app.module.ts (module providers)
providers: [
BackendService,
HeroService,
Logger
],

Alternatively, register at a component level in the providers property of the @Component metadata:

src/app/hero-list.component.ts (component providers)
@Component({
  selector:    'hero-list',  templateUrl: './hero-list.component.html',  providers:  [ HeroService ]})

Registering at a component level means you get a new instance of the service with each new instance of that component.

Points to remember about dependency injection:

  • Dependency injection is wired into the Angular framework and used everywhere.

  • The injector is the main mechanism.

    • An injector maintains a container of service instances that it created.
    • An injector can create a new service instance from a provider.
  • provider is a recipe for creating a service.

  • Register providers with injectors.

0 Dislike
Follow 4

Please Enter a comment

Submit

J

Jr Panda | 25/09/2017

Thanks for the nice explanation Ranjan Sir.

2 0

Other Lessons for You

Read CSV data using ODBC Connection
Codes to read the CSV data using ODBC Connection- Input File: File's Encoding format should be ANSI as below class Student{ public string CollegeId { get; set; } public string AdmissionDate...

What is JavaScript MV* Frameworks?
MV* (as in, model-view-wildcard) design patterns. There's MVC (model-view-controller), MVVM (model-view-view model), MVP (model-view-presenter), and probably some more. Some of popular JavaScript MV*...
S

Subrahmanyam P.

0 0
0

Difference between Abstract Class and Interface
This is probably one of the most commonly asked questions in any job interview for .Net. Before we look into the differences between the two lets find out the main features. Abstract Class By definition...

Programming Practice Technique
Any Programming Language required an Algorithm. Algorithm - It is the finite set of instructions in which each and every instruction has the meaning, instructions are not ambiguous and all the instructions...

Javascript basic Interview Questions
Check below logical operators var a = false && 'Cat'; false var b = 'Cat' && 'Dog'; dog var c = 'Cat' || 'Dog'; cat var d = !true; false var e = !false; false what are...
X

Looking for Angular.JS Classes?

The best tutors for Angular.JS Classes are on UrbanPro

  • Select the best Tutor
  • Book & Attend a Free Demo
  • Pay and start Learning

Learn Angular.JS with the Best Tutors

The best Tutors for Angular.JS Classes are on UrbanPro

This website uses cookies

We use cookies to improve user experience. Choose what cookies you allow us to use. You can read more about our Cookie Policy in our Privacy Policy

Accept All
Decline All

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more