Angular's dependency injection system
Any lazy loading module can inject (i.e., access) services and tokens from the root application injector and dependent module injector. This is thanks to the CombinedInjector created every time a feature module with dependencies is instantiated.
When an instantiated CMS component overridden by a lazy loading module, it can inject (i.e., access) services from:
- Starting with the feature module injector, including the ModuleInjector hierarchy of dependent modules and root injectors
- The ElementInjector hierarchy implicitly created at each DOM element
The above is a direct translation of the original text, but in order to better understand this concept, we need to have an in-depth discussion of Angular's dependency injection system, lazy loading modules, and Combined Injector.
In Angular, Dependency Injection (DI) is a design pattern that provides a way to manage dependencies between code. DI can make our code cleaner, easier to read, easier to maintain and easier to test. Angular's DI system includes three main parts: an injector, a provider, and a token.
- Injector: The injector is an object that is responsible for creating dependencies when needed and providing these objects to the class that requests them. In Angular, there are two types of injectors: ModuleInjector and ElementInjector. ModuleInjector is used for the module level, while ElementInjector is used for the component level.
- Provider: The provider is an object that tells the injector how to create or get dependencies. The provider can be a class, factory function, value, or an alias.
- Token: The token is a key that the injector uses to find the provider. In Angular, the class name is usually used as the token.
Lazy loading modules
In large applications, we may not want to load all the functional modules at the beginning, but rather to load them when needed. This is called lazy loading. Angular provides a method that allows us to design feature modules as lazy loading modules.
When we configure the module to be lazy, Angular loads the module the first time we navigate to the route of the module. This can significantly improve the initial loading speed of the application, because only the required modules will be loaded and instantiated.
Combined Injector
Each time an lazy load module is instantiated with a dependency, Angular creates a CombinedInjector. This CombinedInjector is a combination of ModuleInjector and ElementInjector. It allows lazy loading modules to access the root application injector and the dependent module injector.
Combined Injector technology in Lazy Loaded Module
Angular is a powerful front-end framework with rich functionality and a modular architecture, with Lazy Loaded Module being one of the impressive features. In Angular, each module has its own dependency injector, responsible for managing the services and dependencies required by the module. An important feature of Lazy Loaded Module is that it can load dynamically at runtime, helping us optimize the performance of our application.
Below, we will introduce in detail the Combined Injector technology in Lazy Loaded Module, which allows services and tokens to be shared among modules, and how to use this technology to improve the efficiency of Angular applications.
What is a combination injector?
In Angular, dependency injection is an important design pattern for managing dependencies between components and services. Each module has its own injector for managing dependencies in that module. However, Lazy Loaded Module introduces a new concept, namely Combined Injector.
A combination injector is a special injector that is able to merge services and tokens from two sources:
- Root Application Injector
- Dependency Modules Injectors
This means that a Lazy Loaded Module can access root application-level services and dependency module-level services, not just limited to dependencies of its own module. This capability allows Lazy Loaded Module to share common services when needed, thus avoiding redundant instantiation and improving application performance and memory utilization.
How Combined Injector works
The core concept of Combined Injector is that whenever a feature module with dependencies is instantiated, a new Combined Injector is created. This new injector will contain services and tokens from different sources.
Specifically, when a lazy loading module is loaded, Angular performs the following steps:
- Create a new Combined Injector.
- Copy the services and tokens from the root application injector into the new Combined Injector.
- Copy the services and tokens in the injector in the dependent module into the new Combined Injector as well.
- When components within a module need to access services, they can be retrieved from the new Combined Injector.
This process ensures that components in the Lazy Loaded Module can easily access the root application-level services, while also accessing services that depend on modules without manually creating additional instances.
Module injector hierarchy and element injector hierarchy
In the previous article, we mentioned that components in Lazy Loaded Module can get services from two sources: module injector hierarchy and element injector hierarchy. Let's take a closer look at these two levels.
Module injector hierarchy
The module injector hierarchy refers to the hierarchy starting from the characteristic module injector. Feature modules are the main modules in the Lazy Loaded Module, which can contain other dependent modules. In this level, the search order of services is to start from the feature module injector and look up step by step until the root application injector.
Consider the following example:
Suppose we have a Lazy Loaded Module that contains a feature module A and a dependency module B. Components in feature module A can obtain services from the injector of feature module A, the injector dependent on module B, and the root application injector. This hierarchy ensures that components can access services throughout the application, not just dependencies limited to their own modules.
Element injector hierarchy
Element injector hierarchy refers to the injector hierarchy created at the DOM element level. An element injector is created whenever a component in an Angular application is instantiated and inserted into the DOM. This injector is different from the module injector level, and its life cycle is associated with the life cycle of the DOM element.
In the element injector hierarchy, the search for services is based on the hierarchy of the DOM element. This means that the component can access services in the DOM element associated with it and its parent element.
Consider the following example:
Suppose we have a component in a Lazy Loaded Module that is nested in multiple parent elements in the DOM. The element injector hierarchy will allow this component to access different services according to its location in the DOM without considering the module's hierarchy.
Practical applications and best practices
It is very useful to understand the Combined Injector and injector hierarchy in Lazy Loaded Module, but how to make the most of these concepts in practical applications?
1. Service Sharing
A common use case is sharing services between Lazy Loaded Modules. If multiple Lazy Loaded Modules require access to the same type of services, you can promote these services to the root module and share them in the Combined Injector. This avoids creating multiple instances and improves performance.
2. Avoid unnecessary dependencies
In Lazy Loaded Module, be careful to add unnecessary dependency modules. Each dependent module increases the complexity and size of the Combined Injector. Reliable modules are introduced only when they are really needed to maintain the lightweight and efficient performance of the application.
3. Use the element injector
For components that need to interact with DOM elements, an element injector can be utilized. This can help components more easily access services associated with their location in the DOM without relying on the module's structure.
in conclusion
Combined Injector technology in Lazy Loaded Module is a powerful feature in Angular that allows services and tokens to be shared between modules, thereby improving application performance and maintainability. Understanding the working principle of Combined Injector and the concepts of module injector hierarchy and element injector hierarchy can help developers better design and optimize Angular applications.
In practical applications, the rational use of Lazy Loaded Module and Combined Injector can help us build efficient and scalable Angular applications while keeping the code neat and maintainable.
The above is the detailed content of the comprehensive analysis of the Angular lazy loading module and the Combined Injector principle. For more information about Angular lazy loading Combined Injector, please follow my other related articles!