feat(aio): add Table of Contents (toc) component. (#16078)
This commit is contained in:
Ward Bell
@ -1,17 +1,12 @@
|
||||
@title
|
||||
Animations
|
||||
|
||||
@intro
|
||||
A guide to Angular's animation system.
|
||||
|
||||
@description
|
||||
|
||||
# Animations
|
||||
|
||||
Motion is an important aspect in the design of modern web applications. Good
|
||||
user interfaces transition smoothly between states with engaging animations
|
||||
that call attention where it's needed. Well-designed animations can make a UI not only
|
||||
more fun but also easier to use.
|
||||
|
||||
## Overview
|
||||
|
||||
Angular's animation system lets you build animations that run with the same kind of native
|
||||
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.
|
||||
@ -33,7 +28,7 @@ add it to your page.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
# Contents
|
||||
|
||||
* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states).
|
||||
@ -46,7 +41,7 @@ add it to your page.
|
||||
* [Multi-step animations with keyframes](guide/animations#multi-step-animations-with-keyframes).
|
||||
* [Parallel animation groups](guide/animations#parallel-animation-groups).
|
||||
* [Animation callbacks](guide/animations#animation-callbacks).
|
||||
|
||||
-->
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
@title
|
||||
NgModules
|
||||
|
||||
@intro
|
||||
Define application modules with @NgModule.
|
||||
|
||||
@description
|
||||
|
||||
<h1 class="no-toc">NgModules</h1>
|
||||
|
||||
|
||||
**NgModules** help organize an application into cohesive blocks of functionality.
|
||||
@ -25,32 +18,23 @@ of creating and maintaining a single root `AppModule` for the entire application
|
||||
|
||||
This page covers NgModules in greater depth.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
<!-- CF: The titling for tables of contents in the advanced chapters is inconsistent:
|
||||
|
||||
* some are titled "Contents" while others are titled "Table of Contents" (should probably be sentence case as it's an H2
|
||||
* some headings are H2, some are H3
|
||||
* some pages don't have tables of contents
|
||||
|
||||
I didn't make changes here as I'm not sure what the correct style is.
|
||||
-->
|
||||
<!-- 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")
|
||||
* [The application root module](guide/ngmodule#root-module "The startup module that every app requires")
|
||||
* [Bootstrap](guide/ngmodule#bootstrap "Launch the app in a browser with the root module as the entry point") the root module
|
||||
* [Bootstrap the root module](guide/ngmodule#bootstrap "Launch the app in a browser with the root module as the entry point")
|
||||
* [Declarations](guide/ngmodule#declarations "Declare the components, directives, and pipes that belong to a module")
|
||||
* [Providers](guide/ngmodule#providers "Extend the app with additional services")
|
||||
* [Imports](guide/ngmodule#imports "Import components, directives, and pipes for use in component templates")
|
||||
* [Resolve conflicts](guide/ngmodule#resolve-conflicts "When two directives have the same selector")
|
||||
<!-- CF: See my comment in the "Resolve diretive conflicts" section below proposing renaming or reorganizing that section. -->
|
||||
* [Feature modules](guide/ngmodule#feature-modules "Partition the app into feature modules")
|
||||
* [Lazy loaded modules](guide/ngmodule#lazy-load "Load modules asynchronously") with the router
|
||||
* [Lazy loaded modules with the router](guide/ngmodule#lazy-load "Load modules asynchronously")
|
||||
* [Shared modules](guide/ngmodule#shared-module "Create modules for commonly used components, directives, and pipes")
|
||||
* [The Core module](guide/ngmodule#core-module "Create a core module with app-wide singleton services and single-use components")
|
||||
* [Configure core services with _forRoot_](guide/ngmodule#core-for-root "Configure providers during module import")
|
||||
* [Prevent reimport of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
|
||||
* [Prevent re-import of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
|
||||
* [NgModule metadata properties](guide/ngmodule#ngmodule-properties "A technical summary of the @NgModule metadata properties")
|
||||
|
||||
<!-- 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. -->
|
||||
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
@title
|
||||
QuickStart
|
||||
|
||||
@description
|
||||
|
||||
|
||||
<h1 class="no-toc">QuickStart</h1>
|
||||
|
||||
Angular applications are made up of _components_.
|
||||
A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
|
||||
A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
|
||||
|
||||
|
||||
<code-example path="quickstart/src/app/app.component.ts" title="src/app/app.component.ts" linenums="false">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<h1 class="title center">Angular Contributors</h1>
|
||||
<h1 class="title center no-toc">Angular Contributors</h1>
|
||||
<h2>Building For the Future</h2>
|
||||
<p>Angular is built by a team of engineers who share a passion for
|
||||
making web development feel effortless. We believe that writing
|
||||
beautiful apps should be joyful and fun. We're building a
|
||||
platform for the future.</p>
|
||||
|
||||
<aio-contributor-list></aio-contributor-list>
|
||||
<aio-contributor-list></aio-contributor-list>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<h1>API List</h1>
|
||||
<h1 class="no-toc">API List</h1>
|
||||
<aio-api-list></aio-api-list>
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
@title
|
||||
Contribute
|
||||
# Contribute to Angular
|
||||
|
||||
@intro
|
||||
Contribute to Angular
|
||||
|
||||
@description
|
||||
Help us build the framework of the future!
|
||||
|
||||
## Angular Projects
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<h1>Events</h1>
|
||||
<h1 class="no-toc">Events</h1>
|
||||
|
||||
<h3>Where we'll be presenting:</h3>
|
||||
<article class="l-content ">
|
||||
<table class="is-full-width">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<h1>Features & Benefits</h1>
|
||||
<h1 class="no-toc">Features & Benefit</h1>
|
||||
|
||||
<article class="l-content ">
|
||||
<div class="flex-center">
|
||||
<div><h2 class="text-headline">Cross Platform</h2>
|
||||
@ -20,7 +21,7 @@
|
||||
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="text-headline">Speed and Performance</h2>
|
||||
<div class="feature-row">
|
||||
|
||||
@ -43,7 +44,7 @@
|
||||
|
||||
<h2 class="text-headline">Productivity</h2>
|
||||
<div class="feature-row">
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h5>Templates</h5>
|
||||
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
|
||||
@ -53,7 +54,7 @@
|
||||
<h5>Angular CLI</h5>
|
||||
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h5>IDEs</h5>
|
||||
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
|
||||
@ -81,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
|
||||
|
||||
</article>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="hero background-superhero-paper is-large">
|
||||
|
||||
<img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
|
||||
<h1 class="text-headline">One framework.<br>Mobile & desktop.</h1>
|
||||
<h1 class="text-headline no-toc">One framework.<br>Mobile & desktop.</h1>
|
||||
<a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
|
||||
|
||||
<announcement-bar class="announcement-bar">
|
||||
@ -13,7 +13,7 @@
|
||||
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
|
||||
</div>
|
||||
</announcement-bar>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<img src="assets/images/home/responsive-framework.svg" alt="responsive framework">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-container">
|
||||
<div class="text-block promo-1-desc l-pad-top-2">
|
||||
<h2 class="text-headline">Develop Across All Platforms</h2>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<header class="hero background-sky"><h1 class="hero-title ">News</h1>
|
||||
<header class="hero background-sky">
|
||||
<h1 class="hero-title no-toc">News</h1>
|
||||
<div class="clear"></div>
|
||||
</header>
|
||||
<article class="l-content ">
|
||||
|
||||
Reference in New Issue
Block a user