From 61506404a9d0b0b0a92942e2f6f2a7d964437ffe Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Fri, 30 Oct 2020 10:41:33 -0400 Subject: [PATCH] docs: move di-in-action doc to conceptual ref section (#39544) Removes duplicate info, moves document into conceptual reference section, but doesn't edit remaining content. Groups two dependency injection documents together in one expandable nav section. PR Close #39544 --- .../guide/dependency-injection-in-action.md | 172 +----------------- aio/content/navigation.json | 22 ++- 2 files changed, 17 insertions(+), 177 deletions(-) diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md index 0b117be78e..0a9b5b9381 100644 --- a/aio/content/guide/dependency-injection-in-action.md +++ b/aio/content/guide/dependency-injection-in-action.md @@ -1,91 +1,15 @@ # Dependency injection in action -This section explores many of the features of dependency injection (DI) in Angular. -{@a toc} - -See the -of the code in this cookbook. - -{@a nested-dependencies} - -## Nested service dependencies - -The _consumer_ of an injected service doesn't need to know how to create that service. -It's the job of the DI framework to create and cache dependencies. The consumer just -needs to let the DI framework know which dependencies it needs. - -Sometimes a service depends on other services, which may depend on yet other services. -The dependency injection framework resolves these nested dependencies in the correct order. -At each step, the consumer of dependencies declares what it requires in its -constructor, and lets the framework provide them. - -The following example shows that `AppComponent` declares its dependence on `LoggerService` and `UserContext`. - - - - -`UserContext` in turn depends on both `LoggerService` and -`UserService`, another service that gathers information about a particular user. - - - - - -When Angular creates `AppComponent`, the DI framework creates an instance of `LoggerService` and starts to create `UserContextService`. -`UserContextService` also needs `LoggerService`, which the framework already has, so the framework can provide the same instance. `UserContextService` also needs `UserService`, which the framework has yet to create. `UserService` has no further dependencies, so the framework can simply use `new` to instantiate the class and provide the instance to the `UserContextService` constructor. - -The parent `AppComponent` doesn't need to know about the dependencies of dependencies. -Declare what's needed in the constructor (in this case `LoggerService` and `UserContextService`) -and the framework resolves the nested dependencies. - -When all dependencies are in place, `AppComponent` displays the user information. - -
- Logged In User -
- -{@a service-scope} - -## Limit service scope to a component subtree - -An Angular application has multiple injectors, arranged in a tree hierarchy that parallels the component tree. -Each injector creates a singleton instance of a dependency. -That same instance is injected wherever that injector provides that service. -A particular service can be provided and created at any level of the injector hierarchy, -which means that there can be multiple instances of a service if it is provided by multiple injectors. - -Dependencies provided by the root injector can be injected into *any* component *anywhere* in the application. -In some cases, you might want to restrict service availability to a particular region of the application. -For instance, you might want to let users explicitly opt in to use a service, -rather than letting the root injector provide it automatically. - -You can limit the scope of an injected service to a *branch* of the application hierarchy -by providing that service *at the sub-root component for that branch*. -This example shows how to make a different instance of `HeroService` available to `HeroesBaseComponent` -by adding it to the `providers` array of the `@Component()` decorator of the sub-component. - - - - - -When Angular creates `HeroesBaseComponent`, it also creates a new instance of `HeroService` -that is visible only to that component and its children, if any. - -You could also provide `HeroService` to a different component elsewhere in the application. -That would result in a different instance of the service, living in a different injector. +This guide explores many of the features of dependency injection (DI) in Angular.
-Examples of such scoped `HeroService` singletons appear throughout the accompanying sample code, -including `HeroBiosComponent`, `HeroOfTheMonthComponent`, and `HeroesBaseComponent`. -Each of these components has its own `HeroService` instance managing its own independent collection of heroes. +See the for a working example containing the code snippets in this guide.
- {@a multiple-service-instances} - ## Multiple service instances (sandboxing) Sometimes you want multiple instances of a service at *the same level* of the component hierarchy. @@ -272,7 +196,7 @@ Although developers strive to avoid it, many visual effects and third-party tool require DOM access. As a result, you might need to access a component's DOM element. -To illustrate, here's a simplified version of `HighlightDirective` from +To illustrate, here's a minimal version of `HighlightDirective` from the [Attribute Directives](guide/attribute-directives) page. @@ -297,46 +221,6 @@ The following image shows the effect of mousing over the ` Highlighted bios - -{@a providers} - - -## Define dependencies with providers - -This section demonstrates how to write providers that deliver dependent services. - -In order to get a service from a dependency injector, you have to give it a [token](guide/glossary#token). -Angular usually handles this transaction by specifying a constructor parameter and its type. -The parameter type serves as the injector lookup token. -Angular passes this token to the injector and assigns the result to the parameter. - -The following is a typical example. - - - - - -Angular asks the injector for the service associated with `LoggerService` -and assigns the returned value to the `logger` parameter. - -If the injector has already cached an instance of the service associated with the token, -it provides that instance. -If it doesn't, it needs to make one using the provider associated with the token. - -
- -If the injector doesn't have a provider for a requested token, it delegates the request -to its parent injector, where the process repeats until there are no more injectors. -If the search fails, the injector throws an error—unless the request was [optional](guide/dependency-injection-in-action#optional). - - -
- -A new injector has no providers. -Angular initializes the injectors it creates with a set of preferred providers. -You have to configure providers for your own app-specific dependencies. - - {@a defining-providers} @@ -700,53 +584,3 @@ appear *above* the class definition. Break the circularity with `forwardRef`. - - - diff --git a/aio/content/navigation.json b/aio/content/navigation.json index a082b064c7..581474479e 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -238,11 +238,6 @@ "url": "guide/dependency-injection-providers", "title": "DI Providers", "tooltip": "More about the different kinds of providers." - }, - { - "url": "guide/dependency-injection-in-action", - "title": "DI in Action", - "tooltip": "Techniques for dependency injection." } ] } @@ -883,9 +878,20 @@ ] }, { - "url": "guide/hierarchical-dependency-injection", - "title": "Hierarchical Injectors", - "tooltip": "An injector tree parallels the component tree and supports nested dependencies." + "title": "Dependency injection", + "tooltip": "Using dependency injection in Angular.", + "children": [ + { + "url": "guide/hierarchical-dependency-injection", + "title": "Hierarchical Injectors", + "tooltip": "An injector tree parallels the component tree and supports nested dependencies." + }, + { + "url": "guide/dependency-injection-in-action", + "title": "DI in Action", + "tooltip": "Techniques for dependency injection." + } + ] } ] },