The examples in this page are available as a
.
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 683576db67..5944f01a97 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -1,40 +1,8 @@
-@title
-Ahead-of-Time Compilation
-
-@intro
-Learn how to use ahead-of-time compilation.
-
-@description
+# Ahead-of-Time Compilation
This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT)
during a build process.
-{@a toc}
-
-
{@a overview}
## Overview
diff --git a/aio/content/guide/appmodule.md b/aio/content/guide/appmodule.md
index 2d7d29916b..da07541c62 100644
--- a/aio/content/guide/appmodule.md
+++ b/aio/content/guide/appmodule.md
@@ -1,11 +1,4 @@
-@title
-AppModule: the root module
-
-@intro
-Tell Angular how to construct and bootstrap the app in the root "AppModule".
-
-@description
-
+# AppModule: the root module
An Angular module class describes how the application parts fit together.
Every application has at least one Angular module, the _root_ module
@@ -193,4 +186,4 @@ As your app grows, you'll consider subdividing it into multiple "feature" module
some of which can be loaded later ("lazy loaded") if and when the user chooses
to visit those features.
-When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide.
\ No newline at end of file
+When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide.
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index 32bbffc884..7066fc332c 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -2,18 +2,6 @@
An **Attribute** directive changes the appearance or behavior of a DOM element.
-
-
Try the
.
{@a directive-overview}
@@ -136,7 +124,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
-### Your directive isn't working?
+
Your directive isn't working?
Did you remember to add the directive to the `declarations` attribute of `@NgModule`?
It is easy to forget!
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index ca8c887018..541a32679c 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -1,12 +1,4 @@
-@title
-Browser support
-
-@intro
-Browser support and polyfills guide.
-
-@description
-
-
+# Browser support
Angular supports most recent browsers. This includes the following specific versions:
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 1cc7cc3c1e..9b0fe605f6 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -1,10 +1,4 @@
-@title
-Change Log
-
-@intro
-An annotated history of recent documentation improvements.
-
-@description
+# Change Log
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index c207efeb46..38626c5a55 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -1,7 +1,4 @@
-@title
-Cheat Sheet
-
-@description
+# Cheat Sheet
@@ -387,4 +384,4 @@ so the @Directive configuration applies to components as well
-
\ No newline at end of file
+
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md
index 5ccbf6ca29..73863f5ad2 100644
--- a/aio/content/guide/cli-quickstart.md
+++ b/aio/content/guide/cli-quickstart.md
@@ -1,8 +1,4 @@
-@title
-CLI QuickStart
-
-@description
-
+# CLI QuickStart
Good tools make application development quicker and easier to maintain than
if you did everything by hand.
diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md
index 336d9aaf2c..e99b597456 100644
--- a/aio/content/guide/component-interaction.md
+++ b/aio/content/guide/component-interaction.md
@@ -1,10 +1,5 @@
-@title
-Component Interaction
+# Component Interaction
-@intro
-Share information between different directives and components.
-
-@description
{@a top}
This cookbook contains recipes for common component communication scenarios
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index 43431242d6..9683e8c779 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -1,10 +1,4 @@
-@title
-Dependency Injection
-
-@intro
-Techniques for Dependency Injection.
-
-@description
+# Dependency Injection
Dependency Injection is a powerful pattern for managing code dependencies.
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index 4f25a40cd8..900f923a47 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -1,12 +1,4 @@
-@title
-Dependency Injection
-
-@intro
-Angular's dependency injection system creates and delivers dependent services "just-in-time".
-
-@description
-
-
+# Dependency Injection
**Dependency injection** is an important application design pattern.
Angular has its own dependency injection framework, and
@@ -16,45 +8,6 @@ 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 77f1d02ee0..4ddf8ddd8c 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -1,39 +1,10 @@
-@title
-Deployment
-
-@intro
-Learn how to deploy your Angular app.
-
-@description
-
+# Deployment
This page describes tools and techniques for deploy and optimize your Angular application.
{@a toc}
-
-
{@a overview}
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
index afaf34083a..83f592d404 100644
--- a/aio/content/guide/displaying-data.md
+++ b/aio/content/guide/displaying-data.md
@@ -1,12 +1,4 @@
-@title
-Displaying Data
-
-@intro
-Property binding helps show app data in the UI.
-
-@description
-
-
+# Displaying Data
You can display data by binding controls in an HTML template to properties of an Angular component.
@@ -21,16 +13,6 @@ The final UI looks like this:
-
-
@@ -282,7 +264,7 @@ That brief syntax does a lot:
-## Using the Hero class
+### Using the Hero class
After importing the `Hero` class, the `AppComponent.heroes` property can return a _typed_ array
of `Hero` objects:
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
index fc81da4981..f16a675f43 100644
--- a/aio/content/guide/dynamic-form.md
+++ b/aio/content/guide/dynamic-form.md
@@ -1,10 +1,4 @@
-@title
-Dynamic Forms
-
-@intro
-Render dynamic forms with FormGroup.
-
-@description
+# Dynamic Forms
{@a top}
@@ -27,17 +21,6 @@ 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 .
{@a bootstrap}
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index 315cd12941..de1cc38b01 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -1,11 +1,4 @@
-@title
-Form Validation
-
-@intro
-Validate user's form entries.
-
-@description
-
+# Form Validation
{@a top}
@@ -29,34 +22,6 @@ and the [Reactive Forms](guide/reactive-forms) guides.
{@a toc}
-
-
{@a live-example}
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index 1deff0950e..ea35f5ff44 100644
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@@ -1,11 +1,4 @@
-@title
-Forms
-
-@intro
-A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.
-
-@description
-
+# Forms
Forms are the mainstay of business applications.
You use forms to log in, submit a help request, place an order, book a flight,
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
index 6c837ba14f..094b52a110 100644
--- a/aio/content/guide/glossary.md
+++ b/aio/content/guide/glossary.md
@@ -1,9 +1,4 @@
-@title
-Angular Glossary
-
-@description
-
-
+# Angular Glossary
Angular has its own vocabulary.
Most Angular terms are common English words
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
index 6b7775d9f0..9cb39383f1 100644
--- a/aio/content/guide/hierarchical-dependency-injection.md
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -1,12 +1,4 @@
-@title
-Hierarchical Dependency Injectors
-
-@intro
-Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree.
-
-@description
-
-
+# Hierarchical Dependency Injectors
You learned the basics of Angular Dependency injection in the
[Dependency Injection](guide/dependency-injection) guide.
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index 76aad0f33b..1d2348f30b 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -1,49 +1,10 @@
-@title
-Internationalization (i18n)
-
-@intro
-Translate the app's template text into multiple languages.
-
-@description
-
+# Internationalization (i18n)
{@a top}
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/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index 3cad485de9..c1d939071b 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -1,12 +1,4 @@
-@title
-NgModule FAQs
-
-@intro
-Answers to frequently asked questions about @NgModule.
-
-@description
-
-
+# NgModule FAQs
NgModules help organize an application into cohesive blocks of functionality.
@@ -24,62 +16,6 @@ These FAQs assume that you have read the [NgModules](guide/ngmodule) page.
-
-
{@a q-what-to-declare}
@@ -550,7 +486,8 @@ from components outside the `AppComponent` tree. This is a rare use case.
More generally, [prefer registering providers in modules](guide/ngmodule-faq#q-component-or-module) to registering in components.
-### Discussion
+
Discussion
+
Angular registers all startup module providers with the application root injector.
The services created from root injector providers are available to the entire application.
They are _application-scoped_.
diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md
index f562189c56..874b29e318 100644
--- a/aio/content/guide/npm-packages.md
+++ b/aio/content/guide/npm-packages.md
@@ -1,11 +1,4 @@
-@title
-Npm Packages
-
-@intro
-Recommended npm packages, and how to specify package dependencies.
-
-@description
-
+# Npm Packages
Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
These packages are maintained and installed with the Node Package Manager (
npm).
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index e996c2636e..ec6cb7d0f9 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -1,11 +1,4 @@
-@title
-Reactive Forms
-
-@intro
-Create a reactive form using FormBuilder, groups, and arrays.
-
-@description
-
+# Reactive Forms
_Reactive forms_ is an Angular technique for creating forms in a _reactive_ style.
This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
@@ -13,30 +6,6 @@ This guide explains reactive forms as you follow the steps to build a "Hero Deta
{@a toc}
-
-
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 7e7b3e89d9..88917b6d82 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -1,11 +1,4 @@
-@title
-Routing & Navigation
-
-@intro
-Discover the basics of screen navigation with the Angular Router.
-
-@description
-
+# Routing & Navigation
The Angular **`Router`** enables navigation from one [view](guide/glossary#view) to the next
as users perform application tasks.
@@ -33,110 +26,6 @@ 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}
@@ -3980,7 +3869,7 @@ The appendix material isn't essential. Continued reading is for the curious.
-## Appendix: link parameters array
+### Appendix: link parameters array
A link parameters array holds the following ingredients for router navigation:
@@ -4073,7 +3962,7 @@ any legal sequence of route paths, (required) router parameters, and (optional)
-## Appendix: *LocationStrategy* and browser URL styles
+### Appendix: *LocationStrategy* and browser URL styles
When the router navigates to a new component view, it updates the browser's location and history
with a URL for that view.
@@ -4131,7 +4020,7 @@ Learn about providers and the bootstrap process in the
-### Which strategy is best?
+#### Which strategy is best?
You must choose a strategy and you need to make the right call early in the project.
It won't be easy to change later once the application is in production
@@ -4153,7 +4042,7 @@ without hashes (#) in the middle.
Stick with the default unless you have a compelling reason to
resort to hash routes.
-### HTML5 URLs and the *<base href>*
+#### HTML5 URLs and the *<base href>*
While the router uses the
HTML5 pushState
@@ -4185,7 +4074,7 @@ Those developers may still use HTML5 URLs by taking two remedial steps:
{@a hashlocationstrategy}
-### *HashLocationStrategy*
+#### *HashLocationStrategy*
You can go old-school with the `HashLocationStrategy` by
providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot`
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index 2cdc446bec..0b70b70ad1 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -1,12 +1,4 @@
-@title
-Security
-
-@intro
-Developing for content security in Angular applications.
-
-@description
-
-
+# Security
This page describes Angular's built-in
protections against common web-application vulnerabilities and attacks such as cross-site
@@ -15,19 +7,6 @@ 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-systemjs-anatomy.md b/aio/content/guide/setup-systemjs-anatomy.md
index 41d77e945b..b2f83f49bb 100644
--- a/aio/content/guide/setup-systemjs-anatomy.md
+++ b/aio/content/guide/setup-systemjs-anatomy.md
@@ -1,12 +1,4 @@
-@title
-Anatomy of the Setup Project
-
-@intro
-Inside the local development environment for SystemJS.
-
-@description
-
-
+# Anatomy of the Setup Project
The documentation [setup](guide/setup) procedures install a _lot_ of files.
Most of them can be safely ignored.
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
index 290eaa1778..179a92595f 100644
--- a/aio/content/guide/setup.md
+++ b/aio/content/guide/setup.md
@@ -1,12 +1,4 @@
-@title
-Setup for local development
-
-@intro
-Install the Angular QuickStart seed for faster, more efficient development on your machine.
-
-@description
-
-
+# Setup for local development
{@a develop-locally}
@@ -20,21 +12,10 @@ 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}
-### Clone
+## Clone
Perform the _clone-to-launch_ steps with these terminal commands.
@@ -63,7 +44,7 @@ Perform the _clone-to-launch_ steps with these terminal commands.
{@a download}
-### Download
+## Download
Download the QuickStart seed
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 0fcf1bd517..71bed73414 100644
--- a/aio/content/guide/structural-directives.md
+++ b/aio/content/guide/structural-directives.md
@@ -1,12 +1,4 @@
-@title
-Structural Directives
-
-@intro
-Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements.
-
-@description
-
-
+# Structural Directives