refactor(aio): move content-related images to `content/images/`
|
@ -66,7 +66,7 @@ The examples in this page are available as a <live-example></live-example>.
|
|||
## Quickstart example: Transitioning between two states
|
||||
|
||||
<figure>
|
||||
<img src="assets/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="content/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -172,7 +172,7 @@ controls the timing of switching between one set of styles and the next:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/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="content/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -220,7 +220,7 @@ transitions that apply regardless of which state the animation is in. For exampl
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -237,7 +237,7 @@ regardless of what state it was in before it left.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -247,7 +247,7 @@ The wildcard state `*` also matches `void`.
|
|||
## Example: Entering and leaving
|
||||
|
||||
<figure>
|
||||
<img src="assets/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
|
||||
<img src="content/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -294,7 +294,7 @@ These two common animations have their own aliases:
|
|||
## Example: Entering and leaving from different states
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="content/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -313,7 +313,7 @@ This gives you fine-grained control over each transition:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/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="content/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -346,7 +346,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
|
|||
## Automatic property calculation
|
||||
|
||||
<figure>
|
||||
<img src="assets/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="content/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -405,7 +405,7 @@ and the delay (or as the *second* value when there is no delay):
|
|||
|
||||
|
||||
<figure>
|
||||
<img src="assets/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
|
||||
<img src="content/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -427,7 +427,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
|
|||
## Multi-step animations with keyframes
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="content/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -461,7 +461,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
|
|||
## Parallel animation groups
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -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="assets/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
|
||||
<a href="content/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/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="content/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="assets/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
|
||||
<img src="content/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="assets/images/guide/architecture/injector-injects.png" alt="Service"></img>
|
||||
<img src="content/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="assets/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
|
||||
<img src="content/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="assets/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
|
||||
<img src="content/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="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
|
||||
<img src="content/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="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
|
||||
<img src="content/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -123,7 +123,7 @@ Your app greets you with a message:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
|
||||
<img src='content/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='assets/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
|
||||
<img src='content/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="assets/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
|
||||
<img src="content/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="assets/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
|
||||
<img src="content/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="assets/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
|
||||
<img src="content/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="assets/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
|
||||
<img src="content/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="assets/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
|
||||
<img src="content/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="assets/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
|
||||
<img src="content/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="assets/images/guide/dependency-injection/logged-in-user.png" alt="Logged In User"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/hero-bios.png" alt="Bios"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/hero-bio-and-content.png" alt="bio and contact"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/highlight.png" alt="Highlighted bios"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/sorted-heroes.png" alt="Sorted Heroes"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/alex.png" alt="Alex in action"></img>
|
||||
<img src="content/images/guide/dependency-injection/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="assets/images/guide/dependency-injection/alice.png" alt="Alice in action"></img>
|
||||
<img src="content/images/guide/dependency-injection/alice.png" alt="Alice in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@ The final UI looks like this:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/displaying-data/final.png" alt="Final UI"></img>
|
||||
<img src="content/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="assets/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
|
||||
<img src="content/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="assets/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
|
||||
<img src="content/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="assets/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
|
||||
<img src="content/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -217,7 +217,7 @@ Saving and retrieving the data is an exercise for another time.
|
|||
The final form looks like this:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
|
||||
<img src="content/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="assets/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
|
||||
<img src="content/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="assets/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
|
||||
<img src="content/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="assets/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
|
||||
<img src="content/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="assets/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
|
||||
<img src="content/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="assets/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
|
||||
<img src="content/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="assets/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
|
||||
<img src="content/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="assets/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
|
||||
<img src="content/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="assets/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
|
||||
<img src="content/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="assets/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
|
||||
<img src="content/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="assets/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
|
||||
<img src="content/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="assets/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
|
||||
<img src="content/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="assets/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
|
||||
<img src="content/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="assets/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
|
||||
<img src="content/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='assets/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
|
||||
<img src='content/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="assets/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
|
||||
<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>
|
||||
</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="assets/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
|
||||
<img src="content/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='assets/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
|
||||
<img src='content/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='assets/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
|
||||
<img src='content/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='assets/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
|
||||
<img src='content/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='assets/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
|
||||
<img src='content/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='assets/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
|
||||
<img src='content/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='assets/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
|
||||
<img src='content/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='assets/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
|
||||
<img src='content/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='assets/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
|
||||
<img src='content/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='assets/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
|
||||
<img src='content/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='assets/images/guide/pipes/hero-list.png' alt="Hero List"></img>
|
||||
<img src='content/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="assets/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
|
||||
<img src="content/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="assets/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
|
||||
<img src="content/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='assets/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
|
||||
<img src='content/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='assets/images/guide/router/router-2-anim.gif' alt="App in action"></img>
|
||||
<img src='content/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='assets/images/guide/router/selected-hero.png' alt="Selected hero"></img>
|
||||
<img src='content/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='assets/images/guide/router/selected-hero.png' alt="Selected List"></img>
|
||||
<img src='content/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='assets/images/guide/router/component-tree.png' alt="Component Tree"></img>
|
||||
<img src='content/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='assets/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
|
||||
<img src='content/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='assets/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
|
||||
<img src='content/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='assets/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
|
||||
<img src='content/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='assets/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='assets/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
|
||||
<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>
|
||||
</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="assets/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
|
||||
<img src="content/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='assets/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
|
||||
<img src='content/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='assets/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
|
||||
<img src='content/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -1067,7 +1067,7 @@ content harmlessly.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
|
||||
<img src='content/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -1837,7 +1837,7 @@ Here are all variations in action, including the uppercase version:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
|
||||
<img src='content/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -2132,7 +2132,7 @@ Here is an illustration of the _trackBy_ effect.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
|
||||
<img src='content/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -2167,7 +2167,7 @@ Angular puts only the *selected* element into the DOM.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
|
||||
<img src='content/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -2417,7 +2417,7 @@ The terms _input_ and _output_ reflect the perspective of the target directive.
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
|
||||
<img src='content/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='assets/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
|
||||
<img src='content/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='assets/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
|
||||
<img src='content/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -1914,7 +1914,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='assets/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
|
||||
<img src='content/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -2505,7 +2505,7 @@ A better solution is to create an artificial test component that demonstrates al
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
|
||||
<img src='content/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -336,7 +336,7 @@ everything work seamlessly:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
|
||||
<img src="content/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -381,7 +381,7 @@ ways:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
|
||||
<img src="content/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -435,7 +435,7 @@ AngularJS and Angular approaches. Here's what happens:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src="assets/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
|
||||
<img src="content/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -569,7 +569,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
|
|||
### Using Angular Components from AngularJS Code
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -733,7 +733,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="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -936,7 +936,7 @@ and then provide the input and output using Angular template syntax:
|
|||
### Projecting AngularJS Content into Angular Components
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
@ -983,7 +983,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
|
|||
### Transcluding Angular Content into AngularJS Component Directives
|
||||
|
||||
<figure>
|
||||
<img src="assets/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="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>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
|
@ -98,7 +98,7 @@ Here's what the UI displays:
|
|||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
|
||||
<img src='content/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='assets/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
|
||||
<img src='content/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='assets/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
|
||||
<img src='content/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='assets/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
|
||||
<img src='content/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 320 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 220 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 488 KiB After Width: | Height: | Size: 488 KiB |
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 280 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 851 KiB After Width: | Height: | Size: 851 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |