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

Benefits of Design Patterns in Application Development
Application developments is a tedious job. Programmers write code and test it again and again to make sure their software works fine. So designing complex software is a hard nut to crack. Skilled programmers...

What is the need for Restful Service in MVC Core?
EXPLANATIONRestful service makes access to client information send to the server by JSON request that reduces several round trips from the server and hence optimises the speed. HTML framework works the...

Format Date to “MM/dd/yyyy” in Webgrid ASP.Net MVC Razor View
Replace above line with below to apply ("DD/mm/yyyy") formatting to date field in WebGrid AllTicket.Column(columnName: "DueDate", header: "Due Date") grid.Column("Date",format:@<text> @item.Date.ToString("MM/dd/yyyy")</text>)
M

Mohammad Shafi

0 0
0

Why AngularJS Got Popular
AngularJS became very popular due to its easy two-way data binding, MVC architecture, built-in module system, dependency injection, and routing package. Initially built as a hobby project by Misko Hevery...

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