build(aio): rename `src/content` to `src/generated`
This commit will definitely require a clean up of your working folder: ``` cd aio git clean -xdf yarn setup ```
This commit is contained in:
Peter Bacon Darwin
Matias Niemelä
parent
1cfb263ee3
commit
5b96fb9320
|
|
@ -9,7 +9,7 @@
|
|||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"content",
|
||||
"generated",
|
||||
"app/search/search-worker.js",
|
||||
"favicon.ico",
|
||||
"pwa-manifest.json"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
# compiled output
|
||||
/dist
|
||||
/out-tsc
|
||||
/src/content
|
||||
/src/generated
|
||||
/tmp
|
||||
|
||||
# dependencies
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ The examples in this page are available as a <live-example></live-example>.
|
|||
## Quickstart example: Transitioning between two states
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ controls the timing of switching between one set of styles and the next:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
|
||||
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -215,7 +215,7 @@ transitions that apply regardless of which state the animation is in. For exampl
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
|
||||
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ regardless of what state it was in before it left.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
|
||||
<img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -242,7 +242,7 @@ The wildcard state `*` also matches `void`.
|
|||
## Example: Entering and leaving
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
|
||||
<img src="generated/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -289,7 +289,7 @@ These two common animations have their own aliases:
|
|||
## Example: Entering and leaving from different states
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
|
||||
<img src="generated/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -308,7 +308,7 @@ This gives you fine-grained control over each transition:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
|
||||
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -341,7 +341,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
|
|||
## Automatic property calculation
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="generated/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -400,7 +400,7 @@ and the delay (or as the *second* value when there is no delay):
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -422,7 +422,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
|
|||
## Multi-step animations with keyframes
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="generated/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -456,7 +456,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
|
|||
## Parallel animation groups
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="generated/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -536,7 +536,7 @@ Rollup does the tree shaking as before.
|
|||
The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
|
||||
|
||||
The following instructions presuppose that you have downloaded the
|
||||
<a href="/content/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
|
||||
<a href="generated/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
|
||||
and run `npm install` on it.
|
||||
|
||||
</div>
|
||||
|
|
@ -602,8 +602,8 @@ showing exactly which application and Angular modules and classes are included i
|
|||
|
||||
Here's the map for _Tour of Heroes_.
|
||||
|
||||
<a href="content/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
|
||||
<a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
|
||||
<img src="generated/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
|
||||
</figure>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
|
||||
<img src="generated/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ Learn these building blocks, and you're on your way.
|
|||
## Modules
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ These are two different and _complementary_ module systems. Use them both to wri
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -244,7 +244,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -284,7 +284,7 @@ Your app can take action at each moment in this lifecycle through optional [life
|
|||
## Templates
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom
|
|||
## Metadata
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -379,7 +379,7 @@ so it can get the list of heroes to display.
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -406,7 +406,7 @@ into actions and value updates. Writing such push/pull logic by hand is tedious,
|
|||
read as any experienced jQuery programmer can attest.
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
|
||||
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -454,7 +454,7 @@ from the root of the application component tree through all child components.
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -463,7 +463,7 @@ Data binding plays an important role in communication
|
|||
between a template and its component.<br class="l-clear-both">
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -478,7 +478,7 @@ Data binding is also important for communication between parent and child compon
|
|||
## Directives
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -556,7 +556,7 @@ Of course, you can also write your own directives. Components such as
|
|||
## Services
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -624,7 +624,7 @@ application logic into services and make those services available to components
|
|||
## Dependency injection
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -656,7 +656,7 @@ This is *dependency injection*.
|
|||
The process of `HeroService` injection looks a bit like this:
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/architecture/injector-injects.png" alt="Service"></img>
|
||||
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
|
||||
<img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -280,7 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ Here are the harness and directive in action.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -491,7 +491,7 @@ Here's how the harness should work when you're done coding.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ You'll pursue these ends in the following high-level steps:
|
|||
3. [Serve](guide/cli-quickstart#serve) the application.
|
||||
4. [Edit](guide/cli-quickstart#first-component) the application.
|
||||
|
||||
And you can also <a href="/content/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
|
||||
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
|
||||
|
||||
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ Your app greets you with a message:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
|
||||
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ Open `src/app/app.component.css` and give the component some style.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
|
||||
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ The running application displays three heroes:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
|
||||
<img src="generated/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
|
||||
<img src="generated/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ Here's the output of a button-pushing sequence:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
|
||||
<img src="generated/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ and the method processes it:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
|
||||
<img src="generated/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -272,7 +272,7 @@ Here we see the parent and child working together.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
|
||||
<img src="generated/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -424,7 +424,7 @@ facilitated by the service:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
|
||||
<img src="generated/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -337,7 +337,7 @@ Find this example in <live-example name="dependency-injection-in-action">live co
|
|||
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -403,7 +403,7 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
|
|||
It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -440,7 +440,7 @@ Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest o
|
|||
Here's the `HeroBiosAndContactsComponent` in action.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -450,7 +450,7 @@ until it finds the logger at the `AppComponent` level. The logger logic kicks in
|
|||
with the gratuitous "!!!", indicating that the logger was found.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -495,7 +495,7 @@ 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='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios"></img>
|
||||
</figure>
|
||||
|
||||
{@a providers}
|
||||
|
|
@ -573,7 +573,7 @@ The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and
|
|||
It's visually simple: a few properties and the logs produced by a logger.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -728,7 +728,7 @@ Now put it to use in a simplified version of the `HeroOfTheMonthComponent`.
|
|||
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='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -743,7 +743,7 @@ Behind the scenes, Angular actually sets the `logger` parameter to the full serv
|
|||
The following image, which displays the logging date, confirms the point:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -941,7 +941,7 @@ to display a *sorted* list of heroes.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1154,7 +1154,7 @@ the same way you've done it before:
|
|||
Here's *Alex* and family in action:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1215,7 +1215,7 @@ Here's *Alice*, *Barry* and family in action:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action"></img>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ The final UI looks like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/displaying-data/final.png" alt="Final UI"></img>
|
||||
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ inside the `<my-app>` tag.
|
|||
Now run the app. It should display the title and hero name:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
|
||||
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -233,7 +233,7 @@ Now the heroes appear in an unordered list.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
|
||||
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ Here are two sample components and the `AdComponent` interface for reference:
|
|||
The final ad banner looks like this:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
|
||||
<img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ Saving and retrieving the data is an exercise for another time.
|
|||
The final form looks like this:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
|
||||
<img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ You'll learn to build a template-driven form that looks like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
|
||||
<img src="generated/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ If you delete the hero name, the form displays a validation error in an attentio
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
|
||||
<img src="generated/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -372,7 +372,7 @@ Running the app right now would be disappointing.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
|
||||
<img src="generated/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -456,7 +456,7 @@ At some point it might look like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
|
||||
<img src="generated/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -529,7 +529,7 @@ If you run the app now and change every hero model property, the form might disp
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
|
||||
<img src="generated/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -642,7 +642,7 @@ The actions and effects are as follows:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
|
||||
<img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -651,7 +651,7 @@ You should see the following transitions and class names:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
|
||||
<img src="generated/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -671,7 +671,7 @@ on the left of the input box:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
|
||||
<img src="generated/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -705,7 +705,7 @@ When the user deletes the name, the form should look like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
|
||||
<img src="generated/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ open simultaneously.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
|
||||
<img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ Each tax return component has the following characteristics:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
|
||||
<img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ Component (B) is the parent of another component (C) that defines its own, even
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
|
||||
<img src="generated/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -247,7 +247,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
|
||||
<img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
|
|||
It works like this:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
|
||||
<img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -746,7 +746,7 @@ types in a text box:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
|
||||
<img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*.
|
|||
Here's how it will work after refactoring:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
|
||||
<img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
|
||||
<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -465,7 +465,7 @@ The peek-a-boo exists to show how Angular calls the hooks in the expected order.
|
|||
This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
|
||||
<img src="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -549,7 +549,7 @@ with an entry in the *Hook Log* as seen here:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
|
||||
<img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -672,7 +672,7 @@ Here's the sample in action as the user makes changes.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
|
||||
<img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -718,7 +718,7 @@ so you can see how often `DoCheck` is called. The results are illuminating:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
|
||||
<img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -795,7 +795,7 @@ for one turn of the browser's JavaScript cycle and that's just long enough.
|
|||
Here's *AfterView* in action:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
|
||||
<img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -859,7 +859,7 @@ It tells Angular where to insert that content.
|
|||
In this case, the projected content is the `<my-child>` from the parent.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
|
||||
<img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ As you click the button, the displayed date alternates between
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
|
||||
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -237,7 +237,7 @@ Now you need a component to demonstrate the pipe.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
|
||||
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -285,7 +285,7 @@ your pipe and two-way data binding with `ngModel`.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
|
||||
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -372,7 +372,7 @@ code with checkbox switches and additional displays to help you experience these
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
|
||||
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -559,7 +559,7 @@ The component renders as the following:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/pipes/hero-list.png' alt="Hero List"></img>
|
||||
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -353,7 +353,7 @@ Now that everything is wired up, the browser should display something like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
|
||||
<img src="generated/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -457,7 +457,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
|
||||
<img src="generated/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -567,7 +567,7 @@ The browser displays the following:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
|
||||
<img src="generated/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -696,7 +696,7 @@ with the nested address `FormGroup`:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
|
||||
<img src="generated/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1052,7 +1052,7 @@ Together they look a bit like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
|
||||
<img src="generated/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1265,7 +1265,7 @@ Back in the browser, select the hero named "Magneta".
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
|
||||
<img src="generated/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1343,7 +1343,7 @@ After you implement both features in this section, the form will look like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
|
||||
<img src="generated/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -533,7 +533,7 @@ and the *Heroes* view with its list of heroes.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
|
||||
<img src='generated/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -541,7 +541,7 @@ and the *Heroes* view with its list of heroes.
|
|||
Select one hero and the app takes you to a hero editing screen.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
<img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -558,7 +558,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
|
||||
<img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -571,7 +571,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
<img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -587,7 +587,7 @@ Up pops a dialog box.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
|
||||
<img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -609,7 +609,7 @@ Proceed to the first application milestone.
|
|||
Begin with a simple version of the app that navigates between two empty views.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
|
||||
<img src='generated/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -765,7 +765,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
|
||||
<img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1250,7 +1250,7 @@ Here's how the user will experience this version of the app:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/router-2-anim.gif' alt="App in action"></img>
|
||||
<img src='generated/images/guide/router/router-2-anim.gif' alt="App in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1880,7 +1880,7 @@ it would be nice if the viewed hero was preselected in the list.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/selected-hero.png' alt="Selected hero"></img>
|
||||
<img src='generated/images/guide/router/selected-hero.png' alt="Selected hero"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2098,7 +2098,7 @@ Look for it within the repeated `<li>` tag as shown here:
|
|||
When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/selected-hero.png' alt="Selected List"></img>
|
||||
<img src='generated/images/guide/router/selected-hero.png' alt="Selected List"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2396,7 +2396,7 @@ If your app had many feature areas, the app component trees might look like this
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/component-tree.png' alt="Component Tree"></img>
|
||||
<img src='generated/images/guide/router/component-tree.png' alt="Component Tree"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2695,7 +2695,7 @@ and two buttons, "Send" and "Cancel".
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
|
||||
<img src='generated/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ tag but keeps safe content such as the text content of the `<script>` tag and th
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
|
||||
<img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
|
||||
<img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ See the <live-example name="set-document-title"></live-example>.
|
|||
</td>
|
||||
|
||||
<td>
|
||||
<img src='content/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='content/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
|
||||
<img src='generated/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='generated/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
@ -89,7 +89,7 @@ You can inject the `Title` service into the root `AppComponent` and expose a bin
|
|||
Bind that method to three anchor tags and voilà!
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
|
||||
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ Confirm that fact using browser developer tools to inspect the DOM.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
|
||||
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ While invisible, the element remains in the DOM.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
|
||||
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -261,7 +261,7 @@ Only the finished product ends up in the DOM.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
|
||||
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -498,7 +498,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
|
||||
<img src='generated/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -564,7 +564,7 @@ The constructed paragraph renders strangely.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
|
||||
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -588,7 +588,7 @@ the drop down is empty.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
|
||||
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -613,7 +613,7 @@ It renders properly.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
|
||||
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -631,7 +631,7 @@ The drop down works properly.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
|
||||
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -788,7 +788,7 @@ When the `condition` is truthy, the top (A) paragraph is removed and the bottom
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
|
||||
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1069,7 +1069,7 @@ content harmlessly.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
|
||||
<img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1839,7 +1839,7 @@ Here are all variations in action, including the uppercase version:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
|
||||
<img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2134,7 +2134,7 @@ Here is an illustration of the _trackBy_ effect.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
|
||||
<img src='generated/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2169,7 +2169,7 @@ Angular puts only the *selected* element into the DOM.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
|
||||
<img src='generated/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2419,7 +2419,7 @@ The terms _input_ and _output_ reflect the perspective of the target directive.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
|
||||
<img src='generated/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -389,7 +389,7 @@ The Angular CLI has different commands to do the same thing. Adjust accordingly.
|
|||
After a few moments, karma opens a browser and starts writing to the console.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
|
||||
<img src='generated/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -473,7 +473,7 @@ Debug specs in the browser in the same way that you debug an application.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
|
||||
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1916,7 +1916,7 @@ Inspect and download _all_ of the guide's application test code with this <live-
|
|||
The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
|
||||
<img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -2507,7 +2507,7 @@ A better solution is to create an artificial test component that demonstrates al
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
|
||||
<img src='generated/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -338,7 +338,7 @@ everything work seamlessly:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
|
||||
<img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -383,7 +383,7 @@ ways:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
|
||||
<img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ AngularJS and Angular approaches. Here's what happens:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="content/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
|
||||
<img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -571,7 +571,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
|
|||
### Using Angular Components from AngularJS Code
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -735,7 +735,7 @@ For example, we can easily make multiple copies of the component using `ng-repe
|
|||
### Using AngularJS Component Directives from Angular Code
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -938,7 +938,7 @@ and then provide the input and output using Angular template syntax:
|
|||
### Projecting AngularJS Content into Angular Components
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -985,7 +985,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
|
|||
### Transcluding Angular Content into AngularJS Component Directives
|
||||
|
||||
<figure>
|
||||
<img src="content/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ Here's what the UI displays:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
|
||||
<img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ Type something in the input box, and watch the display update with each keystrok
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
|
||||
<img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -235,7 +235,7 @@ Then Angular calls the event handler only when the user presses _Enter_.
|
|||
Here's how it works.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
|
||||
<img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ clicking **Add**.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
|
||||
<img src='generated/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
|
|||
* [Highlights](guide/webpack#highlights)
|
||||
* [Conclusion](guide/webpack#conclusion)
|
||||
|
||||
You can also <a href="/content/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
|
||||
You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
|
||||
|
||||
{@a what-is-webpack}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
|
||||
|
||||
<div class="card-container clearfix">
|
||||
<a href="/content/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
|
||||
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
|
||||
title="Experience Angular in a live coding environment">
|
||||
<section>Experience Angular</section>
|
||||
<p>A quick look at an Angular application.</p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
2.1.0 Now Available</a></div>
|
||||
<p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
|
||||
announced adoption of Semantic Versioning...</p>
|
||||
<div class="author"><img src="content/images/bios/stephenfluin.jpg">
|
||||
<div class="author"><img src="generated/images/bios/stephenfluin.jpg">
|
||||
<div class="posted">Posted by <b>Stephen Fluin</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<p>In order for the ecosystem around Angular to thrive, developers need stability from the
|
||||
Angular framework so that reusable components and libraries, tools and learned practices
|
||||
don’t go obsolete unexpectedly...</p>
|
||||
<div class="author"><img src="content/images/bios/igor-minar.jpg">
|
||||
<div class="author"><img src="generated/images/bios/igor-minar.jpg">
|
||||
<div class="posted">Posted by <b>Igor Minar</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div>
|
||||
<p>I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2
|
||||
application with a pre-filled SQLite database rather than populating it on-the-fly....</p>
|
||||
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
|
||||
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
|
||||
<div class="posted">Posted by <b>Nic Raboy</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<p>If there was one feature in Angular that made us go “Wow”, then it was probably its
|
||||
two-way data binding system. Changes in the application state have been automagically
|
||||
reflected into the view...</p>
|
||||
<div class="author"><img src="content/images/bios/angular-gde-bio-placeholder.png">
|
||||
<div class="author"><img src="generated/images/bios/angular-gde-bio-placeholder.png">
|
||||
<div class="posted">Posted by <b>Pascal Precht</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
a Material Design app with Angular 2</a></div>
|
||||
<p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
|
||||
Material and the Angular CLI...</p>
|
||||
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
|
||||
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
|
||||
<div class="posted">Posted by <b>Daniel Zen</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
Angular CLI to create Angular 2 applications in Docker</a></div>
|
||||
<p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
|
||||
fun to do a quick demo...</p>
|
||||
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
|
||||
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
|
||||
<div class="posted">Posted by <b>Simeon Bateman</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ view and the most heroic heroes:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
|
||||
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ where you can change the hero's name.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
|
||||
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ If you click "Heroes," the app displays the "Heroes" master list view.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
|
||||
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ The following diagram captures all of the navigation options.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
|
||||
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ Here's the app in action:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
|
||||
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -394,7 +394,7 @@ like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
|
||||
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -435,7 +435,7 @@ After clicking "Magneta", the list should look like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
|
||||
<img src='generated/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ When you’re done, users will be able to navigate the app like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
|
||||
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -967,7 +967,7 @@ After clicking a hero, users should see something like this below the hero list:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
|
||||
<img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
@ -1221,7 +1221,7 @@ Look at the app now. The dashboard, heroes, and navigation links are styled.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
|
||||
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -700,7 +700,7 @@ If you enter characters that match any existing hero names, you'll see something
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='content/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
|
||||
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"static.ignore": [
|
||||
"\\.js\\.map$",
|
||||
"^/assets/images/.*/unused/",
|
||||
"^/content/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
|
||||
"^/generated/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
|
||||
],
|
||||
"routing": {
|
||||
"index": "/index.html",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"deploy-preview": "scripts/deploy-preview.sh",
|
||||
"deploy-staging": "scripts/deploy-staging.sh",
|
||||
"check-env": "node ../tools/check-environment.js",
|
||||
"predocs": "rimraf src/content",
|
||||
"predocs": "rimraf src/generated/{docs,*.json}",
|
||||
"docs": "dgeni ./tools/transforms/angular.io-package",
|
||||
"docs-watch": "node tools/transforms/authors-package/watchr.js",
|
||||
"docs-lint": "eslint --ignore-path=\"tools/transforms/.eslintignore\" tools/transforms",
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ The mapping of URL path to the path to fetch the document contents is simply:
|
|||
```ts
|
||||
private computePath(url) {
|
||||
url = url.startsWith('/') ? url : '/' + url;
|
||||
return 'content/docs' + url + '.json';
|
||||
return 'generated/docs' + url + '.json';
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -544,7 +544,7 @@ class TestHttp {
|
|||
if (/navigation\.json/.test(url)) {
|
||||
data = this.navJson;
|
||||
} else {
|
||||
const match = /content\/docs\/(.+)\.json/.exec(url);
|
||||
const match = /generated\/docs\/(.+)\.json/.exec(url);
|
||||
const id = match[1];
|
||||
// Make up a title for test purposes
|
||||
const title = id.split('/').pop().replace(/^([a-z])/, (_, letter) => letter.toUpperCase());
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { DocumentService, DocumentContents,
|
|||
FETCHING_ERROR_ID, FILE_NOT_FOUND_ID } from './document.service';
|
||||
|
||||
|
||||
const CONTENT_URL_PREFIX = 'content/docs/';
|
||||
const CONTENT_URL_PREFIX = 'generated/docs/';
|
||||
|
||||
function createResponse(body: any) {
|
||||
return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ import { Logger } from 'app/shared/logger.service';
|
|||
export const FILE_NOT_FOUND_ID = 'file-not-found';
|
||||
export const FETCHING_ERROR_ID = 'fetching-error';
|
||||
|
||||
const CONTENT_URL_PREFIX = 'content/docs/';
|
||||
export const CONTENT_URL_PREFIX = 'generated/';
|
||||
export const DOC_CONTENT_URL_PREFIX = CONTENT_URL_PREFIX + 'docs/';
|
||||
const FETCHING_ERROR_CONTENTS = `
|
||||
<div class="nf-container l-flex-wrap flex-center">
|
||||
<div class="nf-icon material-icons">error_outline</div>
|
||||
|
|
@ -56,7 +57,7 @@ export class DocumentService {
|
|||
}
|
||||
|
||||
private fetchDocument(id: string): Observable<DocumentContents> {
|
||||
const requestPath = `content/docs/${id}.json`;
|
||||
const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
|
||||
this.logger.log('fetching document from', requestPath);
|
||||
const subject = new AsyncSubject();
|
||||
this.http
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ describe('ApiService', () => {
|
|||
it('should connect to the server w/ expected URL', () => {
|
||||
service.fetchSections();
|
||||
expect(backend.connectionsArray.length).toEqual(1);
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('content/docs/api/api-list.json');
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('generated/docs/api/api-list.json');
|
||||
});
|
||||
|
||||
it('should refresh the #sections observable w/ new content on second call', () => {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import 'rxjs/add/operator/map';
|
|||
import 'rxjs/add/operator/takeUntil';
|
||||
|
||||
import { Logger } from 'app/shared/logger.service';
|
||||
import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
export interface ApiItem {
|
||||
name: string;
|
||||
|
|
@ -29,7 +30,7 @@ export interface ApiSection {
|
|||
@Injectable()
|
||||
export class ApiService implements OnDestroy {
|
||||
|
||||
private apiBase = 'content/docs/api/';
|
||||
private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
|
||||
private apiListJsonDefault = 'api-list.json';
|
||||
private firstTime = true;
|
||||
private onDestroy = new Subject();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Contributor } from './contributors.model';
|
||||
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-contributor',
|
||||
|
|
@ -57,7 +58,7 @@ import { Contributor } from './contributors.model';
|
|||
export class ContributorComponent {
|
||||
@Input() person: Contributor;
|
||||
noPicture = '_no-one.png';
|
||||
pictureBase = 'content/images/bios/';
|
||||
pictureBase = CONTENT_URL_PREFIX + 'images/bios/';
|
||||
|
||||
flipCard(person) {
|
||||
person.isFlipped = !person.isFlipped;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ describe('ContributorService', () => {
|
|||
|
||||
it('should make a single connection to the server', () => {
|
||||
expect(backend.connectionsArray.length).toEqual(1);
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('content/contributors.json');
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('generated/contributors.json');
|
||||
});
|
||||
|
||||
describe('#contributors', () => {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import 'rxjs/add/operator/publishLast';
|
|||
|
||||
import { Logger } from 'app/shared/logger.service';
|
||||
import { Contributor, ContributorGroup } from './contributors.model';
|
||||
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
const contributorsPath = 'content/contributors.json';
|
||||
const contributorsPath = CONTENT_URL_PREFIX + 'contributors.json';
|
||||
const knownGroups = ['Angular', 'Community'];
|
||||
|
||||
@Injectable()
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
/* tslint:disable component-selector */
|
||||
import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
|
||||
|
||||
const defaultPlnkrImg = 'plunker/placeholder.png';
|
||||
const imageBase = 'content/images/';
|
||||
const liveExampleBase = 'content/live-examples/';
|
||||
const zipBase = 'content/zips/';
|
||||
const imageBase = CONTENT_URL_PREFIX + 'images/';
|
||||
const liveExampleBase = CONTENT_URL_PREFIX + 'live-examples/';
|
||||
const zipBase = CONTENT_URL_PREFIX + 'zips/';
|
||||
|
||||
/**
|
||||
* Angular.io Live Example Embedded Component
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ describe('ResourceService', () => {
|
|||
|
||||
it('should make a single connection to the server', () => {
|
||||
expect(backend.connectionsArray.length).toEqual(1);
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('content/resources.json');
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('generated/resources.json');
|
||||
});
|
||||
|
||||
describe('#categories', () => {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import 'rxjs/add/operator/publishLast';
|
|||
|
||||
import { Logger } from 'app/shared/logger.service';
|
||||
import { Category, Resource, SubCategory } from './resource.model';
|
||||
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
const resourcesPath = 'content/resources.json';
|
||||
const resourcesPath = CONTENT_URL_PREFIX + 'resources.json';
|
||||
|
||||
@Injectable()
|
||||
export class ResourceService {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ describe('NavigationService', () => {
|
|||
|
||||
it('should make a single connection to the server', () => {
|
||||
expect(backend.connectionsArray.length).toEqual(1);
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('content/navigation.json');
|
||||
expect(backend.connectionsArray[0].request.url).toEqual('generated/navigation.json');
|
||||
});
|
||||
|
||||
it('should expose the server response', () => {
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ import 'rxjs/add/operator/publishReplay';
|
|||
|
||||
import { Logger } from 'app/shared/logger.service';
|
||||
import { LocationService } from 'app/shared/location.service';
|
||||
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
|
||||
|
||||
// Import and re-export the Navigation model types
|
||||
import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
|
||||
export { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
|
||||
|
||||
const navigationPath = 'content/navigation.json';
|
||||
const navigationPath = CONTENT_URL_PREFIX + 'navigation.json';
|
||||
|
||||
@Injectable()
|
||||
export class NavigationService {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
/* eslint-env worker */
|
||||
/* global importScripts, lunr */
|
||||
|
||||
var SEARCH_TERMS_URL = '/content/docs/app/search-data.json';
|
||||
var SEARCH_TERMS_URL = '/generated/docs/app/search-data.json';
|
||||
|
||||
// NOTE: This needs to be kept in sync with `ngsw-manifest.json`.
|
||||
importScripts('https://unpkg.com/lunr@0.7.2/lunr.min.js');
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ const ExampleZipper = require('./exampleZipper');
|
|||
const path = require('canonical-path');
|
||||
|
||||
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
|
||||
const ZIPS_PATH = path.join(__dirname, '../../src/content/zips');
|
||||
const ZIPS_PATH = path.join(__dirname, '../../src/generated/zips');
|
||||
|
||||
new ExampleZipper(EXAMPLES_PATH, ZIPS_PATH);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const regularPlunker = require('./regularPlunker');
|
|||
const embeddedPlunker = require('./embeddedPlunker');
|
||||
|
||||
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
|
||||
const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/content/live-examples');
|
||||
const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/generated/live-examples');
|
||||
|
||||
regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
|
||||
embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ The local packages have unit tests that you can execute by running `yarn docs-te
|
|||
|
||||
## What does it generate?
|
||||
|
||||
The output from dgeni is written to files in the `src/content` folder.
|
||||
The output from dgeni is written to files in the `src/generated` folder.
|
||||
|
||||
Notably this includes a JSON file containing the partial HTML for each "page" of the documentation, such as API pages and guides.
|
||||
It also includes JSON files that contain metadata about the documentation such as navigation data and
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
const fs = require('fs');
|
||||
const {resolve} = require('canonical-path');
|
||||
const {generateDocs} = require('./index.js');
|
||||
const rootPath = resolve(__dirname, '../../../..');
|
||||
const outputPath = resolve(rootPath, 'aio/src/content/docs');
|
||||
const { DOCS_OUTPUT_PATH } = require('../config');
|
||||
|
||||
describe('authors-package', () => {
|
||||
let files;
|
||||
|
|
@ -18,10 +17,10 @@ describe('authors-package', () => {
|
|||
it('should generate marketing docs if the "fileChanged" is a marketing doc', (done) => {
|
||||
generateDocs('aio/content/marketing/about.html', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'about.json'));
|
||||
expect(files).toContain(resolve(outputPath, '../navigation.json'));
|
||||
expect(files).toContain(resolve(outputPath, '../contributors.json'));
|
||||
expect(files).toContain(resolve(outputPath, '../resources.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'about.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../navigation.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../contributors.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../resources.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -29,7 +28,7 @@ describe('authors-package', () => {
|
|||
it('should generate tutorial docs if the "fileChanged" is a tutorial doc', (done) => {
|
||||
generateDocs('aio/content/tutorial/toh-pt5.md', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'tutorial/toh-pt5.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt5.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -37,7 +36,7 @@ describe('authors-package', () => {
|
|||
it('should generate tutorial docs if the "fileChanged" is the tutorial index', (done) => {
|
||||
generateDocs('aio/content/tutorial/index.md', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'tutorial.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -45,7 +44,7 @@ describe('authors-package', () => {
|
|||
it('should generate tutorial docs if the "fileChanged" is a tutorial example', (done) => {
|
||||
generateDocs('aio/content/examples/toh-pt3/app/app.component.1.html', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'tutorial/toh-pt3.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt3.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -53,7 +52,7 @@ describe('authors-package', () => {
|
|||
it('should generate guide doc if the "fileChanged" is a guide doc', (done) => {
|
||||
generateDocs('aio/content/guide/architecture.md', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'guide/architecture.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -61,7 +60,7 @@ describe('authors-package', () => {
|
|||
it('should generate guide doc if the "fileChanged" is a guide example', (done) => {
|
||||
generateDocs('aio/content/examples/architecture/src/app/app.module.ts', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'guide/architecture.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
|
|
@ -69,16 +68,16 @@ describe('authors-package', () => {
|
|||
it('should generate API doc if the "fileChanged" is an API doc', (done) => {
|
||||
generateDocs('packages/forms/src/form_builder.ts', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'api/forms/FormBuilder.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
}, 8000);
|
||||
|
||||
it('should generate API doc if the "fileChanged" is an API example', (done) => {
|
||||
generateDocs('packages/examples/forms/ts/formBuilder/form_builder_example.ts', { silent: true }).then(() => {
|
||||
expect(fs.writeFile).toHaveBeenCalled();
|
||||
expect(files).toContain(resolve(outputPath, 'api/forms/FormBuilder.json'));
|
||||
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
|
||||
done();
|
||||
});
|
||||
}, 4000);
|
||||
}, 8000);
|
||||
});
|
||||
|
|
@ -1,14 +1,12 @@
|
|||
/* eslint no-console: "off" */
|
||||
const watchr = require('watchr');
|
||||
const {resolve, relative} = require('canonical-path');
|
||||
const {relative} = require('canonical-path');
|
||||
const {generateDocs} = require('./index.js');
|
||||
const rootPath = resolve(__dirname, '../../../..');
|
||||
const contentsPath = resolve(rootPath, 'aio/content');
|
||||
const apiPath = resolve(rootPath, 'packages');
|
||||
const { PROJECT_ROOT, CONTENTS_PATH, API_SOURCE_PATH } = require('../config');
|
||||
|
||||
function listener(changeType, fullPath) {
|
||||
try {
|
||||
const relativePath = relative(rootPath, fullPath);
|
||||
const relativePath = relative(PROJECT_ROOT, fullPath);
|
||||
console.log('The file', relativePath, `was ${changeType}d at`, new Date().toUTCString());
|
||||
generateDocs(relativePath);
|
||||
} catch(err) {
|
||||
|
|
@ -38,12 +36,12 @@ if (process.argv.indexOf('--watch-only') === -1) {
|
|||
p.then(() => {
|
||||
console.log('===================================================================');
|
||||
console.log('Started watching files in:');
|
||||
console.log(' - ', contentsPath);
|
||||
console.log(' - ', apiPath);
|
||||
console.log(' - ', CONTENTS_PATH);
|
||||
console.log(' - ', API_SOURCE_PATH);
|
||||
console.log('Doc gen will run when you change a file in either of these folders.');
|
||||
console.log('===================================================================');
|
||||
|
||||
watchr.open(contentsPath, listener, next);
|
||||
watchr.open(apiPath, listener, next);
|
||||
watchr.open(CONTENTS_PATH, listener, next);
|
||||
watchr.open(API_SOURCE_PATH, listener, next);
|
||||
|
||||
});
|
||||
|
|
@ -6,7 +6,7 @@ const AIO_PATH = resolve(PROJECT_ROOT, 'aio');
|
|||
const TEMPLATES_PATH = resolve(AIO_PATH, 'tools/transforms/templates');
|
||||
const API_TEMPLATES_PATH = resolve(TEMPLATES_PATH, 'api');
|
||||
const CONTENTS_PATH = resolve(AIO_PATH, 'content');
|
||||
const OUTPUT_PATH = resolve(AIO_PATH, 'src/content');
|
||||
const OUTPUT_PATH = resolve(AIO_PATH, 'src/generated');
|
||||
const DOCS_OUTPUT_PATH = resolve(OUTPUT_PATH, 'docs');
|
||||
const API_SOURCE_PATH = resolve(PROJECT_ROOT, 'packages');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue