2

I've been learning Angular 2 for a few days now. When I read about the Injectable() concept in Angular 2 and try to apply the tutorial's example code in this link : Angular 2 - Dependency Injection, I get a problem.

They said I need to put the annotation @Injectable() on top of the class so that the other classes can inject, like:

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

The problem is that when I drop Injectable(), my app still runs properly. Can someone help me figure out how does injection in Angular 2 work?

John Doe
  • 397
  • 3
  • 18
Tea
  • 873
  • 2
  • 7
  • 25
  • 1
    The annotation is in fact only necessary when your service has dependencies. But it's good practice to always add it on services. This is documented: https://angular.io/tutorial/toh-pt4#injectable-services, https://angular.io/guide/dependency-injection#injectable – JB Nizet Aug 15 '17 at 10:04
  • 2
    Regarding your second question,"how does injection in Angular 2 work", reading the documentation might help understanding that. We won't rewrite it here for you. – JB Nizet Aug 15 '17 at 10:05

2 Answers2

6

As clearly stated in the documentation:

As it happens, you could have omitted @Injectable() from the first version of HeroService because it had no injected parameters. But you must have it now that the service has an injected dependency. You need it because Angular requires constructor parameter metadata in order to inject a Logger.

https://angular.io/guide/dependency-injection#why-injectable

So in short, if your injectables have injectors, the @Injectable decorator resolves the cyclic-dependency.

" how does injection in Angular 2 work?"

This is a really broad question but to sum up Angular injection system creates an instance of that provider object/function and uses that instance in that component when you inject it in the constructor.

If you haven't provided it in the component that you are using then it will go to it's parent component, up to the module that it's been used until it finds the instance. Each level has its own map of provider instances and the component will use the first instance that it finds when it traverses the injection tree upwards.

So the provider will be a singleton instance up to the point it is defined.

eko
  • 39,722
  • 10
  • 72
  • 98
0

When you write an application you have to take 3 steps in order to perform an injection:
1. Create the service class.
2. Declare the dependencies on the receiving component.
3. Configure the injection (register the injection with angular in NgModule).

The service will be called injectable because it represents what the components will receive via the injection.

@Injectable()
export class MyService { 
  getData(): void { 
    console.log('Fetching data');
  }
}

Now that you have the thing to be injected, the next step, would be to declare the dependencies you want to receive when angular creates the component.
One way of doing this in angular, is by declaring the injectables we want in our component’s constructor:

export class MyApp {
  constructor(private myService: MyService) {}
}

When you declare the injection in the component constructor, angular will do some reflection to figure out what class to inject. In other words angular will see that we are looking for an object of type MyService in the constructor and check the dependency injection system for an appropriate injection.
The final step for using dependency injection is to connect the things our components want injected from the injectables. Which means, we need to tell angular which thing to inject when a component declares its dependencies. We do this by adding MyService to the providers key of our NgModule. 

@NgModule({
  declarations: [ MyApp ],
  imports: [ BrowserModule ],
  providers: [ MyService ]
})
Unsinkable Sam
  • 3,809
  • 1
  • 10
  • 18