Angular 2 dependecy injection - how to know where to insert dependencies

Question

I am learning angular2 and find myself a bit confused where to inject dependencies sometimes. Like for example when using RouteParams

import {RouteParams} from 'angular2/router';

we just pass it to constructor method and we are good to go:

constructor(private _photoService: PhotoService, private _routeParams: RouteParams){
    }

But, when we use ROUTER_DIRECTIVES from the same module 'angular2/router'

import {ROUTER_DIRECTIVES} from 'angular2/router';

We need to pass it to directives array of the component:

directives: [ROUTER_DIRECTIVES]

So, my question is, how can I know, where I need to pass it, when do I pass dependencies to the directives or providers array, or just to constructor method?

Answer 1

Dependencies are defined based on what they do.

There is a method to the madness but it is overwhelming when you are starting out for sure. Take a look at the docs at https://angular.io/docs/ts/latest/guide/architecture.html

Basically directives manipulate the DOM, dependency injection injects a complete class (with all of its dependencies), etc. So there are specific ways/places to tell Angular what is what.

Hopefully those docs help sort it out for you. About halfway down the page it starts discussing directives and injection.

Answer 2

A providers is used by DI to create and hold a value.

Where you register a provider @NgModule({providers: []}) , @Component({providers: []}) , or @Directive({providers: []}) defines what value or instances will be passed to constructors that depend on them.

If you register a provider in a non-lazy-loaded @NgModule() DI will provide a single instance for the whole application in its root scope.

If you register a provider on a @Component() or `@Directive() then DI will provide a single instance per component or directive instance.

If MyComponent provides service A and there are 5 instances of MyComponent on your page, then there will be up to 5 instances of A (a provider only creates an instance when it is requested the first time).

When a component, directive, or pipe has a constructor parameter, then DI will try to find a provider that matches the parameters type or @Inject() decorator (if there is any). DI starts looking at the host component for providers, and passes the instance it holds to the constructor. If the host component doesn't provide a matching provider DI keeps looking at parent components until it finds one. If it reaches the root component ( AppComponent ) and still hasn't found a provider it checks the root scope ( @NgModule() providers).

Lazy loaded module are a bit special because providers registered there can't be added to the root scope. Once a scope (injector) is created, new providers can't be registered.

Lazy loaded modules create a child scope to the applications root scope. Providers registered there will only be visible to components, directives, pipes and services which are part of the lazy loaded module (and imported modules loaded with the lazy loaded module).