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

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...

Export To Excel using StringBuilder in ASP.net MVC C#
public ActionResult Export() { StringBuilder sb = new StringBuilder(); //static file name, can be changes as per requirement string sFileName = "filename.xls"; //Bind...
M

Mohammad Shafi

1 0
1

Five exercises on numbers that will help you develop your logic
If you want to become a programmer (web developer) you need to have good logical thinking skills. Programming is all about planning and building logic. Here is a set of exercises that will help you develop...

Angular-2 Developer Training Program Syllabus
Angular2 Developer Training Program Syllabus: Introduction to Angular2. Why Angular2. Angular2 Features: Components, Services and Typescript. Angular2 Components: Templates, Modules, Services...

Why a function in C# requires "Return type"??
- Basically , a Method is a piece of code used for the re-usability purpose. - Method is of 2 types Function and Procedure - Function is a method which returns a value to the calling place Function...
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