Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

build: set up markdown pipeline for di directory of the content guide (#53290)

Browse source 
Set up the markdown pipeline to include the required source files.

PR Close #53290
This commit is contained in:
Joey Perrott 2023-11-30 18:19:44 +00:00 committed by Dylan Hunn
parent f01ff416ce
commit f5e4fe3f62
4 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
adev/src/content/guide/di/BUILD.bazel Normal file
View file

@ -0,0 +1,12 @@
load("@npm//@angular/build-tooling/bazel/markdown_to_html:markdown_to_html.bzl", "markdown_to_html")
markdown_to_html(
name = "di",
srcs = glob([
"*.md",
]),
data = [
"//adev/src/assets/images:dependency_injection.svg",
"//adev/src/content/examples/resolution-modifiers:src/app/self/self.component.ts",
],
)

3
adev/src/content/guide/di/dependency-injection.md
View file

@ -119,7 +119,8 @@ When Angular discovers that a component depends on a service, it first checks if
When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
```mermaid
<!-- TODO(josephperrott): enable this mermaid chart -->
```
graph TD;
subgraph Injector
serviceA[Service A]

11
adev/src/content/guide/di/hierarchical-dependency-injection.md
View file

@ -95,7 +95,8 @@ For more information on `@Optional()`, see the [`@Optional()` section](#optional
The following diagram represents the relationship between the `root` `ModuleInjector` and its parent injectors as the previous paragraphs describe.
```mermaid
<!-- TODO(josephperrott): enable this mermaid chart -->
```
stateDiagram-v2
elementInjector: EnvironmentInjector\n(configured by Angular)\nhas special things like DomSanitizer => providedIn 'platform'
rootInjector: root EnvironmentInjector\n(configured by AppConfig)\nhas things for your app => bootstrapApplication(..., AppConfig)
@ -237,7 +238,7 @@ In this example, there is a parent provider and injecting the service will retur
Another example shows the component class with a provider for `FlowerService`.
In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip <code>&#x1F337;</code>.
<docs-code header="src/app/self/self.component.ts" path="resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
<docs-code header="src/app/self/self.component.ts" path="adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
### `@SkipSelf()`
@ -1114,7 +1115,8 @@ The root injector, marked as (A), uses _generic_ providers for details about `Ca
3. Child component (C) as a child of Component (B). Component (C) defines its own, even _more specialized_ provider for `CarService`.
```mermaid
<!-- TODO(josephperrott): enable this mermaid chart -->
```
graph TD;
subgraph COMPONENT_A[Component A]
subgraph COMPONENT_B[Component B]
@ -1137,7 +1139,8 @@ When you resolve an instance of `Car` at the deepest component (C), its injector
* An `Engine` resolved by injector (B)
* Its `Tires` resolved by the root injector (A).
```mermaid
<!-- TODO(josephperrott): enable this mermaid chart -->
```
graph BT;
subgraph A[" "]

2
adev/src/content/guide/di/overview.md
View file

@ -1,4 +1,4 @@
<docs-decorative-header title="Dependency injection in Angular" imgSrc="assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
<docs-decorative-header title="Dependency injection in Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
"DI" is a design pattern and mechanism for creating and delivering some parts of an app to other parts of an app that require them.
</docs-decorative-header>