docs(aio): doc guide tweaks (GS thru Components)

Working through obvious non-image content defects, from top of menu (Getting Started) through Fundamentals/Components.

aio/content/guide/component-styles.md

@@ -1,12 +1,4 @@
-@title
-Component Styles
-
-@intro
-Learn how to apply CSS styles to components.
-
-@description
-
-
+# Component Styles
 
 Angular applications are styled with standard CSS. That means you can apply
 everything you know about CSS stylesheets, selectors, rules, and media queries
@@ -142,29 +134,20 @@ through this component to all of its child elements in the DOM.
 
 </code-example>
 
-
-
 The `/deep/` selector also has the alias `>>>`. You can use either interchangeably.
 
 
 <div class="alert is-important">
 
-
-
 Use the `/deep/` and `>>>` selectors only with *emulated* view encapsulation.
 Emulated is the default and most commonly used view encapsulation. For more information, see the
 [Controlling view encapsulation](guide/component-styles#view-encapsulation) section.
 
-
 </div>
 
-
-
 {@a loading-styles}
 
-
-
-## Loading styles into components
+## Loading component styles
 
 There are several ways to add styles to a component: 
 
@@ -279,7 +262,7 @@ In this case, the URL is relative to the CSS file into which you're importing.
 
 
 
-## Controlling view encapsulation: native, emulated, and none
+## View encapsulation
 
 As discussed earlier, component CSS styles are encapsulated into the component's view and don't
 affect the rest of the application.
@@ -323,7 +306,7 @@ in most cases.
 
 
 
-## Appendix 1: Inspecting the CSS generated in emulated view encapsulation
+## Appendix: Inspecting generated CSS
 
 When using emulated view encapsulation, Angular preprocesses
 all component styles so that they approximate the standard shadow CSS scoping rules.
@@ -381,7 +364,7 @@ These extra selectors enable the scoping rules described in this page.
 
 
 
-## Appendix 2: Loading styles with relative URLs
+## Appendix: Loading with relative URLs
 
 It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
 

aio/content/guide/dynamic-component-loader.md

@@ -1,34 +1,9 @@
-@title
-Dynamic Component Loader
-
-@intro
-Load components dynamically.
-
-@description
-
+# Dynamic Component Loader
 
 Component templates are not always fixed. An application may need to load new components at runtime.
 
 This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
 
-{@a toc}
-
-<!--
-
-# Contents
-
-   * [Dynamic component loading](guide/dynamic-component-loader#dynamic-loading)
-   * [The directive](guide/dynamic-component-loader#directive)
-   * [Loading components](guide/dynamic-component-loader#loading-components)
-
-     * [Resolving Components](guide/dynamic-component-loader#resolving-components)
-     * [Selector References](guide/dynamic-component-loader#selector-references)
-
-   * [A common _AdComponent_ interface](guide/dynamic-component-loader#common-interface)
-   * [Final ad banner](guide/dynamic-component-loader#final-ad-banner)
-
--->
-
 See the <live-example name="dynamic-component-loader"></live-example>
 of the code in this cookbook.
 
@@ -51,7 +26,7 @@ Angular comes with its own API for loading components dynamically.
 
 {@a directive}
 
-## The directive
+## The anchor directive
 
 Before you can add components you have to define an anchor point
 to tell Angular where to insert components.
@@ -100,7 +75,7 @@ because it doesn't render any additional output.
 {@a resolving-components}
 
 
-### Resolving components
+## Resolving components
 
 Take a closer look at the methods in `ad-banner.component.ts`.
 
@@ -184,7 +159,7 @@ add dynamically loaded components to the `NgModule`'s `entryComponents` array:
 {@a common-interface}
 
 
-### A common _AdComponent_ interface
+## The _AdComponent_ interface
 
 In the ad banner, all components implement a common `AdComponent` interface to
 standardize the API for passing data to the components.
@@ -213,7 +188,7 @@ Here are two sample components and the `AdComponent` interface for reference:
 {@a final-ad-baner}
 
 
-### Final ad banner
+## Final ad banner
  The final ad banner looks like this:
 
 <figure class='image-display'>

aio/content/guide/ngmodule.md

@@ -1,5 +1,4 @@
-<h1 class="no-toc">NgModules</h1>
-
+# NgModules
 
 **NgModules** help organize an application into cohesive blocks of functionality.
 <!-- CF: "app" and "application" are used interchangeably throughout this page.
@@ -38,7 +37,7 @@ This page covers NgModules in greater depth.
  CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
  section at the end of this page, but that section doesn't exist. -->
 
-### Live examples
+#### Live examples
 This page explains NgModules through a progression of improvements to a sample with a "Tour of Heroes" theme.
 Here's an index to live examples at key moments in the evolution of the sample:
 
@@ -48,7 +47,7 @@ Here's an index to live examples at key moments in the evolution of the sample:
 * <live-example plnkr="pre-shared.3">Just before adding SharedModule</live-example>
 * <live-example>The final version</live-example>
 
-### Frequently asked questions (FAQs)
+#### Frequently asked questions (FAQs)
 
 This page covers NgModule concepts in a tutorial fashion.
 
@@ -108,7 +107,7 @@ Later in this page, you'll read about this process. For now, you'll start with t
 
 
 
-## _AppModule_: the application root module
+## The root _AppModule_
 
 Every Angular app has a *root module* class.
 By convention, the *root module* class is called `AppModule` and it exists in a file named `app.module.ts`.
@@ -156,7 +155,7 @@ You launch the application by bootstrapping the `AppModule` in the `main.ts` fil
 Angular offers a variety of bootstrapping options targeting multiple platforms.
 This page describes two options, both targeting the browser.
 
-### Dynamic bootstrapping with the just-in-time (JIT) compiler
+### Compile just-in-time (JIT)
 In the first, _dynamic_ option, the [Angular compiler](guide/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
 compiles the application in the browser and then launches the app.
 
@@ -172,7 +171,7 @@ The samples in this page demonstrate the dynamic bootstrapping approach.
 <live-example embedded plnkr="minimal.0" img="guide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
 
 
-### Static bootstrapping with the ahead-of-time (AOT) compiler
+### Compile ahead-of-time (AOT)
 
 Consider the static alternative which can produce a much smaller application that
 launches faster, especially on mobile devices and high latency networks.
@@ -245,10 +244,6 @@ Import the `HighlightDirective` class and add it to the module's `declarations`
 
 </code-example>
 
-
-
-### Add a component
-
 Refactor the title into its own `TitleComponent`.
 The component's template binds to the component's `title` and `subtitle` properties like this:
 
@@ -388,7 +383,7 @@ You must import those modules before you can use their directives.
 To illustrate this point, you'll extend the sample app with `ContactComponent`,
 a form component that imports form support from the Angular `FormsModule`.
 
-### Add the _ContactComponent_
+<h3 class="no-toc">Add the _ContactComponent_</h3>
 
 [Angular forms](guide/forms) are a great way to manage user data entry.
 
@@ -400,7 +395,7 @@ implemented with Angular forms in the [template-driven form](guide/forms#templat
 
 
 
-### Angular form styles
+<h3 class="no-toc">Angular form styles</h3>
 
 You can write Angular form components in
 template-driven or
@@ -476,7 +471,7 @@ Even if Angular somehow recognized `ngModel`,
 `ContactComponent` wouldn't behave like an Angular form because
 form features such as validation aren't yet available.
 
-### Import the FormsModule
+<h3 class="no-toc">Import the FormsModule</h3>
 
 Add the `FormsModule` to the `AppModule` metadata's `imports` list.
 
@@ -510,7 +505,7 @@ Components, directives, and pipes belong to _one module only_.
 {@a declare-pipe}
 
 
-### Declare the contact component, directive, and pipe
+<h3 class="no-toc">Declare the contact component, directive, and pipe</h3>
 
 The application won't compile until you declare the contact component, directive, and pipe.
 Update the `declarations` in the  `AppModule` accordingly:
@@ -547,7 +542,7 @@ You'll learn more about that issue later in this page, in [Resolve directive con
 
 
 
-### Provide the _ContactService_
+<h3 class="no-toc">Provide the _ContactService_</h3>
 The `ContactComponent` displays contacts retrieved by the `ContactService`,
 which Angular injects into its constructor.
 
@@ -574,7 +569,7 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
 
 
 
-### Application-scoped providers
+<h3 class="no-toc">Application-scoped providers</h3>
   The `ContactService` provider is _application_-scoped because Angular
   registers a module's `providers` with the application's *root injector*.
 
@@ -602,7 +597,7 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
 
 
 
-### Run the app
+<h3 class="no-toc">Run the app</h3>
 Everything is in place to run the application with its contact editor.
 
 The app file structure looks like this:
@@ -1322,7 +1317,7 @@ whether that component is eagerly or lazily loaded.
 
 
 
-### Why bother?
+<h3 class="no-toc">Why bother?</h3>
 This scenario is clearly contrived.
 The app is too small to worry about a single service file and a tiny, one-time component.
 
@@ -1530,12 +1525,12 @@ Angular creates a lazy-loaded module with its own injector, a _child_ of the roo
 Of course it finds the instance imported by the root `AppModule`.
 Now `parentModule` exists and the constructor throws the error.
 
-### Conclusion
+## Conclusion
 
 You made it! You can examine and download the complete source for this final version from the live example.
 <live-example embedded  img="guide/ngmodule/final-plunker.png"></live-example>
 
-### Frequently asked questions
+## Frequently asked questions
 
 Now that you understand NgModules, you may be interested
 in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page

aio/content/guide/pipes.md

@@ -1,12 +1,4 @@
-@title
-Pipes
-
-@intro
-Pipes transform displayed values within a template.
-
-@description
-
-
+# Pipes
 
 Every application starts out with what seems like a simple task: get data, transform them, and show them to users.
 Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
@@ -27,7 +19,6 @@ Introducing Angular pipes, a way to write display-value transformations that you
 You can run the <live-example></live-example> in Plunker and download the code from there.
 
 
-
 ## Using pipes
 
 A pipe takes in data as input and transforms it to a desired output.
@@ -217,25 +208,19 @@ Your pipe has one such parameter: the `exponent`.
 
 
 
-### The *PipeTransform* interface
+## The *PipeTransform* interface
 
 The `transform` method is essential to a pipe.
 The `PipeTransform` *interface* defines that method and guides both tooling and the compiler.
 Technically, it's optional; Angular looks for and executes the `transform` method regardless.
 
-
 </div>
 
-
-
 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>
@@ -250,14 +235,11 @@ Note the following:
 
 <div class="callout is-helpful">
 
-
-
 <header>
   Remember the declarations array
 </header>
 
 
-
 You must manually register custom pipes.
 If you don't, Angular reports an error.
 In the previous example, you didn't list the `DatePipe` because all
@@ -302,7 +284,7 @@ Angular strives to lower the cost whenever possible and appropriate.
 
 Angular picks a simpler, faster change detection algorithm when you use a pipe.
 
-### No pipe
+<h3 class="no-toc">No pipe</h3>
 
 In the next example, the component uses the default, aggressive change detection strategy to monitor and update
 its display of every hero in the `heroes` array. Here's the template:
@@ -326,7 +308,7 @@ You can add heroes and Angular updates the display when you do.
 If you click the `reset` button, Angular replaces `heroes` with a new array of the original heroes and updates the display.
 If you added the ability to remove or change a hero, Angular would detect those changes and update the display as well.
 
-### Flying-heroes pipe
+<h3 class="no-toc"><i>FlyingHeroesPipe</i></h3>
 
 Add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly.
 
@@ -410,7 +392,7 @@ impure like this:
 
 Before doing that, understand the difference between pure and impure, starting with a pure pipe.
 
-### Pure pipes
+<h3 class="no-toc">Pure pipes</h3>
 
 Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
 A pure change is either a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`)
@@ -441,7 +423,7 @@ a point that's discussed later in this page.
 
 
 
-### Impure pipes
+<h3 class="no-toc">Impure pipes</h3>
 
 Angular executes an *impure pipe*  during every component change detection cycle.
 An impure pipe is called often, as often as every keystroke or mouse-move.
@@ -453,7 +435,7 @@ An expensive, long-running pipe could destroy the user experience.
 {@a impure-flying-heroes}
 
 
-### An impure *FlyingHeroesPipe*
+<h3 class="no-toc">An impure <i>FlyingHeroesPipe</i></h3>
 
 A flip of the switch turns the `FlyingHeroesPipe` into a `FlyingHeroesImpurePipe`.
 The complete implementation is as follows:
@@ -498,10 +480,8 @@ You can confirm in the <live-example></live-example> that the _flying heroes_
 display updates as you add heroes, even when you mutate the `heroes` array.
 
 
-<h3 id='async-pipe'>
-  The impure   <i>AsyncPipe</i>
-</h3>
-
+{@a async-pipe}
+<h3 class="no-toc">The impure <i>AsyncPipe</i></h3>
 
 
 The Angular `AsyncPipe` is an interesting example of an impure pipe.
@@ -528,7 +508,7 @@ extract the resolved values and expose them for binding,
 and have to unsubscribe when it's destroyed
 (a potent source of memory leaks).
 
-### An impure caching pipe
+<h3 class="no-toc">An impure caching pipe</h3>
 
 Write one more impure pipe, a pipe that makes an HTTP request.
 
@@ -570,7 +550,7 @@ A breakpoint on the pipe's request for data shows the following:
 * Each pipe instance caches its own URL and data.
 * Each pipe instance only calls the server once.
 
-### *JsonPipe*
+<h3 class="no-toc"><i>JsonPipe</i></h3>
 
 In the previous code sample, the second `fetch` pipe binding demonstrates more pipe chaining.
 It displays the same hero data in JSON format by chaining through to the built-in `JsonPipe`.
@@ -598,7 +578,7 @@ inspect an object for future binding.
 {@a pure-pipe-pure-fn}
 
 
-### Pure pipes and pure functions
+<h3 class="no-toc">Pure pipes and pure functions</h3>
 
 A pure pipe uses pure functions.
 Pure functions process inputs and return values without detectable side effects.