refactor(aio): move content-related images to `content/images/`

This commit is contained in:
Georgios Kalpakas 2017-04-26 15:11:02 +03:00 committed by Pete Bacon Darwin
parent 2e5e37ac58
commit 6561d46349
237 changed files with 765 additions and 765 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View File

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

View File

Before

Width:  |  Height:  |  Size: 320 KiB

After

Width:  |  Height:  |  Size: 320 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 220 KiB

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 127 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 851 KiB

After

Width:  |  Height:  |  Size: 851 KiB

View File

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 221 KiB

After

Width:  |  Height:  |  Size: 221 KiB

View File

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Some files were not shown because too many files have changed in this diff Show More