docs(aio): remove hardcoded TOC

This commit is contained in:
Jesús Rodríguez 2017-05-04 18:46:43 +02:00 committed by Matias Niemelä
parent cd28df627c
commit 03610526e5
30 changed files with 85 additions and 14 deletions

View File

@ -19,6 +19,7 @@ by mapping AngularJS syntax to the equivalent Angular syntax.
**See the Angular syntax in this <live-example name="ajs-quick-reference"></live-example>**. **See the Angular syntax in this <live-example name="ajs-quick-reference"></live-example>**.
<!--
## Contents ## Contents
* [Template basics](guide/ajs-quick-reference#template-basics)&mdash;binding and local variables. * [Template basics](guide/ajs-quick-reference#template-basics)&mdash;binding and local variables.
@ -30,7 +31,7 @@ by mapping AngularJS syntax to the equivalent Angular syntax.
* [Modules/controllers/components](guide/ajs-quick-reference#controllers-components)&mdash;*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular. * [Modules/controllers/components](guide/ajs-quick-reference#controllers-components)&mdash;*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular.
* [Style sheets](guide/ajs-quick-reference#style-sheets)&mdash;more options for CSS than in AngularJS. * [Style sheets](guide/ajs-quick-reference#style-sheets)&mdash;more options for CSS than in AngularJS.
-->
## Template basics ## Template basics

View File

@ -10,7 +10,7 @@ This cookbook describes how to radically improve performance by compiling _ahead
during a build process. during a build process.
{@a toc} {@a toc}
<!--
# Contents # Contents
* [Overview](guide/aot-compiler#overview) * [Overview](guide/aot-compiler#overview)
@ -33,6 +33,8 @@ during a build process.
* [Running the application](guide/aot-compiler#running-app) * [Running the application](guide/aot-compiler#running-app)
* [Inspect the Bundle](guide/aot-compiler#inspect-bundle) * [Inspect the Bundle](guide/aot-compiler#inspect-bundle)
-->
{@a overview} {@a overview}
## Overview ## Overview

View File

@ -30,7 +30,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
<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" style="margin-left:-40px;" width="700"></img>
</figure> </figure>
<!--
The architecture diagram identifies the eight main building blocks of an Angular application: The architecture diagram identifies the eight main building blocks of an Angular application:
@ -44,7 +44,7 @@ The architecture diagram identifies the eight main building blocks of an Angular
* [Dependency injection](guide/architecture#dependency-injection) * [Dependency injection](guide/architecture#dependency-injection)
Learn these building blocks, and you're on your way. Learn these building blocks, and you're on your way.
-->
<div class="l-sub-section"> <div class="l-sub-section">

View File

@ -10,6 +10,7 @@ Attribute directives attach behavior to elements.
An **Attribute** directive changes the appearance or behavior of a DOM element. An **Attribute** directive changes the appearance or behavior of a DOM element.
<!--
# Contents # Contents
* [Directives overview](guide/attribute-directives#directive-overview) * [Directives overview](guide/attribute-directives#directive-overview)
@ -19,6 +20,8 @@ An **Attribute** directive changes the appearance or behavior of a DOM element.
* [Pass values into the directive with an _@Input_ data binding](guide/attribute-directives#bindings) * [Pass values into the directive with an _@Input_ data binding](guide/attribute-directives#bindings)
* [Bind to a second property](guide/attribute-directives#second-property) * [Bind to a second property](guide/attribute-directives#second-property)
-->
Try the <live-example title="Attribute Directive example"></live-example>. Try the <live-example title="Attribute Directive example"></live-example>.
{@a directive-overview} {@a directive-overview}

View File

@ -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 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 a foundation for both these documentation samples and for real world applications.
<!--
You'll pursue these ends in the following high-level steps: You'll pursue these ends in the following high-level steps:
1. [Set up](guide/cli-quickstart#devenv) the development environment. 1. [Set up](guide/cli-quickstart#devenv) the development environment.
@ -26,6 +28,8 @@ You'll pursue these ends in the following high-level steps:
3. [Serve](guide/cli-quickstart#serve) the application. 3. [Serve](guide/cli-quickstart#serve) the application.
4. [Edit](guide/cli-quickstart#first-component) the application. 4. [Edit](guide/cli-quickstart#first-component) the application.
-->
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a> And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>

View File

@ -11,6 +11,8 @@ This cookbook contains recipes for common component communication scenarios
in which two or more components share information. in which two or more components share information.
{@a toc} {@a toc}
<!--
# Contents # Contents
* [Pass data from parent to child with input binding](guide/component-communication#parent-to-child) * [Pass data from parent to child with input binding](guide/component-communication#parent-to-child)
@ -19,7 +21,7 @@ in which two or more components share information.
* [Parent calls an `@ViewChild()`](guide/component-communication#parent-to-view-child) * [Parent calls an `@ViewChild()`](guide/component-communication#parent-to-view-child)
* [Parent and children communicate via a service](guide/component-communication#bidirectional-service) * [Parent and children communicate via a service](guide/component-communication#bidirectional-service)
-->
**See the <live-example name="component-communication"></live-example>**. **See the <live-example name="component-communication"></live-example>**.

View File

@ -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. This page describes how to load and apply these component styles.
<!--
## Table Of Contents ## Table Of Contents
* [Using component styles](guide/component-styles#using-component-styles) * [Using component styles](guide/component-styles#using-component-styles)
@ -26,6 +28,8 @@ This page describes how to load and apply these component styles.
* [Appendix 1: Inspecting the CSS generated in emulated view encapsulation](guide/component-styles#inspect-generated-css) * [Appendix 1: Inspecting the CSS generated in emulated view encapsulation](guide/component-styles#inspect-generated-css)
* [Appendix 2: Loading styles with relative URLs](guide/component-styles#relative-urls) * [Appendix 2: Loading styles with relative URLs](guide/component-styles#relative-urls)
-->
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.

View File

@ -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. This cookbook explores many of the features of Dependency Injection (DI) in Angular.
{@a toc} {@a toc}
<!--
# Contents # Contents
* [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies) * [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies)
@ -52,6 +54,7 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
* [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref) * [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref)
-->
See the <live-example name="dependency-injection-in-action"></live-example> See the <live-example name="dependency-injection-in-action"></live-example>
of the code in this cookbook. of the code in this cookbook.

View File

@ -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, 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. and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
<!--
# Contents # Contents
* [Why dependency injection?](guide/dependency-injection#why-di) * [Why dependency injection?](guide/dependency-injection#why-di)
@ -51,6 +53,8 @@ and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
* [Summary](guide/dependency-injection#summary) * [Summary](guide/dependency-injection#summary)
* [Appendix: Working with injectors directly](guide/dependency-injection#explicit-injector) * [Appendix: Working with injectors directly](guide/dependency-injection#explicit-injector)
-->
Run the <live-example></live-example>. Run the <live-example></live-example>.
{@a why-di } {@a why-di }

View File

@ -12,6 +12,7 @@ This page describes tools and techniques for deploy and optimize your Angular ap
{@a toc} {@a toc}
<!--
## Table of contents ## Table of contents
@ -31,6 +32,7 @@ This page describes tools and techniques for deploy and optimize your Angular ap
* [Routed apps must fallback to `index.html`](guide/deployment#fallback) * [Routed apps must fallback to `index.html`](guide/deployment#fallback)
* [CORS: requesting services from a different server](guide/deployment#cors) * [CORS: requesting services from a different server](guide/deployment#cors)
-->
{@a overview} {@a overview}

View File

@ -21,7 +21,7 @@ The final UI looks like this:
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI"></img> <img src="generated/images/guide/displaying-data/final.png" alt="Final UI"></img>
</figure> </figure>
<!--
# Contents # Contents
@ -29,6 +29,7 @@ The final UI looks like this:
* [Showing an array property with NgFor](guide/displaying-data#ngFor). * [Showing an array property with NgFor](guide/displaying-data#ngFor).
* [Conditional display with NgIf](guide/displaying-data#ngIf). * [Conditional display with NgIf](guide/displaying-data#ngIf).
-->
<div class="l-sub-section"> <div class="l-sub-section">

View File

@ -13,6 +13,8 @@ This cookbook shows you how to use `ComponentFactoryResolver` to add components
{@a toc} {@a toc}
<!--
# Contents # Contents
* [Dynamic component loading](guide/dynamic-component-loader#dynamic-loading) * [Dynamic component loading](guide/dynamic-component-loader#dynamic-loading)
@ -25,6 +27,7 @@ This cookbook shows you how to use `ComponentFactoryResolver` to add components
* [A common _AdComponent_ interface](guide/dynamic-component-loader#common-interface) * [A common _AdComponent_ interface](guide/dynamic-component-loader#common-interface)
* [Final ad banner](guide/dynamic-component-loader#final-ad-banner) * [Final ad banner](guide/dynamic-component-loader#final-ad-banner)
-->
See the <live-example name="dynamic-component-loader"></live-example> See the <live-example name="dynamic-component-loader"></live-example>
of the code in this cookbook. of the code in this cookbook.

View File

@ -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*. You can create the forms on the fly *without changing the application code*.
{@a toc} {@a toc}
<!--
# Contents # Contents
* [Bootstrap](guide/dynamic-form#bootstrap) * [Bootstrap](guide/dynamic-form#bootstrap)
* [Question model](guide/dynamic-form#object-model) * [Question model](guide/dynamic-form#object-model)
@ -34,6 +36,7 @@ You can create the forms on the fly *without changing the application code*.
* [Questionnaire data](guide/dynamic-form#questionnaire-data) * [Questionnaire data](guide/dynamic-form#questionnaire-data)
* [Dynamic template](guide/dynamic-form#dynamic-template) * [Dynamic template](guide/dynamic-form#dynamic-template)
-->
See the <live-example name="dynamic-form"></live-example>. See the <live-example name="dynamic-form"></live-example>.

View File

@ -29,6 +29,7 @@ and the [Reactive Forms](guide/reactive-forms) guides.
{@a toc} {@a toc}
<!--
## Contents ## Contents
@ -54,6 +55,7 @@ and the [Reactive Forms](guide/reactive-forms) guides.
* [Testing considerations](guide/form-validation#testing) * [Testing considerations](guide/form-validation#testing)
-->
{@a live-example} {@a live-example}

View File

@ -28,6 +28,8 @@ Modern browsers support two HTTP-based APIs:
The Angular HTTP library simplifies application programming with the **XHR** and **JSONP** APIs. The Angular HTTP library simplifies application programming with the **XHR** and **JSONP** APIs.
<!--
# Contents # Contents
* [Demos](guide/http#demos) * [Demos](guide/http#demos)
@ -77,6 +79,8 @@ The Angular HTTP library simplifies application programming with the **XHR** and
* [Override default request headers (and other request options)](guide/http#override-default-request-options) * [Override default request headers (and other request options)](guide/http#override-default-request-options)
* [Appendix: Tour of Heroes _in-memory web api_](guide/http#in-mem-web-api) * [Appendix: Tour of Heroes _in-memory web api_](guide/http#in-mem-web-api)
-->
A <live-example>live example</live-example> illustrates these topics. A <live-example>live example</live-example> illustrates these topics.

View File

@ -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. Angular's _internationalization_ (_i18n_) tools help make your app available in multiple languages.
<!--
# Contents # Contents
* [Angular and i18n template translation](guide/i18n#angular-i18n) * [Angular and i18n template translation](guide/i18n#angular-i18n)
@ -40,6 +42,7 @@ Angular's _internationalization_ (_i18n_) tools help make your app available in
* [Internationalization with the AOT compiler](guide/i18n#aot) * [Internationalization with the AOT compiler](guide/i18n#aot)
* [Translation file maintenance and _id_ changes](guide/i18n#maintenance) * [Translation file maintenance and _id_ changes](guide/i18n#maintenance)
-->
Try this <live-example name="i18n" title="i18n Example in Spanish">live example</live-example> Try this <live-example name="i18n" title="i18n Example in Spanish">live example</live-example>
of a JIT-compiled app, translated into Spanish. of a JIT-compiled app, translated into Spanish.

View File

@ -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 directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
<br class="l-clear-both"> <br class="l-clear-both">
<!--
## Contents ## Contents
@ -54,6 +55,7 @@ A directive has the same set of lifecycle hooks, minus the hooks that are specif
Try the <live-example></live-example>. Try the <live-example></live-example>.
-->
{@a hooks-overview} {@a hooks-overview}

View File

@ -24,7 +24,7 @@ These FAQs assume that you have read the [NgModules](guide/ngmodule) page.
</div> </div>
<!--
Declarations Declarations
@ -78,7 +78,7 @@ General
<hr/> <hr/>
-->
{@a q-what-to-declare} {@a q-what-to-declare}

View File

@ -18,7 +18,7 @@ of creating and maintaining a single root `AppModule` for the entire application
This page covers NgModules in greater depth. This page covers NgModules in greater depth.
<!-- CF: See my comment in the "Resolve directive conflicts" section below proposing renaming or reorganizing that section. --> <!-- CF: See my comment in the "Resolve directive conflicts" section below proposing renaming or reorganizing that section.
* [Angular modularity](guide/ngmodule#angular-modularity "Add structure to the app with NgModule") * [Angular modularity](guide/ngmodule#angular-modularity "Add structure to the app with NgModule")
* [The application root module](guide/ngmodule#root-module "The startup module that every app requires") * [The application root module](guide/ngmodule#root-module "The startup module that every app requires")

View File

@ -13,6 +13,7 @@ This guide explains reactive forms as you follow the steps to build a "Hero Deta
{@a toc} {@a toc}
<!--
## Contents ## Contents
@ -34,6 +35,8 @@ This guide explains reactive forms as you follow the steps to build a "Hero Deta
* [Observe control changes](guide/reactive-forms#observe-control) * [Observe control changes](guide/reactive-forms#observe-control)
* [Save form data](guide/reactive-forms#save) * [Save form data](guide/reactive-forms#save)
-->
Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker">Reactive Forms live-example</live-example>. Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker">Reactive Forms live-example</live-example>.
You can also run the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> version You can also run the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> version

View File

@ -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 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. in the browser's history journal so the back and forward buttons work as well.
<!--
# Contents # Contents
@ -133,7 +134,7 @@ in the browser's history journal so the back and forward buttons work as well.
* [Appendix: *LocationStrategy* and browser URL styles](guide/router#location-strategy) * [Appendix: *LocationStrategy* and browser URL styles](guide/router#location-strategy)
-->
{@a basics} {@a basics}

View File

@ -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). For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
<!--
# Contents # Contents
@ -26,6 +26,7 @@ For more information about the attacks and mitigations described below, see [OWA
* [HTTP-Level vulnerabilities](guide/security#http). * [HTTP-Level vulnerabilities](guide/security#http).
* [Auditing Angular applications](guide/security#code-review). * [Auditing Angular applications](guide/security#code-review).
-->
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.

View File

@ -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?"). Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
<!--
Then ... Then ...
1. Create a project folder (you can call it `quickstart` and rename it later). 1. Create a project folder (you can call it `quickstart` and rename it later).
@ -26,6 +29,7 @@ Then ...
1. Install [npm](guide/setup#install-prerequisites "What if you don't have node and npm?") packages. 1. Install [npm](guide/setup#install-prerequisites "What if you don't have node and npm?") packages.
1. Run `npm start` to launch the sample application. 1. Run `npm start` to launch the sample application.
-->
{@a clone} {@a clone}

View File

@ -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 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. how you can write your own structural directives to do the same thing.
<!--
### Table of contents ### Table of contents
* [What are structural directives?](guide/structural-directives#definition) * [What are structural directives?](guide/structural-directives#definition)
@ -36,6 +38,7 @@ how you can write your own structural directives to do the same thing.
* [Group sibling elements with &lt;ng-container&gt;](guide/structural-directives#ng-container) * [Group sibling elements with &lt;ng-container&gt;](guide/structural-directives#ng-container)
* [Write a structural directive](guide/structural-directives#unless) * [Write a structural directive](guide/structural-directives#unless)
-->
Try the <live-example></live-example>. Try the <live-example></live-example>.

View File

@ -15,6 +15,7 @@ This style guide presents preferred conventions and, as importantly, explains wh
{@a toc} {@a toc}
<!--
# Contents # Contents
@ -29,7 +30,7 @@ This style guide presents preferred conventions and, as importantly, explains wh
* [Lifecycle hooks](guide/styleguide#lifecycle-hooks) * [Lifecycle hooks](guide/styleguide#lifecycle-hooks)
* [Appendix](guide/styleguide#appendix) * [Appendix](guide/styleguide#appendix)
-->
## Style vocabulary ## Style vocabulary

View File

@ -26,6 +26,8 @@ In Angular, the component plays the part of the controller/viewmodel, and the te
{@a toc} {@a toc}
<!--
### Contents ### Contents
@ -70,7 +72,7 @@ demonstrates all of the syntax and code snippets described in this guide.
<hr/> <hr/>
-->
{@a html} {@a html}

View File

@ -15,6 +15,8 @@ the focus is on testing applications written with Angular.
{@a top} {@a top}
<!--
# Contents # Contents
@ -128,6 +130,8 @@ the focus is on testing applications written with Angular.
Its a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use. Its a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
-->
## Live examples ## Live examples
This guide presents tests of a sample application that is much like the [_Tour of Heroes_ tutorial](tutorial). This guide presents tests of a sample application that is much like the [_Tour of Heroes_ tutorial](tutorial).

View File

@ -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 a period of time. The `upgrade` module in Angular has been designed to
make incremental upgrading seamless. make incremental upgrading seamless.
<!--
1. [Preparation](guide/upgrade#preparation) 1. [Preparation](guide/upgrade#preparation)
1. [Follow the Angular Style Guide](guide/upgrade#follow-the-angular-styleguide) 1. [Follow the Angular Style Guide](guide/upgrade#follow-the-angular-styleguide)
@ -65,7 +67,7 @@ make incremental upgrading seamless.
3. [Appendix: Upgrading PhoneCat Tests](guide/upgrade#appendix-upgrading-phonecat-tests) 3. [Appendix: Upgrading PhoneCat Tests](guide/upgrade#appendix-upgrading-phonecat-tests)
-->
## Preparation ## Preparation

View File

@ -30,6 +30,8 @@ the QuickStart application itself.
To set up the QuickStart files with an **ASP.NET 4.x project** in To set up the QuickStart files with an **ASP.NET 4.x project** in
Visual Studio 2015, follow these steps: Visual Studio 2015, follow these steps:
<!--
* [Prerequisite](guide/visual-studio-2015#prereq1): Install Node.js. * [Prerequisite](guide/visual-studio-2015#prereq1): Install Node.js.
* [Prerequisite](guide/visual-studio-2015#prereq2): Install Visual Studio 2015 Update 3. * [Prerequisite](guide/visual-studio-2015#prereq2): Install Visual Studio 2015 Update 3.
@ -41,6 +43,7 @@ Visual Studio 2015, follow these steps:
* [Step 4](guide/visual-studio-2015#restore): Restore required packages. * [Step 4](guide/visual-studio-2015#restore): Restore required packages.
* [Step 5](guide/visual-studio-2015#build-and-run): Build and run the app. * [Step 5](guide/visual-studio-2015#build-and-run): Build and run the app.
-->
<div class="l-sub-section"> <div class="l-sub-section">

View File

@ -25,6 +25,8 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
{@a top} {@a top}
<!--
# Contents # Contents
@ -57,6 +59,8 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
* [Highlights](guide/webpack#highlights) * [Highlights](guide/webpack#highlights)
* [Conclusion](guide/webpack#conclusion) * [Conclusion](guide/webpack#conclusion)
-->
You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a> You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
{@a what-is-webpack} {@a what-is-webpack}