How Angular does dependency injection - lordoftheflies/angular-essential-training GitHub Wiki

Angular has dependency injection support baked into the framework. It's a big part of what allows you to create these components, directives, and more in a modular fashion, where they don't have to have knowledge of one another to coexist. With dependency injection, the framework is handling creating instances of things and injecting them into places where they are needed. In Angular, this is handled in two steps. The first is service registration, in which you provide angular with a list of things you want it to know about that can be injected. The second is the retrieval of those things, which can be done with constructor injection, either by leveraging TypeScript type annotations or by using the Angular Inject decorator. Angular also provides access to the injector itself for cases where you want to locate a service specifically, but this is typically not needed. The majority of application architecting can be accomplished by leveraging constructor injection. So step one is to tell Angular, hey, I have this class or this value that I want you to handle for me. This is done with the Angular Provider class, or the provide helper function, or even by providing the type. You let angular know either at the bootstrap call or in the component directive metadata in the decorators. Step two is to tell Angular from within class constructor signatures, hey, I want these constructor parameters to be of this type. This is done with a bit of TypeScript, or can be done with the Inject decorator. From there, Angular takes over, collecting all the things you specify as providers into a list, and then getting those when it goes to execute the constructors on your classes. When it goes to get the things, it checks to see if it has an instance of one already created, and if not, in news one up and stores it. Then the next time the thing is needed, it uses the existing one. This means that the things, being classes and values, end up being singletons. Remember that Angular is a client side framework designed around the concept that the client side code keeps working as the user interacts with the application. There are no calls to the server to retrieve a new visual state as the app is used. So when Angular's dependency injection creates a new instance of something, that something stays in memory, and because the browser is not reloading, that something is able to live around for the run of the application. And because Angular has a component tree, and you can register things at a component level, those singleton of things become available from the point in the component tree that they were registered on down. So something registered at bootstrap is available in the entire component tree. Something registered at a component is available in that component and its children and their children. And finally, if you create your own classes to encapsulate some logic, referred to as services, it is extremely simple to tell Angular that you want it to do constructor injection for your service class as well. You use a decorator for it.