The Power of Angular’s Dependency Injection and Directives - iJS Munich 11/2024

ANGULARarchitects.io - Michael Egger-Zikes

The Angular framework's built-in Dependency Injection (DI) mechanism has been integral since its inception, earning praise from the JavaScript ecosystem. While DI is commonly used for root-scoped services, its versatility extends beyond this. In this in-depth talk, developers will gain practical insights to unlock Angular's DI system fully.

From understanding provider hierarchies to utilizing Dependency Injection for customizing your application, attendees will enhance their personal Angular toolbox. Additionally, we'll demystify the Injection tree, clarifying Injector node lifecycles and utilization. Directives are seamlessly integrated to imbue your Components with a generic, reusable approach by locally adding Providers.

Join me as we explore Angular's Dependency Injection system practically to streamline your development workflows for greater efficiency.

Transcript

1. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes ANGULARarchitects.io The Power of Angular’s Dependency Injection and Directives
2. Michael Egger-Zikes (@MikeZks) Tokens, Provider, Injector Nodes provideFn injectFn Dependency Injection Lazy Injection Directives & DI
3. Michael Egger-Zikes (@MikeZks) • Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks About Michael
4. Michael Egger-Zikes (@MikeZks) provideFn() • Configure your App • Root-Level, Lazy Routes • Environment Injector Node • Components, Directives • Element Injector Node • Instead of NgModule.staticMethod() • E. g. provideRouter() Michael Egger-Zikes (@MikeZks)
5. Michael Egger-Zikes (@MikeZks) DEMO Angular Dev Tools Injector Nodes
6. Michael Egger-Zikes (@MikeZks) inject() • Function-based Injection • inject() as alternative to Constructor-Injection • "useDefineForClassFields": false → not needed • Supports Functional Implementation • Easier in Inheritence-Scenarios • Easier Type-Inference • Generic Injection Logic Michael Egger-Zikes (@MikeZks)
7. Michael Egger-Zikes (@MikeZks) DEMO Custom injectFn
8. Michael Egger-Zikes (@MikeZks) Provider Lifecycle • Instance is created for the first Consumer • { providedIn: 'root' } • Better for Tree-Shaking • providers: [ MyService ] • Hard reference, code is bundled even if not used • Instance gets destroyed with Injector Node • Environment or Element? • Environment Nodes are destroyed with App only • Element Nodes may get destroyed often • Routing, @if, etc. Michael Egger-Zikes (@MikeZks)
9. Michael Egger-Zikes (@MikeZks) Provider Features • Add optional Features to a Provider • Optimized for Tree-Shaking • Type-safe: Router Feature can not be added to provideHttpClient() Michael Egger-Zikes (@MikeZks) provideRouter(APP_ROUTES, withComponentInputBinding() )
10. Michael Egger-Zikes (@MikeZks) Environment Providers • Define provideFns to be used in Environment Injectors only • app.config.ts, Route Providers, etc. • Not allowed in Component and Directive Providers Michael Egger-Zikes (@MikeZks) export function provideMyConfig(config: Config): EnvironmentProviders { return makeEnvironmentProviders([ { provide: MY_CONFIG, useValue: config } ]); }
11. Michael Egger-Zikes (@MikeZks) Angular 19 Initializers • provideFns to initialize the App or Features • provideAppInitializer() • Instead of the APP_INITIALIZER Token • Bootstrapping waits until returned Promise or Observable resolves resp. returns an event • provideEnvironmentInitializer() • Instead of the ENVIRONMENT_INITIALIZER Token • Does not wait for async operation to be finished • Replacement for NgModule constructor implementations • Both are Multi Providers • The passed in function runs inside the Injection Context → inject() works Michael Egger-Zikes (@MikeZks) provideAppInitializer(( configState = inject(CONFIG_STATE), configService = inject(ConfigService), ) => configService.reactiveSelect(configState))
12. Michael Egger-Zikes (@MikeZks) DEMO Provider Features Environment Providers Init provideFns
13. Michael Egger-Zikes (@MikeZks) Case Study • Dynamic Navigation Component • Sidebar Links shall be dynamically configurable • Easy interface to provideNavigation() on Root-Level • Tailored Features • Icon • Label • Link Michael Egger-Zikes (@MikeZks)
14. Michael Egger-Zikes (@MikeZks) But how can I do that? ?
15. Michael Egger-Zikes (@MikeZks) Concept • Angular Building Blocks • Config interface • Service to provide the Config State • Component to render based on the Config • That’s generic programming, right? • Isn’t that hard? Michael Egger-Zikes (@MikeZks)
16. Michael Egger-Zikes (@MikeZks) “We choose to go to the moon not because it is easy, but because it is hard!” !
17. Michael Egger-Zikes (@MikeZks) DEMO Generic Navigation Menu Custom provideFn
18. Michael Egger-Zikes (@MikeZks) Lazy Loading • Providers with Lazy Loading support • Similar to NgRx Store Feature States • providerFn in Lazy Routing Config resp. Environment Injector Node • Lazy Loading support is about State Management • Config is added to an existing Provider instance • Runtime code uses the updated Config • e. g. to update the Rendering Michael Egger-Zikes (@MikeZks)
19. Michael Egger-Zikes (@MikeZks) DEMO Lazy Loaded Navigation
20. Michael Egger-Zikes (@MikeZks) Directives & Dependency Injection • Leverage shared Injectors • Directives applied on a Component reuse the existing Element Injector Node • Directives may provide DI Tokens to be consumed by the Component • Directives may add Property Binding support for the Component • Local Provider definitions • W/o any changes inside the Component itself • Behavior/Features/Configs can be added • Case Study • Add a local Navigation Config to a specific instance of the Navigation Component only Michael Egger-Zikes (@MikeZks)
21. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes (@MikeZks) [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-munich-24-di Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops Link mit einfarbiger Füllung
22. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes (@MikeZks)