feat(docs-infra): simplify image styles and remove figure references (#33748)
Reference #33259 Removes figures elements as AIO is not typically using captions or image groups where figures would be necessary or appropriate PR Close #33748
This commit is contained in:
Stefanie Fluin
committed by
Alex Rickabaugh
Alex Rickabaugh
parent
72b9276ec9
commit
fe4447d568
@ -40,11 +40,9 @@ and the framework resolves the nested dependencies.
|
||||
|
||||
When all dependencies are in place, `AppComponent` displays the user information.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
|
||||
</div>
|
||||
|
||||
{@a service-scope}
|
||||
|
||||
@ -133,11 +131,9 @@ The template displays this data-bound property.
|
||||
Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
|
||||
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
|
||||
</div>
|
||||
|
||||
{@a qualify-dependency-lookup}
|
||||
|
||||
@ -195,11 +191,9 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template.
|
||||
|
||||
The result is shown below, with the hero's telephone number from `HeroContactComponent` projected above the hero description.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
|
||||
</div>
|
||||
|
||||
|
||||
Here's `HeroContactComponent`, which demonstrates the qualifying decorators.
|
||||
@ -227,11 +221,9 @@ When the property is marked as optional, Angular sets `loggerService` to null an
|
||||
|
||||
Here's `HeroBiosAndContactsComponent` in action.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -240,11 +232,9 @@ until it finds the logger at the `AppComponent` level.
|
||||
The logger logic kicks in and the hero display updates
|
||||
with the "!!!" marker to indicate that the logger was found.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
|
||||
</div>
|
||||
|
||||
|
||||
If you restore the `@Host()` decorator and comment out `@Optional`,
|
||||
@ -304,11 +294,9 @@ first without a value (yielding the default color) and then with an assigned col
|
||||
|
||||
The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
|
||||
</div>
|
||||
|
||||
{@a providers}
|
||||
|
||||
@ -359,11 +347,9 @@ You learned about some other methods in [Dependency Providers](guide/dependency-
|
||||
The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
|
||||
It's visually simple: a few properties and the logs produced by a logger.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
|
||||
</div>
|
||||
|
||||
The code behind it customizes how and where the DI framework provides dependencies.
|
||||
The use cases illustrate different ways to use the [*provide* object literal](guide/dependency-injection-providers#provide) to associate a definition object with a DI token.
|
||||
@ -474,11 +460,9 @@ The following example puts `MinimalLogger` to use in a simplified version of `He
|
||||
|
||||
The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
|
||||
</div>
|
||||
|
||||
|
||||
Behind the scenes, Angular sets the `logger` parameter to the full service registered under the `LoggingService` token, which happens to be the `DateLoggerService` instance that was [provided above](guide/dependency-injection-in-action#useclass).
|
||||
@ -488,11 +472,9 @@ Behind the scenes, Angular sets the `logger` parameter to the full service regis
|
||||
|
||||
This is illustrated in the following image, which displays the logging date.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -645,11 +627,9 @@ and then pass them down to the base class through the constructor.
|
||||
In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`
|
||||
to display a *sorted* list of heroes.
|
||||
|
||||
<figure class="lightbox">
|
||||
<div class="card">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
|
||||
</div>
|
||||
</figure>
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
|
||||
</div>
|
||||
|
||||
The `HeroesBaseComponent` can stand on its own.
|
||||
It demands its own instance of `HeroService` to get heroes
|
||||
|
||||
Reference in New Issue
Block a user