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
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 | 25/09/2017

Thanks for the nice explanation Ranjan Sir.

2 0

Other Lessons for You

Some good resources
Clean Code by Robert C Martin, is available in my profile please download and read it, irrespective of what language you code in, it will change the way you code. Also if you code in Javascript read https://12factor.net/ https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/ For...

Angular Material
What is Angular Material? For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. This project provides...

While Working, Always Enhance Your Education !!
In Any sector or domain every one must upgrade their education academically or professioally. Since so many times our Woring Knowledge is good but academicically we are week at this front. For Excel...

CLR [ Common Language Runtime ] and it's properties
CLR is one of the components of the .NET framework which provides an environment to execute the .NET code or the managed code. , CLR helps in converting the MSIL/CIL code into native code and running...

Raga Deepthi

0 0
0

Learning a new technology
Each and every day new technologies are getting introduced. Its quite clear that to be part of the fast moving professional world you should be upto date with the cutting edge technologies in the market....
S

Saurav

1 0
0
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