How to use Dependency Injection (DI) correctly in Angular2?

Broad question, TL;DR version

---

@Injectable()

• is a decorator which tells the typescript that decorated class has dependencies and does not mean that this class can be injected in some other.

• And then TypeScript understands that it needs to Inject the required metadata into decorated class when constructing, by using the imported dependencies.

bootstrap(app, [service])

• bootstrap() takes care of creating a root injector for our application when it’s bootstrapped. It takes a list of providers as second argument which will be passed straight to the injector when it is created.

• You bootstrap your application with the services that are gonna be used in many places like Http, which also means you’ll not need to write providers: [Http] in your class configuration.

providers: [service]

• providers also does the work of passing all the services’ arguments to Injector .

• You put services in providers if it’s not bootstrap()ped with. And is needed only in a few places.

@Inject()

• is also a decorator a function that does the work of actually injecting those services
  like this. constructor(@Inject(NameService) nameService)
• but if you use TS all you need to do is this constructor(nameService: NameService) and typescript will handle the rest.

---

Further Reading

• If you want to dig deep in DI, take a look at this amazing article

• and to understand Decorators vs Annotations see this.

• Here is the official guide.

• Gunter's Answer Mark Rajcok's Answer and Accepted Answer

Hope this helps. 🙂