diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 6fa5c2d6b3..320d0fc3be 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -19,6 +19,7 @@ by mapping AngularJS syntax to the equivalent Angular syntax.
**See the Angular syntax in this **.
+
## Template basics
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 34cdc0f299..a744024dc1 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -10,7 +10,7 @@ This cookbook describes how to radically improve performance by compiling _ahead
during a build process.
{@a toc}
-
+
+
{@a overview}
## Overview
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index b225883e29..234fdf7d8c 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -30,7 +30,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
-
+
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index 86b641dc73..b637e49c37 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -10,6 +10,7 @@ Attribute directives attach behavior to elements.
An **Attribute** directive changes the appearance or behavior of a DOM element.
+
+
Try the
.
{@a directive-overview}
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md
index 7f57e6ec26..93398910c4 100644
--- a/aio/content/guide/cli-quickstart.md
+++ b/aio/content/guide/cli-quickstart.md
@@ -19,6 +19,8 @@ benefit _every_ Angular project.
By the end of the chapter, you'll have a basic understanding of development with the CLI
and a foundation for both these documentation samples and for real world applications.
+
+
And you can also
download the example.
diff --git a/aio/content/guide/component-communication.md b/aio/content/guide/component-communication.md
index 547a7ac87c..38af8444c4 100644
--- a/aio/content/guide/component-communication.md
+++ b/aio/content/guide/component-communication.md
@@ -11,6 +11,8 @@ This cookbook contains recipes for common component communication scenarios
in which two or more components share information.
{@a toc}
+
**See the
**.
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index 42e13bafb0..5633703d4c 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -17,6 +17,8 @@ with components, enabling a more modular design than regular stylesheets.
This page describes how to load and apply these component styles.
+
+
You can run the
in Plunker and download the code from there.
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index 102bf4cacd..3f10654874 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -11,6 +11,8 @@ Dependency Injection is a powerful pattern for managing code dependencies.
This cookbook explores many of the features of Dependency Injection (DI) in Angular.
{@a toc}
+
See the
of the code in this cookbook.
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index 0c4eb79c0b..4f25a40cd8 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -16,6 +16,8 @@ It's used so widely that almost everyone just calls it _DI_.
This page covers what DI is, why it's so useful,
and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
+
+
Run the
.
{@a why-di }
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index 5d5b37b446..77f1d02ee0 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -12,6 +12,7 @@ This page describes tools and techniques for deploy and optimize your Angular ap
{@a toc}
+
{@a overview}
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
index 54c1f0bc02..2a7576e983 100644
--- a/aio/content/guide/displaying-data.md
+++ b/aio/content/guide/displaying-data.md
@@ -21,7 +21,7 @@ The final UI looks like this:
-
+
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
index 261431c390..5d6cec220e 100644
--- a/aio/content/guide/dynamic-component-loader.md
+++ b/aio/content/guide/dynamic-component-loader.md
@@ -13,6 +13,8 @@ This cookbook shows you how to use `ComponentFactoryResolver` to add components
{@a toc}
+
See the
of the code in this cookbook.
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
index c6c0bf9ce6..8ffa9b51f5 100644
--- a/aio/content/guide/dynamic-form.md
+++ b/aio/content/guide/dynamic-form.md
@@ -27,6 +27,8 @@ The agency is constantly tinkering with the application process.
You can create the forms on the fly *without changing the application code*.
{@a toc}
+
See the .
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index c183febfc7..2fe7cd0d42 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -29,6 +29,7 @@ and the [Reactive Forms](guide/reactive-forms) guides.
{@a toc}
+
{@a live-example}
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md
index 029b4a790d..540ed1c6ab 100644
--- a/aio/content/guide/http.md
+++ b/aio/content/guide/http.md
@@ -28,6 +28,8 @@ Modern browsers support two HTTP-based APIs:
The Angular HTTP library simplifies application programming with the **XHR** and **JSONP** APIs.
+
+
A live example illustrates these topics.
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index 570d67ea2c..76aad0f33b 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -12,6 +12,8 @@ Translate the app's template text into multiple languages.
Angular's _internationalization_ (_i18n_) tools help make your app available in multiple languages.
+
Try this live example
of a JIT-compiled app, translated into Spanish.
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index 40894e7f62..b771d374d8 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -25,6 +25,7 @@ that provide visibility into these key life moments and the ability to act when
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
+
{@a hooks-overview}
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index c8eb6e9967..3cad485de9 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -24,7 +24,7 @@ These FAQs assume that you have read the [NgModules](guide/ngmodule) page.
-
+
{@a q-what-to-declare}
diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md
index f7d1314593..2e1f0b2cb2 100644
--- a/aio/content/guide/ngmodule.md
+++ b/aio/content/guide/ngmodule.md
@@ -18,7 +18,7 @@ of creating and maintaining a single root `AppModule` for the entire application
This page covers NgModules in greater depth.
-
+
+
Try the
Reactive Forms live-example.
You can also run the
Reactive Forms Demo version
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index 434a6ac3f0..9fb10f9a99 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -33,6 +33,7 @@ You can navigate imperatively when the user clicks a button, selects from a drop
or in response to some other stimulus from any source. And the router logs activity
in the browser's history journal so the back and forward buttons work as well.
+
{@a basics}
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index 01f9d93c24..2b9eb93d07 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -15,7 +15,7 @@ this user?_) and authorization (_What can this user do?_).
For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
-
+
You can run the
in Plunker and download the code from there.
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
index 5d7379335b..290eaa1778 100644
--- a/aio/content/guide/setup.md
+++ b/aio/content/guide/setup.md
@@ -19,6 +19,9 @@ maintained [on github](https://github.com/angular/quickstart "Install the github
Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
+
+
{@a clone}
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 5c358182a1..e90d7a5819 100644
--- a/aio/content/guide/structural-directives.md
+++ b/aio/content/guide/structural-directives.md
@@ -19,6 +19,8 @@ Angular has a powerful template engine that lets us easily manipulate the DOM st
This guide looks at how Angular manipulates the DOM with **structural directives** and
how you can write your own structural directives to do the same thing.
+
Try the
.
diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index d7578dd08e..f306d00ef6 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -15,6 +15,7 @@ This style guide presents preferred conventions and, as importantly, explains wh
{@a toc}
+
## Style vocabulary
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 2543126773..d088637d3b 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -26,6 +26,8 @@ In Angular, the component plays the part of the controller/viewmodel, and the te
{@a toc}
+
{@a html}
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index eb920baf44..ab97da77ed 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -15,6 +15,8 @@ the focus is on testing applications written with Angular.
{@a top}
+
+
## Live examples
This guide presents tests of a sample application that is much like the [_Tour of Heroes_ tutorial](tutorial).
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md
index 57fb98e515..da7bfe9070 100644
--- a/aio/content/guide/upgrade.md
+++ b/aio/content/guide/upgrade.md
@@ -32,6 +32,8 @@ business, because the work can be done collaboratively and spread over
a period of time. The `upgrade` module in Angular has been designed to
make incremental upgrading seamless.
+
## Preparation
diff --git a/aio/content/guide/visual-studio-2015.md b/aio/content/guide/visual-studio-2015.md
index bd2a308c27..959d65e213 100644
--- a/aio/content/guide/visual-studio-2015.md
+++ b/aio/content/guide/visual-studio-2015.md
@@ -30,6 +30,8 @@ the QuickStart application itself.
To set up the QuickStart files with an **ASP.NET 4.x project** in
Visual Studio 2015, follow these steps:
+
diff --git a/aio/content/guide/webpack.md b/aio/content/guide/webpack.md
index 1616adb71f..30c75bd2e7 100644
--- a/aio/content/guide/webpack.md
+++ b/aio/content/guide/webpack.md
@@ -25,6 +25,8 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
{@a top}
+
+
You can also
download the final result.
{@a what-is-webpack}