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

ASP.Net MVC 5 Error: The controller for path '/' was not found or does not implement IController
When a page, that is located inside an area, wants to access a controller that is located outside of this area (such as a shared layout page or a certain page inside a different area), the area of this...
M

Mohammad Shafi

0 0
0

Be FOCUS !!
We must be very focused about learning & Goals. While learning please check your progress and take feedback at various level. Try Again & Again & Again !!! Deepak Garg

AngularJS Basics- 1
This is my first blog.I am just explaining the basics of AngularJS and Sample application in an interesting way so that anyone can create an Angular application. Let’s see how we can create :) Angular.js...

$rootScope in Angular JS
$rootScope refers to an object which is accessible from everywhere of the application. You can think $rootScope as global variable which can be accessible in all controllers, services, directives. The...
P

Roll up your sleeves and get knee deep into coding!
Practise, make mistakes, learn to search for solutions,seek help when stuck badly! Just attending classes won't make you good at coding!!!
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