honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(aio): image sweep (#16609) 

* fix(aio): allow code blocks to clear floated images

Previously the negative margin on the code headings were causing
floated images to overlay the start of a code block. Now all code block
successfully clear all floated elements.

* feat(aio): add a `.clear` class for clearing floating images

* fix(aio): tidy up image styles

The css rules for `img.right` and `img.left` allow authors easy
access to floating an image on the left or right, respectively.

The `.image-display` rule which was always found on a figure
has been simplified so that all figures have this styling. It is very
unlikely that a figure will be used outside the content area; and
at this time it seems like `figure` is as good an indicator that we
want this kind of styling as anything.

Now that images are all tagged with width and height values, we cannot
assume to modify these dimensions via CSS as it can cause the image to
lose its correct proportions.  Until we find a better solition we must set
`height` to `auto` when the screen width is below 1300px to ensure that
these images maintain their proportions as they get shrunk to fit.

* docs(aio): general tidy up of image HTML in guides

Previously, the guides have a lot of inline image styling and unnecessary
use of the `image-display` css class.
Images over 700px are problematic for guide docs, so those have been given
specific widths and associated heights.

* docs(aio): use correct anchor for "back to the top" link

The `#toc` anchor does not work when the page is
wide enough that the TOC is floating to the side.

* build(aio): add `#top-of-page` to path variants for link checking

Since the `#top-of-page` is outside the rendered docs
the `checkAnchorLinks` processor doesn't find them
as valid targets for links.
Adding them as a `pathVariant` solves this problem
but will still catch links to docs that do not actually exist.

* fix(aio): ensure that headings clear floated images

* fix(aio): do not force live-example embedded image to 100% size

This made them look too big, generally. Leaving them with no size means
that they will look reasonable in large viewports and switch to 100% width
in narrow viewports.
This commit is contained in:
Pete Bacon Darwin 2017-05-09 23:53:32 +01:00 committed by Jason Aden
parent d0e72a8f8f
commit 9e661e58d1
40 changed files with 579 additions and 1329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/file-not-found.md
View File

@ -1,7 +1,7 @@
@description
<div class="nf-container l-flex-wrap flex-center">
<img src="assets/images/support/angular-404.svg" width="300px" height="300px"/>
<img src="assets/images/support/angular-404.svg" width="300" height="300"/>
<div class="nf-response l-flex-wrap">
<h1 class="no-toc">Page Not Found</h1>
<p>We're sorry. The page you are looking for cannot be found.</p>

215
aio/content/guide/animations.md
View File

@ -11,11 +11,8 @@ Angular's animation system lets you build animations that run with the same kind
performance found in pure CSS animations. You can also tightly integrate your
animation logic with the rest of your application code, for ease of control.
<div class="alert is-helpful">
Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/)
and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
@ -23,11 +20,8 @@ For other browsers, a polyfill is required. Grab
[`web-animations.min.js` from GitHub](https://github.com/web-animations/web-animations-js) and
add it to your page.
</div>
<!--
# Contents
@ -45,26 +39,15 @@ add it to your page.
<div class="l-sub-section">
The examples in this page are available as a <live-example></live-example>.
</div>
{@a example-transitioning-between-states}
## Quickstart example: Transitioning between two states
<figure>
<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
</figure>
<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" class="right">
You can build a simple animation that transitions an element between two states
driven by a model attribute.
@ -72,51 +55,27 @@ driven by a model attribute.
Animations are defined inside `@Component` metadata. Before you can add animations, you need
to import a few animation-specific imports and functions:
<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (@NgModule imports excerpt)" linenums="false"></code-example>
<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (@NgModule imports excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="imports" title="hero-list-basic.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="imports" title="hero-list-basic.component.ts" linenums="false"></code-example>
With these, you can define an *animation trigger* called `heroState` in the component
metadata. It uses animations to transition between two states: `active` and `inactive`. When a
hero is active, the element appears in a slightly larger size and lighter color.
<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false"></code-example>
<div class="alert is-helpful">
In this example, you are defining animation styles (color and transform) inline in the
animation metadata.
</div>
Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
one or more elements in the component's template.
<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false"></code-example>
Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
the repeated elements animates independently. The value of the
@ -125,12 +84,7 @@ attribute is bound to the expression `hero.state` and is always either `active`
With this setup, an animated transition appears whenever a hero object changes state.
Here's the full component implementation:
<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts"></code-example>
## States and transitions
@ -145,12 +99,7 @@ component's template.
You can define *styles* for each animation state:
<code-example path="animations/src/app/hero-list-basic.component.ts" region="states" title="src/app/hero-list-basic.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="states" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example>
These `state` definitions specify the *end styles* of each state.
They are applied to the element once it has transitioned to that state, and stay
@ -159,38 +108,21 @@ They are applied to the element once it has transitioned to that state, and stay
After you define states, you can define *transitions* between the states. Each transition
controls the timing of switching between one set of styles and the next:
<code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example>
<code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false">
</code-example>
<figure class='image-display'>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
<figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400">
</figure>
If several transitions have the same timing configuration, you can combine
them into the same `transition` definition:
<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false"></code-example>
When both directions of a transition have the same timing, as in the previous
example, you can use the shorthand syntax `<=>`:
<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false"></code-example>
You can also apply a style during an animation but not keep it around
after the animation finishes. You can define such styles inline, in the `transition`. In this example,
@ -198,12 +130,7 @@ the element receives one set of styles immediately and is then animated to the n
When the transition finishes, none of these styles are kept because they're not
defined in a `state`.
<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false"></code-example>
### The wildcard state `*`
@ -213,13 +140,10 @@ transitions that apply regardless of which state the animation is in. For exampl
* The `active => *` transition applies when the element's state changes from `active` to anything else.
* The `* => *` transition applies when *any* change between two states takes place.
<figure class='image-display'>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
<figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400">
</figure>
### The `void` state
The special state called `void` can apply to any animation. It applies
@ -230,22 +154,15 @@ leave animations.
For example the `* => void` transition applies when the element leaves the view,
regardless of what state it was in before it left.
<figure class='image-display'>
<img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
<figure>
<img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400">
</figure>
The wildcard state `*` also matches `void`.
## Example: Entering and leaving
<figure>
<img src="generated/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
</figure>
<img src="generated/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" class="right" width="250">
Using the `void` and `*` states you can define transitions that animate the
entering and leaving of elements:
@ -256,43 +173,27 @@ entering and leaving of elements:
For example, in the `animations` array below there are two transitions that use
the `void => *` and `* => void` syntax to animate the element in and out of the view.
<code-example path="animations/src/app/hero-list-enter-leave.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-enter-leave.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example>
Note that in this case the styles are applied to the void state directly in the
transition definitions, and not in a separate `state(void)` definition. Thus, the transforms
are different on enter and leave: the element enters from the left
and leaves to the right.
<div class="l-sub-section">
These two common animations have their own aliases:
<code-example language="typescript">
transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void
</code-example>
</div>
## Example: Entering and leaving from different states
<figure>
<img src="generated/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
</figure>
<img src="generated/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" class="right" width="200">
You can also combine this animation with the earlier state transition animation by
using the hero state as the animation state. This lets you configure
@ -306,18 +207,11 @@ is:
This gives you fine-grained control over each transition:
<figure class='image-display'>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
<figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400">
</figure>
<code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example>
## Animatable properties and units
@ -340,11 +234,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
## Automatic property calculation
<figure>
<img src="generated/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
</figure>
<img src="generated/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" class="right" width="220">
Sometimes you don't know the value of a dimensional style property until runtime.
For example, elements often have widths and heights that
@ -357,12 +247,7 @@ property is computed at runtime and then plugged into the animation.
In this example, the leave animation takes whatever height the element has before it
leaves and animates from that height to zero:
<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false"></code-example>
## Animation timing
@ -398,12 +283,7 @@ and the delay (or as the *second* value when there is no delay):
* Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'`
* Run for 200ms, with easing: `'0.2s ease-in-out'`
<figure>
<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
</figure>
<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" class="right" width="220">
### Example
@ -411,21 +291,11 @@ Here are a couple of custom timings in action. Both enter and leave last for
200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a
slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false"></code-example>
## Multi-step animations with keyframes
<figure>
<img src="generated/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
</figure>
<img src="generated/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" class="right" width="220">
Animation *keyframes* go beyond a simple transition to a more intricate animation
that goes through one or more intermediate styles when transitioning between two sets of styles.
@ -437,12 +307,7 @@ which marks the beginning of the animation, and one, which marks the end.
This example adds some "bounce" to the enter and leave animations with
keyframes:
<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false"></code-example>
Note that the offsets are *not* defined in terms of absolute time. They are relative
measures from zero to one. The final timeline of the animation is based on the combination
@ -452,14 +317,9 @@ Defining offsets for keyframes is optional. If you omit them, offsets with even
spacing are automatically assigned. For example, three keyframes without predefined
offsets receive offsets `0`, `0.5`, and `1`.
## Parallel animation groups
<figure>
<img src="generated/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
</figure>
<img src="generated/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" class="right" width="220px">
You've seen how to animate multiple style properties at the same time:
just put all of them into the same `style()` definition.
@ -472,16 +332,10 @@ For this you can use animation *groups*. In this example, using groups both on
enter and leave allows for two different timing configurations. Both
are applied to the same element in parallel, but run independently of each other:
<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false"></code-example>
One group animates the element transform and width; the other group animates the opacity.
## Animation callbacks
A callback is fired when an animation is started and also when it is done.
@ -489,12 +343,7 @@ A callback is fired when an animation is started and also when it is done.
In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook
those callbacks like this:
<code-example path="animations/src/app/hero-list-multistep.component.ts" region="template" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="animations/src/app/hero-list-multistep.component.ts" region="template" title="hero-list-multistep.component.ts (excerpt)" linenums="false"></code-example>
The callbacks receive an `AnimationEvent` that contains useful properties such as
`fromState`, `toState` and `totalTime`.

4
aio/content/guide/aot-compiler.md
View File

@ -605,7 +605,7 @@ showing exactly which application and Angular modules and classes are included i
Here's the map for _Tour of Heroes_.
<a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
<figure class='image-display'>
<img src="generated/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
<figure>
<img src="generated/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle" width="700">
</figure>
</a>

316
aio/content/guide/architecture.md
View File

@ -6,14 +6,11 @@ The basic building blocks of Angular applications.
@description
Angular is a framework for building client applications in HTML and
either JavaScript or a language like TypeScript that compiles to JavaScript.
The framework consists of several libraries, some of them core and some optional.
You write Angular applications by composing HTML *templates* with Angularized markup,
writing *component* classes to manage those templates, adding application logic in *services*,
and boxing components and services in *modules*.
@ -25,9 +22,8 @@ responding to user interactions according to the instructions you've provided.
Of course, there is more to it than this.
You'll learn the details in the pages that follow. For now, focus on the big picture.
<figure>
<img src="generated/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
<img src="generated/images/guide/architecture/overview2.png" alt="overview" width="700" height="356">
</figure>
<!--
@ -48,32 +44,20 @@ Learn these building blocks, and you're on your way.
<div class="l-sub-section">
<p>
The code referenced on this page is available as a <live-example></live-example>.
</p>
The code referenced on this page is available as a <live-example></live-example>.
</div>
## Modules
<figure>
<img src="generated/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/module.png" alt="Component" class="left" width="240" height="183">
Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
_Angular modules_ are a big deal.
This page introduces modules; the [Angular modules](guide/ngmodule) page covers them in depth.
<br class="l-clear-both"><br>
<br class="clear">
Every Angular app has at least one Angular module class, [the _root module_](guide/appmodule "AppModule: the root module"),
conventionally named `AppModule`.
@ -86,8 +70,6 @@ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule`
<div class="l-sub-section">
Decorators are functions that modify JavaScript classes.
Angular has many decorators that attach metadata to classes so that it knows
what those classes mean and how they should work.
@ -96,8 +78,6 @@ Learn more</a> about decorators on the web.
</div>
`NgModule` is a decorator function that takes a single metadata object whose properties describe the module.
The most important properties are:
* `declarations` - the _view classes_ that belong to this module.
@ -115,31 +95,18 @@ that hosts all other app views. Only the _root module_ should set this `bootstra
Here's a simple root module:
<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false">
</code-example>
<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false"></code-example>
<div class="l-sub-section">
The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
</div>
Launch an application by _bootstrapping_ its root module.
During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one.
<code-example path="architecture/src/main.ts" title="src/main.ts" linenums="false">
</code-example>
<code-example path="architecture/src/main.ts" title="src/main.ts" linenums="false"></code-example>
### Angular modules vs. JavaScript modules
@ -152,102 +119,59 @@ In JavaScript each _file_ is a module and all objects defined in the file belong
The module declares some objects to be public by marking them with the `export` key word.
Other JavaScript modules use *import statements* to access public objects from other modules.
<code-example path="architecture/src/app/app.module.ts" region="imports" linenums="false"></code-example>
<code-example path="architecture/src/app/app.module.ts" region="imports" linenums="false">
</code-example>
<code-example path="architecture/src/app/app.module.ts" region="export" linenums="false">
</code-example>
<code-example path="architecture/src/app/app.module.ts" region="export" linenums="false"></code-example>
<div class="l-sub-section">
<a href="http://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
</div>
These are two different and _complementary_ module systems. Use them both to write your apps.
### Angular libraries
<figure>
<img src="generated/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left" width="240" height="181">
Angular ships as a collection of JavaScript modules. You can think of them as library modules.
Each Angular library name begins with the `@angular` prefix.
You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
<br class="l-clear-both"><br>
<br class="clear">
For example, import Angular's `Component` decorator from the `@angular/core` library like this:
<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false">
</code-example>
<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false">
</code-example>
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false">
</code-example>
<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false"></code-example>
In this way you're using both the Angular and JavaScript module systems _together_.
It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports".
Hang in there. The confusion yields to clarity with time and experience.
<div class="l-sub-section">
Learn more from the [Angular modules](guide/ngmodule) page.
</div>
<hr/>
## Components
<figure>
<img src="generated/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/hero-component.png" alt="Component" class="left" width="200" height="115">
A _component_ controls a patch of screen called a *view*.
@ -261,33 +185,21 @@ You define a component's application logic&mdash;what it does to support the vie
The class interacts with the view through an API of properties and methods.
{@a component-code}
For example, this `HeroListComponent` has a `heroes` property that returns an array of heroes
that it acquires from a service.
`HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class">
</code-example>
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class"></code-example>
Angular creates, updates, and destroys components as the user moves through the application.
Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()` declared above.
<hr/>
## Templates
<figure>
<img src="generated/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/template.png" alt="Template" class="left" width="200">
You define a component's view with its companion **template**. A template is a form of HTML
that tells Angular how to render the component.
@ -295,16 +207,10 @@ that tells Angular how to render the component.
A template looks like regular HTML, except for a few differences. Here is a
template for our `HeroListComponent`:
<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html">
</code-example>
<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html"></code-example>
Although this template uses typical HTML elements like `<h2>` and `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](guide/template-syntax).
In the last line of the template, the `<hero-detail>` tag is a custom element that represents a new component, `HeroDetailComponent`.
The `HeroDetailComponent` is a *different* component than the `HeroListComponent` you've been reviewing.
@ -312,31 +218,19 @@ The `HeroDetailComponent` (code not shown) presents facts about a particular her
hero that the user selects from the list presented by the `HeroListComponent`.
The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
<figure>
<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" class="left" width="300" height="260">
Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
<br class="l-clear-both">
<hr/>
<hr class="clear"/>
## Metadata
<figure>
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
Metadata tells Angular how to process a class.
<p style="padding-top:10px">Metadata tells Angular how to process a class.</p>
<br class="l-clear-both">
<br class="clear">
[Looking back at the code](guide/architecture#component-code) for `HeroListComponent`, you can see that it's just a class.
There is no evidence of a framework, no "Angular" in it at all.
@ -348,12 +242,7 @@ To tell Angular that `HeroListComponent` is a component, attach **metadata** to
In TypeScript, you attach metadata by using a **decorator**.
Here's some metadata for `HeroListComponent`:
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata">
</code-example>
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata"></code-example>
Here is the `@Component` decorator, which identifies the class
immediately below it as a component class.
@ -364,7 +253,6 @@ information Angular needs to create and present the component and its view.
Here are a few of the most useful `@Component` configuration options:
* `selector`: CSS selector that tells Angular to create and insert an instance of this component
where it finds a `<hero-list>` tag in *parent* HTML.
For example, if an app's HTML contains `<hero-list></hero-list>`, then
@ -378,53 +266,40 @@ This is one way to tell Angular that the component's constructor requires a `Her
so it can get the list of heroes to display.
<figure>
<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" class="left" width="114" height="200">
The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
The template, metadata, and component together describe a view.
Apply other metadata decorators in a similar fashion to guide Angular behavior.
`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.<br class="l-clear-both">
`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.
<br class="clear">
The architectural takeaway is that you must add metadata to your code
so that Angular knows what to do.
<hr/>
## Data binding
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses
into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
read as any experienced jQuery programmer can attest.
<figure>
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
</figure>
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left" width="220" height="204">
Angular supports **data binding**,
a mechanism for coordinating parts of a template with parts of a component.
Add binding markup to the template HTML to tell Angular how to connect both sides.
As the diagram shows, there are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions.<br class="l-clear-both">
As the diagram shows, there are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions.
<br class="clear">
The `HeroListComponent` [example](guide/architecture#templates) template has three forms:
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding">
</code-example>
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding"></code-example>
* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation)
displays the component's `hero.name` property value within the `<li>` element.
@ -438,12 +313,7 @@ the parent `HeroListComponent` to the `hero` property of the child `HeroDetailCo
that combines property and event binding in a single notation, using the `ngModel` directive.
Here's an example from the `HeroDetailComponent` template:
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
</code-example>
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel"></code-example>
In two-way binding, a data property value flows to the input box from the component as with property binding.
The user's changes also flow back to the component, resetting the property to the latest value,
@ -452,36 +322,23 @@ as with event binding.
Angular processes *all* data bindings once per JavaScript event cycle,
from the root of the application component tree through all child components.
<figure>
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding">
</figure>
Data binding plays an important role in communication
between a template and its component.<br class="l-clear-both">
Data binding plays an important role in communication between a template and its component.
<figure>
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" width="358" height="171">
</figure>
Data binding is also important for communication between parent and child components.
Data binding is also important for communication between parent and child components.<br class="l-clear-both">
<hr/>
<hr class="clear"/>
## Directives
<figure>
<img src="generated/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/directive.png" alt="Parent child" class="left" width="150" height="147">
Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
according to the instructions given by **directives**.
@ -489,20 +346,14 @@ according to the instructions given by **directives**.
A directive is a class with a `@Directive` decorator.
A component is a *directive-with-a-template*;
a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
<br class="l-clear-both">
<div class="l-sub-section">
<div class="l-sub-section clear">
While **a component is technically a directive**,
components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
</div>
Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
They tend to appear within an element tag as attributes do,
@ -512,17 +363,11 @@ sometimes by name but more often as the target of an assignment or a binding.
The [example template](guide/architecture#templates) uses two built-in structural directives:
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural">
</code-example>
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural"></code-example>
* [`*ngFor`](guide/displaying-data#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
* [`*ngIf`](guide/displaying-data#ngIf) includes the `HeroDetail` component only if a selected hero exists.
**Attribute** directives alter the appearance or behavior of an existing element.
In templates they look like regular HTML attributes, hence the name.
@ -531,12 +376,7 @@ an example of an attribute directive. `ngModel` modifies the behavior of
an existing element (typically an `<input>`)
by setting its display value property and responding to change events.
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
</code-example>
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel"></code-example>
Angular has a few more directives that either alter the layout structure
(for example, [ngSwitch](guide/template-syntax#ngSwitch))
@ -547,19 +387,11 @@ Of course, you can also write your own directives. Components such as
`HeroListComponent` are one kind of custom directive.
<!-- PENDING: link to where to learn more about other kinds! -->
<hr/>
## Services
<figure>
<img src="generated/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/service.png" alt="Service" class="left">
_Service_ is a broad category encompassing any value, function, or feature that your application needs.
@ -581,22 +413,12 @@ Yet services are fundamental to any Angular application. Components are big cons
Here's an example of a service class that logs to the browser console:
<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class">
</code-example>
<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class"></code-example>
Here's a `HeroService` that uses a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to fetch heroes.
The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work.
<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class">
</code-example>
<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class"></code-example>
Services are everywhere.
@ -615,33 +437,23 @@ It won't complain if you write a "kitchen sink" component with 3000 lines.
Angular does help you *follow* these principles by making it easy to factor your
application logic into services and make those services available to components through *dependency injection*.
<hr/>
## Dependency injection
<figure>
<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left" width="200" height="89">
_Dependency injection_ is a way to supply a new instance of a class
with the fully-formed dependencies it requires. Most dependencies are services.
Angular uses dependency injection to provide new components with the services they need.<br class="l-clear-both">
Angular uses dependency injection to provide new components with the services they need.
<br class="clear">
Angular can tell which services a component needs by looking at the types of its constructor parameters.
For example, the constructor of your `HeroListComponent` needs a `HeroService`:
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (constructor)" region="ctor">
</code-example>
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (constructor)" region="ctor"></code-example>
When Angular creates a component, it first asks an **injector** for
the services that the component requires.
@ -656,37 +468,25 @@ This is *dependency injection*.
The process of `HeroService` injection looks a bit like this:
<figure>
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service"></img>
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service">
</figure>
If the injector doesn't have a `HeroService`, how does it know how to make one?
In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
A provider is something that can create or return a service, typically the service class itself.
You can register providers in modules or in components.
In general, add providers to the [root module](guide/architecture#modules) so that
the same instance of a service is available everywhere.
<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
</code-example>
<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers"></code-example>
Alternatively, register at a component level in the `providers` property of the `@Component` metadata:
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers">
</code-example>
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
Registering at a component level means you get a new instance of the
service with each new instance of that component.
@ -706,12 +506,8 @@ Points to remember about dependency injection:
* Register *providers* with injectors.
<hr/>
## Wrap up
You've learned the basics about the eight main building blocks of an Angular application:

282
aio/content/guide/attribute-directives.md
View File

@ -1,12 +1,4 @@
@title
Attribute Directives
@intro
Attribute directives attach behavior to elements.
@description
# Attribute Directives
An **Attribute** directive changes the appearance or behavior of a DOM element.
@ -46,8 +38,6 @@ The built-in [NgStyle](guide/template-syntax#ngStyle) directive in the
[Template Syntax](guide/template-syntax) guide, for example,
can change several element styles at the same time.
## Build a simple attribute directive
An attribute directive minimally requires building a controller class annotated with
@ -59,10 +49,7 @@ This page demonstrates building a simple _myHighlight_ attribute
directive to set an element's background color
when the user hovers over that element. You can apply it like this:
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (applied)" region="applied">
</code-example>
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (applied)" region="applied"></code-example>
{@a write-directive}
@ -73,12 +60,7 @@ named <code>attribute-directives</code>.
Create the following source file in the indicated folder:
<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts"></code-example>
The `import` statement specifies symbols from the Angular `core`:
@ -90,7 +72,6 @@ so the code can access the DOM element.
Next, the `@Directive` decorator function contains the directive metadata in a configuration object
as an argument.
`@Directive` requires a CSS selector to identify
the HTML in the template that is associated with the directive.
The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
@ -98,11 +79,8 @@ is the attribute name in square brackets.
Here, the directive's selector is `[myHighlight]`.
Angular locates all elements in the template that have an attribute named `myHighlight`.
<div class="l-sub-section">
### Why not call it "highlight"?
Though *highlight* is a more concise name than *myHighlight* and would work,
@ -114,11 +92,9 @@ Make sure you do **not** prefix the `highlight` directive name with **`ng`** bec
that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
</div>
After the `@Directive` metadata comes the directive's controller class,
called `HighlightDirective`, which contains the logic for the directive.
Exporting `HighlightDirective` makes it accessible to other components.
@ -140,71 +116,44 @@ In Angular terms, the `<p>` element is the attribute **host**.
Put the template in its own <code>app.component.html</code>
file that looks like this:
<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html">
</code-example>
<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html"></code-example>
Now reference this template in the `AppComponent`:
<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts">
</code-example>
<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts"></code-example>
Next, add an `import` statement to fetch the `Highlight` directive and
add that class to the `declarations` NgModule metadata. This way Angular
recognizes the directive when it encounters `myHighlight` in the template.
<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts">
</code-example>
<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts"></code-example>
Now when the app runs, the `myHighlight` directive highlights the paragraph text.
<figure class='image-display'>
<img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
<figure>
<img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight">
</figure>
<div class="l-sub-section">
### Your directive isn't working?
Did you remember to add the directive to the `declarations` attribute of `@NgModule`?
It is easy to forget!
Open the console in the browser tools and look for an error like this:
<code-example format="nocode">
EXCEPTION: Template parse errors:
Can't bind to 'myHighlight' since it isn't a known property of 'p'.
</code-example>
Angular detects that you're trying to bind to *something* but it can't find this directive
in the module's `declarations` array.
After specifying `HighlightDirective` in the `declarations` array,
Angular knows it can apply the directive to components declared in this module.
</div>
To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
It created an instance of the `HighlightDirective` class and
injected a reference to the `<p>` element into the directive's constructor
@ -222,31 +171,18 @@ and respond by setting or clearing the highlight color.
Begin by adding `HostListener` to the list of imported symbols;
add the `Input` symbol as well because you'll need it soon.
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
Then add two eventhandlers that respond when the mouse enters or leaves,
each adorned by the `HostListener` decorator.
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods"></code-example>
The `@HostListener` decorator lets you subscribe to events of the DOM
element that hosts an attribute directive, the `<p>` in this case.
<div class="l-sub-section">
Of course you could reach into the DOM with standard JavaScript and and attach event listeners manually.
There are at least three problems with _that_ approach:
@ -254,39 +190,24 @@ There are at least three problems with _that_ approach:
1. The code must *detach* the listener when the directive is destroyed to avoid memory leaks.
1. Talking to DOM API directly isn't a best practice.
</div>
The handlers delegate to a helper method that sets the color on the DOM element, `el`,
which you declare and initialize in the constructor.
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor"></code-example>
Here's the updated directive in full:
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts"></code-example>
Run the app and confirm that the background color appears when
the mouse hovers over the `p` and disappears as it moves out.
<figure class='image-display'>
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
</figure>
{@a bindings}
## Pass values into the directive with an _@Input_ data binding
@ -296,16 +217,10 @@ In this section, you give the developer the power to set the highlight color whi
Start by adding a `highlightColor` property to the directive class like this:
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color"></code-example>
{@a input}
### Binding to an _@Input_ property
Notice the `@Input` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
@ -315,39 +230,19 @@ Without that input metadata, Angular rejects the binding; see [below](guide/attr
Try it by adding the following directive binding variations to the `AppComponent` template:
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1">
</code-example>
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1"></code-example>
Add a `color` property to the `AppComponent`.
<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
</code-example>
<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class"></code-example>
Let it control the highlight color with a property binding.
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2">
</code-example>
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2"></code-example>
That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this.
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color"></code-example>
The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
and sets the directive's highlight color with a property binding.
@ -356,62 +251,35 @@ That's a crisp, compact syntax.
You'll have to rename the directive's `highlightColor` property to `myHighlight` because that's now the color property binding name.
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2"></code-example>
This is disagreeable. The word, `myHighlight`, is a terrible property name and it doesn't convey the property's intent.
{@a input-alias}
### Bind to an _@Input_ alias
Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
Restore the original property name and specify the selector as the alias in the argument to `@Input`.
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color"></code-example>
_Inside_ the directive the property is known as `highlightColor`.
_Outside_ the directive, where you bind to it, it's known as `myHighlight`.
You get the best of both worlds: the property name you want and the binding syntax you want:
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color"></code-example>
Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
If someone neglects to bind to `highlightColor`, highlight in red:
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter"></code-example>
Here's the latest version of the directive class.
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)"></code-example>
## Write a harness to try it
@ -421,30 +289,18 @@ lets you pick the highlight color with a radio button and bind your color choice
Update <code>app.component.html</code> as follows:
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2">
</code-example>
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2"></code-example>
Revise the `AppComponent.color` so that it has no initial value.
<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
</code-example>
<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class"></code-example>
Here are the harness and directive in action.
<figure class='image-display'>
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
</figure>
{@a second-property}
## Bind to a second property
@ -457,22 +313,12 @@ Let the template developer set the default color.
Add a second **input** property to `HighlightDirective` called `defaultColor`:
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (defaultColor)" region="defaultColor">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (defaultColor)" region="defaultColor"></code-example>
Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`,
then with the `defaultColor`, and falls back to "red" if both properties are undefined.
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter"></code-example>
How do you bind to a second property when you're already binding to the `myHighlight` attribute name?
@ -480,26 +326,17 @@ As with components, you can add as many directive property bindings as you need
The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
and fall back to "violet" as the default color.
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor">
</code-example>
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor"></code-example>
Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
because you made it _public_ with the `@Input` decorator.
Here's how the harness should work when you're done coding.
<figure class='image-display'>
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
</figure>
## Summary
This page covered how to:
@ -511,33 +348,13 @@ This page covered how to:
The final source code follows:
<code-tabs>
<code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts">
</code-pane>
<code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html">
</code-pane>
<code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts">
</code-pane>
<code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts">
</code-pane>
<code-pane title="main.ts" path="attribute-directives/src/main.ts">
</code-pane>
<code-pane title="index.html" path="attribute-directives/src/index.html">
</code-pane>
<code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts"></code-pane>
<code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html"></code-pane>
<code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts"></code-pane>
<code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts"></code-pane>
<code-pane title="main.ts" path="attribute-directives/src/main.ts"></code-pane>
<code-pane title="index.html" path="attribute-directives/src/index.html"></code-pane>
</code-tabs>
@ -551,21 +368,11 @@ You can also experience and download the <live-example title="Attribute Directiv
In this demo, the `hightlightColor` property is an ***input*** property of
the `HighlightDirective`. You've seen it applied without an alias:
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color"></code-example>
You've seen it with an alias:
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color"></code-example>
Either way, the `@Input` decorator tells Angular that this property is
_public_ and available for binding by a parent component.
@ -597,12 +404,7 @@ You can tell if `@Input` is needed by the position of the property name in a bin
Now apply that reasoning to the following example:
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
</code-example>
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color"></code-example>
* The `color` property in the expression on the right belongs to the template's component.
The template and its component trust each other.

455
aio/content/guide/cli-quickstart.md
View File

@ -126,8 +126,8 @@ on `http://localhost:4200/`.
Your app greets you with a message:
<figure class='image-display'>
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
<figure>
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
</figure>
@ -147,9 +147,7 @@ You can find it in `./src/app/app.component.ts`.
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false">
</code-example>
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false"></code-example>
@ -158,14 +156,12 @@ The browser reloads automatically with the revised title. That's nice, but it co
Open `src/app/app.component.css` and give the component some style.
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false">
</code-example>
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
<figure class='image-display'>
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
<figure>
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
</figure>
@ -205,103 +201,34 @@ Any files outside of this folder are meant to support building your app.
<div class='filetree'>
<div class='file'>
src
</div>
<div class='file'>src</div>
<div class='children'>
<div class='file'>
app
</div>
<div class='file'>app</div>
<div class='children'>
<div class='file'>
app.component.css
</div>
<div class='file'>
app.component.html
</div>
<div class='file'>
app.component.spec.ts
</div>
<div class='file'>
app.component.ts
</div>
<div class='file'>
app.module.ts
</div>
<div class='file'>app.component.css</div>
<div class='file'>app.component.html</div>
<div class="file">app.component.spec.ts</div>
<div class="file">app.component.ts</div>
<div class="file">app.module.ts</div>
</div>
<div class='file'>
assets
</div>
<div class="file">assets</div>
<div class='children'>
<div class='file'>
.gitkeep
</div>
<div class="file">.gitkeep</div>
</div>
<div class='file'>
environments
</div>
<div class="file">environments</div>
<div class='children'>
<div class='file'>
environment.prod.ts
</div>
<div class='file'>
environment.ts
</div>
<div class="file">environment.prod.ts</div>
<div class="file">environment.ts</div>
</div>
<div class='file'>
favicon.ico
</div>
<div class='file'>
index.html
</div>
<div class='file'>
main.ts
</div>
<div class='file'>
polyfills.ts
</div>
<div class='file'>
styles.css
</div>
<div class='file'>
test.ts
</div>
<div class='file'>
tsconfig.app.json
</div>
<div class='file'>
tsconfig.spec.json
</div>
<div class="file">favicon.ico</div>
<div class="file">index.html</div>
<div class="file">main.ts</div>
<div class="file">polyfills.ts</div>
<div class="file">styles.css</div>
<div class="file">test.ts</div>
<div class="file">tsconfig.app.json</div>
<div class="file">tsconfig.spec.json</div>
</div>
</div>
@ -313,83 +240,67 @@ Any files outside of this folder are meant to support building your app.
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
<code>app/app.component.{ts,html,css,spec.ts}</code>
`app/app.component.{ts,html,css,spec.ts}`
</td>
<td>
Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
It is the **root** component of what will become a tree of nested components
as the application evolves.
</td>
</td>
</tr>
<tr>
<td>
<code>app/app.module.ts</code>
`app/app.module.ts`
</td>
<td>
Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
</td>
</td>
</tr>
<tr>
<td>
<code>assets/*</code>
`assets/*`
</td>
<td>
A folder where you can put images and anything else to be copied wholesale
when you build your application.
</td>
</td>
</tr>
<tr>
<td>
<code>environments/*</code>
`environments/*`
</td>
<td>
This folder contains one file for each of your destination environments,
each exporting simple configuration variables to use in your application.
The files are replaced on-the-fly when you build your app.
@ -397,215 +308,139 @@ Any files outside of this folder are meant to support building your app.
or maybe different analytics tokens.
You might even use some mock services.
Either way, the CLI has you covered.
</td>
</td>
</tr>
<tr>
<td>
<code>favicon.ico</code>
`favicon.ico`
</td>
<td>
Every site wants to look good on the bookmark bar.
Get started with your very own Angular icon.
</td>
</td>
</tr>
<tr>
<td>
<code>index.html</code>
`index.html`
</td>
<td>
The main HTML page that is served when someone visits your site.
Most of the time you'll never need to edit it.
The CLI automatically adds all `js` and `css` files when building your app so you
never need to add any `&lt;script&gt;` or `&lt;link&gt;` tags here manually.
</td>
</td>
</tr>
<tr>
<td>
<code>main.ts</code>
`main.ts`
</td>
<td>
The main entry point for your app.
Compiles the application with the [JIT compiler](guide/glossary#jit)
and bootstraps the application's root module (`AppModule`) to run in the browser.
You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
</td>
</td>
</tr>
<tr>
<td>
<code>polyfills.ts</code>
`polyfills.ts`
</td>
<td>
Different browsers have different levels of support of the web standards.
Polyfills help normalize those differences.
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
the [Browser Support guide](guide/browser-support) for more information.
</td>
</td>
</tr>
<tr>
<td>
<code>styles.css</code>
`styles.css`
</td>
<td>
Your global styles go here.
Most of the time you'll want to have local styles in your components for easier maintenance,
but styles that affect all of your app need to be in a central place.
</td>
</td>
</tr>
<tr>
<td>
<code>test.ts</code>
`test.ts`
</td>
<td>
This is the main entry point for your unit tests.
It has some custom configuration that might be unfamiliar, but it's not something you'll
need to edit.
</td>
</tr>
<tr>
<td>
<code>tsconfig.{app|spec}.json</code>
`tsconfig.{app|spec}.json`
</td>
<td>
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
and for the unit tests (`tsconfig.spec.json`).
</td>
</tr>
</table>
### The root folder
The `src/` folder is just one of the items inside the project's root folder.
Other files help you build, test, maintain, document, and deploy the app.
These files go in the root folder next to `src/`.
<div class='filetree'>
<div class='file'>
my-app
</div>
<div class="file">my-app</div>
<div class='children'>
<div class='file'>
e2e
</div>
<div class="file">e2e</div>
<div class='children'>
<div class='file'>
app.e2e-spec.ts
</div>
<div class='file'>
app.po.ts
</div>
<div class='file'>
tsconfig.e2e.json
</div>
<div class="file">app.e2e-spec.ts</div>
<div class="file">app.po.ts</div>
<div class="file">tsconfig.e2e.json</div>
</div>
<div class='file'>
node_modules/...
</div>
<div class='file'>
src/...
</div>
<div class='file'>
.angular-cli.json
</div>
<div class='file'>
.editorconfig
</div>
<div class='file'>
.gitignore
</div>
<div class='file'>
karma.conf.js
</div>
<div class='file'>
package.json
</div>
<div class='file'>
protractor.conf.js
</div>
<div class='file'>
README.md
</div>
<div class='file'>
tsconfig.json
</div>
<div class='file'>
tslint.json
</div>
<div class="file">node_modules/...</div>
<div class="file">src/...</div>
<div class="file">.angular-cli.json</div>
<div class="file">.editorconfig</div>
<div class="file">.gitignore</div>
<div class="file">karma.conf.js</div>
<div class="file">package.json</div>
<div class="file">protractor.conf.js</div>
<div class="file">README.md</div>
<div class="file">tsconfig.json</div>
<div class="file">tslint.json</div>
</div>
</div>
<style>
td, th {vertical-align: top}
</style>
@ -613,207 +448,170 @@ These files go in the root folder next to `src/`.
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
<code>e2e/</code>
`e2e/`
</td>
<td>
Inside `e2e/` live the End-to-End tests.
They shouldn't be inside `src/` because e2e tests are really a separate app that
just so happens to test your main app.
That's also why they have their own `tsconfig.e2e.json`.
</td>
</td>
</tr>
<tr>
<td>
<code>node_modules/</code>
`node_modules/`
</td>
<td>
`Node.js` creates this folder and puts all third party modules listed in
`package.json` inside of it.
</td>
</tr>
<tr>
<td>
<code>.angular-cli.json</code>
`.angular-cli.json`
</td>
<td>
Configuration for Angular CLI.
In this file you can set several defaults and also configure what files are included
when your project is build.
Check out the official documentation if you want to know more.
</td>
</td>
</tr>
<tr>
<td>
<code>.editorconfig</code>
`.editorconfig`
</td>
<td>
Simple configuration for your editor to make sure everyone that uses your project
has the same basic configuration.
Most editors support an `.editorconfig` file.
See http://editorconfig.org for more information.
</td>
</td>
</tr>
<tr>
<td>
<code>.gitignore</code>
`.gitignore`
</td>
<td>
Git configuration to make sure autogenerated files are not commited to source control.
</td>
</td>
</tr>
<tr>
<td>
<code>karma.conf.js</code>
`karma.conf.js`
</td>
<td>
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
used when running `ng test`.
</td>
</td>
</tr>
<tr>
<td>
<code>package.json</code>
`package.json`
</td>
<td>
`npm` configuration listing the third party packages your project uses.
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
</td>
</td>
</tr>
<tr>
<td>
<code>protractor.conf.js</code>
`protractor.conf.js`
</td>
<td>
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
used when running `ng e2e`.
</td>
</td>
</tr>
<tr>
<td>
<code>README.md</code>
`README.md`
</td>
<td>
Basic documentation for your project, pre-filled with CLI command information.
Make sure to enhance it with project documentation so that anyone
checking out the repo can build your app!
</td>
</td>
</tr>
<tr>
<td>
<code>tsconfig.json</code>
`tsconfig.json`
</td>
<td>
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
</td>
</td>
</tr>
<tr>
<td>
<code>tslint.json</code>
`tslint.json`
</td>
<td>
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
Linting helps keep your code style consistent.
</td>
</tr>
</table>
<div class="l-sub-section">
### Next Step
If you're new to Angular, continue with the
@ -821,4 +619,3 @@ If you're new to Angular, continue with the
You can skip the "Setup" step since you're already using the Angular CLI setup.
</div>

24
aio/content/guide/component-interaction.md
View File

@ -55,8 +55,8 @@ and each iteration's `hero` instance to the child's `hero` property.
The running application displays three heroes:
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child"></img>
<figure>
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
</figure>
@ -99,8 +99,8 @@ Here's the `NameParentComponent` demonstrating name variations including a name
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter"></img>
<figure>
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
</figure>
@ -157,8 +157,8 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b
Here's the output of a button-pushing sequence:
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
<figure>
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
</figure>
@ -211,8 +211,8 @@ The framework passes the event argument&mdash;represented by `$event`&mdash;to t
and the method processes it:
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent"></img>
<figure>
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
</figure>
@ -273,8 +273,8 @@ uses interpolation to display the child's `seconds` property.
Here we see the parent and child working together.
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer"></img>
<figure>
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
</figure>
@ -425,8 +425,8 @@ the parent `MissionControlComponent` and the `AstronautComponent` children,
facilitated by the service:
<figure class='image-display'>
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service"></img>
<figure>
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
</figure>

48
aio/content/guide/dependency-injection-in-action.md
View File

@ -173,8 +173,8 @@ and the framework does the rest.
Once all the dependencies are in place, the `AppComponent` displays the user information:
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
</figure>
@ -339,8 +339,8 @@ And the template displays this data-bound property.
Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
</figure>
@ -405,8 +405,8 @@ 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="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
</figure>
@ -442,8 +442,8 @@ 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="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
</figure>
@ -452,8 +452,8 @@ If you comment out the `@Host()` decorator, Angular now walks up the injector an
until it finds the logger at the `AppComponent` level. The logger logic kicks in and the hero display updates
with the gratuitous "!!!", indicating that the logger was found.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
</figure>
@ -497,8 +497,8 @@ 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="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
</figure>
{@a providers}
@ -575,8 +575,8 @@ You need other ways to deliver dependency values and that means you need other w
The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
It's visually simple: a few properties and the logs produced by a logger.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px">
</figure>
@ -730,8 +730,8 @@ 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="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
</figure>
@ -745,8 +745,8 @@ 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="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px">
</figure>
@ -943,8 +943,8 @@ In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComp
to display a *sorted* list of heroes.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
</figure>
@ -1156,8 +1156,8 @@ the same way you've done it before:
Here's *Alex* and family in action:
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
</figure>
@ -1217,8 +1217,8 @@ which *is* what parent means.
Here's *Alice*, *Barry* and family in action:
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action"></img>
<figure>
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
</figure>

12
aio/content/guide/displaying-data.md
View File

@ -17,8 +17,8 @@ conditionally show a message below the list.
The final UI looks like this:
<figure class='image-display'>
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI"></img>
<figure>
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
</figure>
<!--
@ -126,8 +126,8 @@ inside the `<my-app>` tag.
Now run the app. It should display the title and hero name:
<figure class='image-display'>
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
<figure>
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
</figure>
@ -233,8 +233,8 @@ repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/Jav
Now the heroes appear in an unordered list.
<figure class='image-display'>
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
<figure>
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
</figure>

4
aio/content/guide/dynamic-component-loader.md
View File

@ -191,8 +191,8 @@ Here are two sample components and the `AdComponent` interface for reference:
## Final ad banner
The final ad banner looks like this:
<figure class='image-display'>
<img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
<figure>
<img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads">
</figure>

4
aio/content/guide/dynamic-form.md
View File

@ -220,8 +220,8 @@ Saving and retrieving the data is an exercise for another time.
The final form looks like this:
<figure class='image-display'>
<img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
<figure>
<img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form">
</figure>

36
aio/content/guide/forms.md
View File

@ -59,8 +59,8 @@ otherwise wrestle with yourself.
You'll learn to build a template-driven form that looks like this:
<figure class='image-display'>
<img src="generated/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
<figure>
<img src="generated/images/guide/forms/hero-form-1.png" alt="Clean Form">
</figure>
@ -73,8 +73,8 @@ Two of the three fields on this form are required. Required fields have a green
If you delete the hero name, the form displays a validation error in an attention-grabbing style:
<figure class='image-display'>
<img src="generated/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
<figure>
<img src="generated/images/guide/forms/hero-form-2.png" alt="Invalid, Name Required">
</figure>
@ -371,8 +371,8 @@ you display its name using the interpolation syntax.
Running the app right now would be disappointing.
<figure class='image-display'>
<img src="generated/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
<figure>
<img src="generated/images/guide/forms/hero-form-3.png" alt="Early form with no binding">
</figure>
@ -455,8 +455,8 @@ from the interpolated text.
At some point it might look like this:
<figure class='image-display'>
<img src="generated/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
<figure>
<img src="generated/images/guide/forms/ng-model-in-action.png" alt="ngModel in action">
</figure>
@ -528,8 +528,8 @@ to match the label to its input control.
If you run the app now and change every hero model property, the form might display like this:
<figure class='image-display'>
<img src="generated/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
<figure>
<img src="generated/images/guide/forms/ng-model-in-action-2.png" alt="ngModel in action">
</figure>
@ -641,8 +641,8 @@ Follow these steps *precisely*:
The actions and effects are as follows:
<figure class='image-display'>
<img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
<figure>
<img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition">
</figure>
@ -650,8 +650,8 @@ The actions and effects are as follows:
You should see the following transitions and class names:
<figure class='image-display'>
<img src="generated/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
<figure>
<img src="generated/images/guide/forms/ng-control-class-changes.png" alt="Control state transitions">
</figure>
@ -670,8 +670,8 @@ You can mark required fields and invalid data at the same time with a colored ba
on the left of the input box:
<figure class='image-display'>
<img src="generated/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
<figure>
<img src="generated/images/guide/forms/validity-required-indicator.png" alt="Invalid Form">
</figure>
@ -704,8 +704,8 @@ Leverage the control's state to reveal a helpful message.
When the user deletes the name, the form should look like this:
<figure class='image-display'>
<img src="generated/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
<figure>
<img src="generated/images/guide/forms/name-required-error.png" alt="Name required">
</figure>

16
aio/content/guide/hierarchical-dependency-injection.md
View File

@ -54,8 +54,8 @@ The following diagram represents the state of the this guide's three-level compo
open simultaneously.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
<figure>
<img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree">
</figure>
@ -148,8 +148,8 @@ Each tax return component has the following characteristics:
* Has the ability to save the changes to its tax return or cancel them.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
<figure>
<img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" alt="Heroes in action">
</figure>
@ -233,8 +233,8 @@ that have special capabilites suitable for whatever is going on in component (B)
Component (B) is the parent of another component (C) that defines its own, even _more specialized_ provider for `CarService`.
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
<figure>
<img src="generated/images/guide/dependency-injection/car-components.png" alt="car components">
</figure>
@ -246,8 +246,8 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
`Tires` resolved by the root injector (A).
<figure class='image-display'>
<img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
<figure>
<img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree">
</figure>

12
aio/content/guide/http.md
View File

@ -181,8 +181,8 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
It works like this:
<figure class='image-display'>
<img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
<figure>
<img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app" width="250" height="222">
</figure>
@ -749,8 +749,8 @@ Here is a simple search that shows suggestions from Wikipedia as the user
types in a text box:
<figure class='image-display'>
<img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
<figure>
<img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250" height="267">
</figure>
@ -868,8 +868,8 @@ Presently, the code calls the server after every keystroke.
It should only make requests when the user *stops typing*.
Here's how it will work after refactoring:
<figure class='image-display'>
<img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
<figure>
<img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250" height="267">
</figure>

32
aio/content/guide/lifecycle-hooks.md
View File

@ -6,13 +6,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
@description
<figure>
<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
</figure>
<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" class="left" width="200" height="283">
A component has a lifecycle managed by Angular.
@ -466,8 +460,8 @@ 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="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
<figure>
<img src="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo">
</figure>
@ -550,8 +544,8 @@ Each spy's birth and death marks the birth and death of the attached hero `<div>
with an entry in the *Hook Log* as seen here:
<figure class='image-display'>
<img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
<figure>
<img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive">
</figure>
@ -673,8 +667,8 @@ The host `OnChangesParentComponent` binds to them like this:
Here's the sample in action as the user makes changes.
<figure class='image-display'>
<img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
<figure>
<img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges">
</figure>
@ -719,8 +713,8 @@ It writes a special message to the log when there are no substantive changes to
so you can see how often `DoCheck` is called. The results are illuminating:
<figure class='image-display'>
<img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
<figure>
<img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck">
</figure>
@ -796,8 +790,8 @@ 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='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
<figure>
<img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView">
</figure>
@ -860,8 +854,8 @@ The `<ng-content>` tag is a *placeholder* for the external content.
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='generated/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
<figure>
<img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' alt="Projected Content">
</figure>

1
aio/content/guide/ngmodule.md
View File

@ -661,6 +661,7 @@ The app file structure looks like this:
Try the example:
<live-example embedded plnkr="contact.1b" img="guide/ngmodule/contact-1b-plunker.png"></live-example>

20
aio/content/guide/pipes.md
View File

@ -135,8 +135,8 @@ As you click the button, the displayed date alternates between
"**<samp>Friday, April 15, 1988</samp>**".
<figure class='image-display'>
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
<figure>
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
</figure>
@ -221,8 +221,8 @@ Now you need a component to demonstrate the pipe.
<code-example path="pipes/src/app/power-booster.component.ts" title="src/app/power-booster.component.ts" linenums="false">
</code-example>
<figure class='image-display'>
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
<figure>
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster">
</figure>
@ -266,8 +266,8 @@ your pipe and two-way data binding with `ngModel`.
<figure class='image-display'>
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
<figure>
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator">
</figure>
@ -353,8 +353,8 @@ The Flying Heroes application extends the
code with checkbox switches and additional displays to help you experience these effects.
<figure class='image-display'>
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
<figure>
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes">
</figure>
@ -538,8 +538,8 @@ both requesting the heroes from the `heroes.json` file.
The component renders as the following:
<figure class='image-display'>
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List"></img>
<figure>
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List">
</figure>

28
aio/content/guide/reactive-forms.md
View File

@ -355,8 +355,8 @@ Add the `bootstrap` _CSS stylesheet_ to the head of `index.html`:
Now that everything is wired up, the browser should display something like this:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
<figure>
<img src="generated/images/guide/reactive-forms/just-formcontrol.png" width="400" height="133" alt="Single FormControl">
</figure>
@ -459,8 +459,8 @@ The `heroForm.value` returns the _form model_.
Piping it through the `JsonPipe` renders the model as JSON in the browser:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
<figure>
<img src="generated/images/guide/reactive-forms/json-output.png" width="400" height="176" alt="JSON output">
</figure>
@ -569,8 +569,8 @@ Update the diagnostic message at the bottom of the template to display the form'
The browser displays the following:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
<figure>
<img src="generated/images/guide/reactive-forms/validators-json-output.png" width="400" height="223" alt="Single FormControl">
</figure>
@ -698,8 +698,8 @@ After these changes, the JSON output in the browser shows the revised _form mode
with the nested address `FormGroup`:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
<figure>
<img src="generated/images/guide/reactive-forms/address-group.png" width="400" height="55" alt="JSON output">
</figure>
@ -1054,8 +1054,8 @@ The `HeroDetailComponent` is a nested sub-component of the `HeroListComponent` i
Together they look a bit like this:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
<figure>
<img src="generated/images/guide/reactive-forms/hero-list.png" alt="HeroListComponent">
</figure>
@ -1267,8 +1267,8 @@ Back in the browser, select the hero named "Magneta".
"Magneta" doesn't have an address, as you can see in the diagnostic JSON at the bottom of the form.
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
<figure>
<img src="generated/images/guide/reactive-forms/addresses-array.png" width="400" height="40" alt="JSON output of addresses array">
</figure>
@ -1345,8 +1345,8 @@ In a real app, you'd also be able to revert unsaved changes and resume editing.
After you implement both features in this section, the form will look like this:
<figure class='image-display'>
<img src="generated/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
<figure>
<img src="generated/images/guide/reactive-forms/save-revert-buttons.png" alt="Form with save & revert buttons">
</figure>

48
aio/content/guide/router.md
View File

@ -533,16 +533,16 @@ Once the app warms up, you'll see a row of navigation buttons
and the *Heroes* view with its list of heroes.
<figure class='image-display'>
<img src='generated/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
<figure>
<img src='generated/images/guide/router/hero-list.png' alt="Hero List" width="250">
</figure>
Select one hero and the app takes you to a hero editing screen.
<figure class='image-display'>
<img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
<figure>
<img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250">
</figure>
@ -558,8 +558,8 @@ Angular app navigation updates the browser history as normal web navigation does
Now click the *Crisis Center* link for a list of ongoing crises.
<figure class='image-display'>
<img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
<figure>
<img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250">
</figure>
@ -571,8 +571,8 @@ Alter the name of a crisis.
Notice that the corresponding name in the crisis list does _not_ change.
<figure class='image-display'>
<img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
<figure>
<img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250">
</figure>
@ -587,8 +587,8 @@ Click the browser back button or the "Heroes" link instead.
Up pops a dialog box.
<figure class='image-display'>
<img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
<figure>
<img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250">
</figure>
@ -609,8 +609,8 @@ 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='generated/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
<figure>
<img src='generated/images/guide/router/router-1-anim.gif' alt="App in action" width="250">
</figure>
@ -765,8 +765,8 @@ The root `AppComponent` is the application shell. It has a title, a navigation b
and a *router outlet* where the router swaps views on and off the page. Here's what you get:
<figure class='image-display'>
<img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
<figure>
<img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell" width="300">
</figure>
@ -1250,8 +1250,8 @@ from the <live-example name="toh-pt4" title="Tour of Heroes: Services example co
Here's how the user will experience this version of the app:
<figure class='image-display'>
<img src='generated/images/guide/router/router-2-anim.gif' alt="App in action"></img>
<figure>
<img src='generated/images/guide/router/router-2-anim.gif' alt="App in action">
</figure>
@ -1880,8 +1880,8 @@ For example, when returning to the heroes list from the hero detail view,
it would be nice if the viewed hero was preselected in the list.
<figure class='image-display'>
<img src='generated/images/guide/router/selected-hero.png' alt="Selected hero"></img>
<figure>
<img src='generated/images/guide/router/selected-hero.png' alt="Selected hero">
</figure>
@ -2098,8 +2098,8 @@ 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='generated/images/guide/router/selected-hero.png' alt="Selected List"></img>
<figure>
<img src='generated/images/guide/router/selected-hero.png' alt="Selected List">
</figure>
@ -2396,8 +2396,8 @@ to conform to the following recommended pattern for Angular applications:
If your app had many feature areas, the app component trees might look like this:
<figure class='image-display'>
<img src='generated/images/guide/router/component-tree.png' alt="Component Tree"></img>
<figure>
<img src='generated/images/guide/router/component-tree.png' alt="Component Tree">
</figure>
@ -2695,8 +2695,8 @@ It displays a simple form with a header, an input box for the message,
and two buttons, "Send" and "Cancel".
<figure class='image-display'>
<img src='generated/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
<figure>
<img src='generated/images/guide/router/contact-popup.png' alt="Contact popup" width="250">
</figure>

8
aio/content/guide/security.md
View File

@ -143,8 +143,8 @@ Angular recognizes the value as unsafe and automatically sanitizes it, which rem
tag but keeps safe content such as the text content of the `<script>` tag and the `<b>` element.
<figure class='image-display'>
<img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
<figure>
<img src='generated/images/guide/security/binding-inner-html.png' width="700" height="285" alt='A screenshot showing interpolated and bound HTML values'>
</figure>
@ -232,8 +232,8 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
<figure class='image-display'>
<img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
<figure>
<img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL' width="700" height="223">
</figure>

30
aio/content/guide/set-document-title.md
View File

@ -15,28 +15,16 @@ This cookbook explains how to do it.
See the <live-example name="set-document-title"></live-example>.
<div class="l-sub-section clearfix">
<table>
<tr>
<td>
To see the browser title bar change in the live example,
open it again in the Plunker editor by clicking the icon in the upper right,
then pop out the preview window by clicking the blue 'X' button in the upper right corner.
</td>
<td>
<img src='generated/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='generated/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
</td>
</tr>
</table>
<img src='generated/images/plunker/plunker-switch-to-editor-button.png' width="200" height="70" alt="pop out the window" class="right">
<img src='generated/images/plunker/plunker-separate-window-button.png' width="200" height="47" alt="pop out the window" class="right">
To see the browser title bar change in the live example,
open it again in the Plunker editor by clicking the icon in the upper right,
then pop out the preview window by clicking the blue 'X' button in the upper right corner.
</div>
## The problem with *&lt;title&gt;*
@ -88,8 +76,8 @@ 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="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
<figure>
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
</figure>

36
aio/content/guide/structural-directives.md
View File

@ -160,8 +160,8 @@ The `ngIf` directive doesn't hide elements with CSS. It adds and removes them ph
Confirm that fact using browser developer tools to inspect the DOM.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
<figure>
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM">
</figure>
@ -188,8 +188,8 @@ A directive could hide the unwanted paragraph instead by setting its `display` s
While invisible, the element remains in the DOM.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
<figure>
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM">
</figure>
@ -263,8 +263,8 @@ None of these forms are actually rendered.
Only the finished product ends up in the DOM.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
<figure>
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM">
</figure>
@ -500,8 +500,8 @@ That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!".
Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
<figure>
<img src='generated/images/guide/structural-directives/template-rendering.png' width="350" height="59" alt="template tag rendering">
</figure>
@ -566,8 +566,8 @@ You also have a CSS style rule that happens to apply to a `<span>` within a `<p>
The constructed paragraph renders strangely.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
<figure>
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style">
</figure>
@ -590,8 +590,8 @@ When you try this,
the drop down is empty.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
<figure>
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work">
</figure>
@ -615,8 +615,8 @@ Here's the conditional paragraph again, this time using `<ng-container>`.
It renders properly.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
<figure>
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style">
</figure>
@ -633,8 +633,8 @@ Now conditionally exclude a _select_ `<option>` with `<ng-container>`.
The drop down works properly.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
<figure>
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly">
</figure>
@ -790,8 +790,8 @@ When the `condition` is falsy, the top (A) paragraph appears and the bottom (B)
When the `condition` is truthy, the top (A) paragraph is removed and the bottom (B) paragraph appears.
<figure class='image-display'>
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
<figure>
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action">
</figure>

2
aio/content/guide/styleguide.md
View File

@ -4985,7 +4985,7 @@ Useful tools and tips for Angular.
**Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com/) that follow these styles and guidelines.
<a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
<img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
<img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="700" height="429" alt="Use Extension">
</a>
**Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines.

67
aio/content/guide/template-syntax.md
View File

@ -30,7 +30,7 @@ You can extend the HTML vocabulary of your templates with components and directi
In the following sections, you'll learn how to get and set DOM (Document Object Model) values dynamically through data binding.
Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -74,7 +74,7 @@ Though this is not exactly true. Interpolation is a special syntax that Angular
But first, let's take a closer look at template expressions and statements.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -140,7 +140,7 @@ the global namespace. They can't refer to `window` or `document`. They
can't call `console.log` or `Math.max`. They are restricted to referencing
members of the expression context.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
{@a no-side-effects}
@ -197,7 +197,7 @@ Dependent values should not change during a single turn of the event loop.
If an idempotent expression returns a string or a number, it returns the same string or number
when called twice in a row. If the expression returns an object (including an `array`),
it returns the same object *reference* when called twice in a row.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -269,7 +269,7 @@ A method call or simple property assignment should be the norm.
Now that you have a feel for template expressions and statements,
you're ready to learn about the varieties of data binding syntax beyond interpolation.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -578,7 +578,7 @@ The following table summarizes:
</table>
With this broad view in mind, you're ready to look at binding types in detail.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -761,11 +761,12 @@ nor property binding.
Interpolation handles the script tags differently than property binding but both approaches render the
content harmlessly.
<figure class='image-display'>
<img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
<figure>
<img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width="500" height="40">
</figure>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -839,7 +840,7 @@ is to set ARIA attributes, as in this example:
<code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false">
</code-example>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -877,7 +878,7 @@ the [NgClass directive](guide/template-syntax#ngClass) is usually preferred when
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -913,7 +914,7 @@ Note that a _style property_ name can be written in either
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1045,7 +1046,7 @@ Deleting the hero updates the model, perhaps triggering other changes
including queries and saves to a remote server.
These changes percolate through the system and are ultimately displayed in this and other views.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1110,7 +1111,7 @@ However, no native HTML element follows the `x` value and `xChange` event patter
Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1154,7 +1155,7 @@ This section is an introduction to the most commonly used attribute directives:
* [`NgClass`](guide/template-syntax#ngClass) - add and remove a set of CSS classes
* [`NgStyle`](guide/template-syntax#ngStyle) - add and remove a set of HTML styles
* [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1195,7 +1196,7 @@ It's up to you to call `setCurrentClassess()`, both initially and when the depen
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1233,7 +1234,7 @@ It's up to you to call `setCurrentStyles()`, both initially and when the depende
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1323,11 +1324,11 @@ The following contrived example forces the input value to uppercase:
Here are all variations in action, including the uppercase version:
<figure class='image-display'>
<img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
<figure>
<img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations">
</figure>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1423,7 +1424,7 @@ described below.
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1541,11 +1542,11 @@ Here is an illustration of the _trackBy_ effect.
* With no `trackBy`, both buttons trigger complete DOM element replacement.
* With `trackBy`, only changing the `id` triggers element replacement.
<figure class='image-display'>
<img src='generated/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
<figure>
<img src="generated/images/guide/template-syntax/ng-for-track-by-anim.gif" alt="trackBy">
</figure>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1563,8 +1564,8 @@ Angular puts only the *selected* element into the DOM.
<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch" title="src/app/app.component.html" linenums="false">
</code-example>
<figure class='image-display'>
<img src='generated/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
<figure>
<img src="generated/images/guide/template-syntax/switch-anim.gif" alt="trackBy">
</figure>
`NgSwitch` is the controller directive. Bind it to an expression that returns the *switch value*.
@ -1593,7 +1594,7 @@ For example, you could replace the `<confused-hero>` switch case with the follow
<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false">
</code-example>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1665,7 +1666,7 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
<code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false">
</code-example>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1753,8 +1754,8 @@ Don't do both!
The terms _input_ and _output_ reflect the perspective of the target directive.
<figure class='image-display'>
<img src='generated/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
<figure>
<img src="generated/images/guide/template-syntax/input-output.png" alt="Inputs and outputs">
</figure>
`HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
@ -1802,7 +1803,7 @@ the directive property name on the *left* and the public alias on the *right*:
</div>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1853,7 +1854,7 @@ The generated output would look something like this
"rate": 325 }
</code-example>
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>
@ -1926,7 +1927,7 @@ The display is blank, but the app keeps rolling without errors.
</code-example>
It works perfectly with long property paths such as `a?.b?.c?.d`.
<a href="#toc">back to top</a>
<a href="#top-of-page">back to top</a>
<hr/>

16
aio/content/guide/testing.md
View File

@ -392,8 +392,8 @@ 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='generated/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
<figure>
<img src='generated/images/guide/testing/karma-browser.png' width="400" height="142" alt="Karma browser">
</figure>
@ -476,8 +476,8 @@ Debug specs in the browser in the same way that you debug an application.
1. Refresh the browser, and it stops at the breakpoint.
<figure class='image-display'>
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
<figure>
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' width="700" height="150" alt="Karma debugging">
</figure>
@ -1919,8 +1919,8 @@ 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='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
<figure>
<img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action">
</figure>
@ -2510,8 +2510,8 @@ A better solution is to create an artificial test component that demonstrates al
<figure class='image-display'>
<img src='generated/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
<figure>
<img src='generated/images/guide/testing/highlight-directive-spec.png' width="200" height="159" alt="HighlightDirective spec in action">
</figure>

32
aio/content/guide/upgrade.md
View File

@ -339,8 +339,8 @@ everything work seamlessly:
use in AngularJS.
<figure class='image-display'>
<img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
<figure>
<img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700" height="262">
</figure>
@ -384,8 +384,8 @@ ways:
and Angular content projection together.
<figure class='image-display'>
<img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
<figure>
<img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500" height="294">
</figure>
@ -438,8 +438,8 @@ AngularJS and Angular approaches. Here's what happens:
detection after every event.
<figure class='image-display'>
<img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
<figure>
<img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600" height="163">
</figure>
@ -572,9 +572,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
### Using Angular Components from AngularJS Code
<figure>
<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left" width="250" height="44">
@ -736,10 +734,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="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left" width="250" height="44">
So, we can write an Angular component and then use it from AngularJS
@ -939,10 +934,7 @@ and then provide the input and output using Angular template syntax:
### Projecting AngularJS Content into Angular Components
<figure>
<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left" width="250" height="48">
When we are using a downgraded Angular component from an AngularJS
@ -986,11 +978,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
### Transcluding Angular Content into AngularJS Component Directives
<figure>
<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left" width="250" height="48">
Just like we can project AngularJS content into Angular components,
we can *transclude* Angular content into AngularJS components, whenever

16
aio/content/guide/user-input.md
View File

@ -97,8 +97,8 @@ Here's what the UI displays:
<figure class='image-display'>
<img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
<figure>
<img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1">
</figure>
@ -180,8 +180,8 @@ and the component does nothing.
Type something in the input box, and watch the display update with each keystroke.
<figure class='image-display'>
<img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
<figure>
<img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back">
</figure>
@ -234,8 +234,8 @@ Then Angular calls the event handler only when the user presses _Enter_.
Here's how it works.
<figure class='image-display'>
<img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
<figure>
<img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3">
</figure>
@ -268,8 +268,8 @@ The user can add a hero by typing the hero's name in the input box and
clicking **Add**.
<figure class='image-display'>
<img src='generated/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
<figure>
<img src='generated/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes">
</figure>

BIN
aio/content/images/guide/aot-compiler/toh-pt6-bundle-200w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
aio/content/images/guide/aot-compiler/toh-pt6-bundle-400w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
aio/content/images/guide/aot-compiler/toh-pt6-bundle-560w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

20
aio/content/tutorial/index.md
View File

@ -40,8 +40,8 @@ Here's a visual idea of where this tutorial leads, beginning with the "Dashboard
view and the most heroic heroes:
<figure class='image-display'>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
<figure>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
</figure>
@ -53,8 +53,8 @@ If you click the dashboard hero "Magneta," the router opens a "Hero Details" vie
where you can change the hero's name.
<figure class='image-display'>
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
<figure>
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
</figure>
@ -64,8 +64,8 @@ Links at the top take you to either of the main views.
If you click "Heroes," the app displays the "Heroes" master list view.
<figure class='image-display'>
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
<figure>
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
</figure>
@ -78,8 +78,8 @@ editable details of the selected hero.
The following diagram captures all of the navigation options.
<figure class='image-display'>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
<figure>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</figure>
@ -87,8 +87,8 @@ The following diagram captures all of the navigation options.
Here's the app in action:
<figure class='image-display'>
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
<figure>
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">
</figure>

8
aio/content/tutorial/toh-pt2.md
View File

@ -393,8 +393,8 @@ For example, when the user clicks "Magneta", it should render with a distinctive
like this:
<figure class='image-display'>
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
<figure>
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</figure>
@ -434,8 +434,8 @@ The final version of the `<li>` looks like this:
After clicking "Magneta", the list should look like this:
<figure class='image-display'>
<img src='generated/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
<figure>
<img src='generated/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app">
</figure>

12
aio/content/tutorial/toh-pt5.md
View File

@ -18,8 +18,8 @@ There are new requirements for the Tour of Heroes app:
When you’re done, users will be able to navigate the app like this:
<figure class='image-display'>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
<figure>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</figure>
@ -966,8 +966,8 @@ Add the following HTML fragment at the bottom of the template where the `<hero-d
After clicking a hero, users should see something like this below the hero list:
<figure class='image-display'>
<img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
<figure>
<img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70">
</figure>
@ -1220,8 +1220,8 @@ Also edit <code>index.html</code> to refer to this stylesheet.
Look at the app now. The dashboard, heroes, and navigation links are styled.
<figure class='image-display'>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
<figure>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="View navigations">
</figure>

6
aio/content/tutorial/toh-pt6.md
View File

@ -699,8 +699,8 @@ Run the app again. In the Dashboard, enter some text in the search box.
If you enter characters that match any existing hero names, you'll see something like this.
<figure class='image-display'>
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
<figure>
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
</figure>
@ -929,6 +929,6 @@ Here are the files you added or changed in this page.
## Next step
That concludes the "Tour of Heroes" tutorial.
That concludes the "Tour of Heroes" tutorial.
You're ready to learn more about Angular development in the fundamentals section,
starting with the [Architecture](guide/architecture "Architecture") guide.

2
aio/src/app/embedded/live-example/live-example.component.html
View File

@ -4,7 +4,7 @@
<div *ngIf="showEmbedded" title="{{title}}">
<aio-embedded-plunker [src]="plnkr"></aio-embedded-plunker>
</div>
<img *ngIf="!showEmbedded" (click)="toggleEmbedded()" [src]="plnkrImg" width="100%" height="100%" alt="{{title}}">
<img *ngIf="!showEmbedded" (click)="toggleEmbedded()" [src]="plnkrImg" alt="{{title}}">
<p *ngIf="enableDownload">
You can also <a [href]="zip" download title="Download example">download this example</a>.
</p>

6
aio/src/styles/0-base/_typography.scss
View File

@ -25,30 +25,35 @@
width: 40%;
margin: 24px 0px 10px;
background: $lightgray;
clear: both;
}
h2 {
font-size: 22px;
font-weight: 500;
margin: 32px 0px 24px;
clear: both;
}
h3 {
font-size: 20px;
font-weight: 400;
margin: 24px 0px;
clear: both;
}
h4 {
font-size: 18px;
font-weight: 400;
margin: 8px 0px;
clear: both;
}
h5 {
font-size: 16px;
font-weight: 500;
margin: 8px 0px;
clear: both;
}
h6 {
@ -56,6 +61,7 @@
font-size: 16px;
font-weight: 500;
margin: 8px 0px;
clear: both;
}
h1, h2 {

4
aio/src/styles/1-layouts/_layout-global.scss
View File

@ -12,6 +12,10 @@ body {
clear: both;
}
.clear {
clear: both;
}
l-relative {
position: relative;
}

17
aio/src/styles/2-modules/_code.scss
View File

@ -1,11 +1,14 @@
code-example, code-tabs {
clear: both;
display: block;
}
code-example,
code-tabs md-tab-body {
background-color: rgba($backgroundgray, 0.2);
border: 0.5px solid $lightgray;
border-radius: 5px;
color: $darkgray;
display: block;
padding: 8px 16px;
margin: 16px auto;
code {
@ -25,7 +28,6 @@ code-example header {
color: $offwhite;
font-size: 16px;
padding: 8px 16px;
margin: -17px;
}
code-example.avoid header,
@ -55,8 +57,8 @@ code-tabs mat-tab-body-content .fadeIn {
aio-code pre {
display: flex;
padding: 0 48px 0 0;
min-height: 32px;
margin: 16px;
white-space: pre-wrap;
align-items: center;
@ -66,6 +68,7 @@ aio-code pre {
}
code ol {
margin: 0;
font-family: $main-font;
color: $lightgray;
@ -76,12 +79,6 @@ code ol {
}
}
aio-code.headed-code {
pre.prettyprint {
margin-top: 32px;
}
}
.code-missing {
color: $darkred;
}

66
aio/src/styles/2-modules/_images.scss
View File

@ -1,25 +1,51 @@
img {
@media (max-width: 600px) {
max-width: 100%;
float: none !important;
}
}
.image-display {
border-radius: 4px;
background: $white;
padding: 20px;
display: inline-block;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
margin: 0 0 10px 0;
.content {
img {
&.right {
clear: both;
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
&.left {
clear: both;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
@media (max-width: 1300px) {
max-width: 100%;
height: auto;
}
@media (max-width: 600px) {
float: none !important;
&.right {
margin-left: 0;
}
&.left {
margin-right: 0;
}
}
}
figure {
border-radius: 4px;
background: $white;
padding: 20px;
display: inline-block;
max-width: 100%;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
margin: 0 0 14px 0;
img {
border-radius: 4px;
}
}
// This page specific style should not really be here
.home-row .promo-img-container img {
max-width: 90%;
}
}
.home-row .promo-img-container img {
max-width: 90%;
}

1
aio/tools/transforms/angular.io-package/index.js
View File

@ -42,4 +42,5 @@ module.exports = new Package('angular.io', [gitPackage, apiPackage, contentPacka
return (existsSync(resolve(SRC_PATH, url)));
}
});
checkAnchorLinksProcessor.pathVariants = ['', '/', '.html', '/index.html', '#top-of-page'];
});