From c03fb36e11a2720368066197d83933fd02707cc4 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 13 Nov 2015 07:14:12 +0000
Subject: [PATCH] docs(cheatsheet): add missing bootstrapping section

Closes #5269

Closes #5269
---
 .../angular2/docs/cheatsheet/bootstrapping.md | 52 +----------------
 .../docs/cheatsheet/built-in-directives.md    |  2 +-
 .../docs/cheatsheet/class-decorators.md       |  2 +-
 .../cheatsheet/component-configuration.md     |  2 +-
 .../docs/cheatsheet/dependency-injection.md   |  2 +-
 .../directive-and-component-decorators.md     |  2 +-
 .../cheatsheet/directive-configuration.md     |  2 +-
 modules/angular2/docs/cheatsheet/forms.md     |  2 +-
 .../docs/cheatsheet/lifecycle hooks.md        |  2 +-
 modules/angular2/docs/cheatsheet/routing.md   |  2 +-
 .../docs/cheatsheet/template-syntax.md        | 56 +++++++++++++++++++
 11 files changed, 67 insertions(+), 59 deletions(-)
 create mode 100644 modules/angular2/docs/cheatsheet/template-syntax.md

diff --git a/modules/angular2/docs/cheatsheet/bootstrapping.md b/modules/angular2/docs/cheatsheet/bootstrapping.md
index cbf61c78e4..1dbf6e059b 100644
--- a/modules/angular2/docs/cheatsheet/bootstrapping.md
+++ b/modules/angular2/docs/cheatsheet/bootstrapping.md
@@ -5,53 +5,5 @@ Bootstrapping
 `import {bootstrap} from 'angular2/angular2';`
 
 @cheatsheetItem
-`<input [value]="firstName">`|`[value]`
-Binds property `value` to the result of expression `firstName`.
-
-@cheatsheetItem
-`<div [attr.role]="myAriaRole">`|`[attr.role]`
-Binds attribute `role` to the result of expression `myAriaRole`.
-
-@cheatsheetItem
-`<div [class.extra-sparkle]="isDelightful">`|`[class.extra-sparkle]`
-Binds the presence of the css class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`.
-
-@cheatsheetItem
-`<div [style.width.px]="mySize">`|`[style.width.px]`
-Binds style property `width` to the result of expression `mySize` in pixels. Units are optional.
-
-@cheatsheetItem
-`<button (click)="readRainbow($event)">`|`(click)`
-Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object.
-
-@cheatsheetItem
-`<div title="Hello {{ponyName}}">`|`{{ponyName}}`
-Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:
-`<div [title]="'Hello' + ponyName">`
-
-@cheatsheetItem
-`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
-Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
-
-@cheatsheetItem
-`<my-cmp [(title)]="name">`|`[(title)]`
-Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="name=$event">`
-
-@cheatsheetItem
-`<video #movieplayer ...>
-  <button (click)="movieplayer.play()">
-</video>`|`#movieplayer`|`(click)`
-Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template.
-
-@cheatsheetItem
-`<p *my-unless="myExpression">...</p>`|`*my-unless`
-The `*` symbol means that the current element will be turned into an embedded template. Equivalent to:
-`<template [myless]="myExpression"><p>...</p></template>`
-
-@cheatsheetItem
-`<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>`|`{{cardNumber | myCreditCardNumberFormatter}}`
-Transforms the current value of expression `cardNumber` via the pipe called `creditCardNumberFormatter`.
-
-@cheatsheetItem
-`<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
-The Elvis operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.
+`bootstrap​(MyAppComponent, [MyService, provide(...)]);`
+Bootstraps an application with MyAppComponent as the root component and configures the DI providers.
diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/modules/angular2/docs/cheatsheet/built-in-directives.md
index 4ceba19649..6632fa81cc 100644
--- a/modules/angular2/docs/cheatsheet/built-in-directives.md
+++ b/modules/angular2/docs/cheatsheet/built-in-directives.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Built-in directives
-@cheatsheetIndex 1
+@cheatsheetIndex 2
 @description
 `import {NgIf, ...} from 'angular2/angular2';`
 
diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md
index c2cce602af..ae327b918c 100644
--- a/modules/angular2/docs/cheatsheet/class-decorators.md
+++ b/modules/angular2/docs/cheatsheet/class-decorators.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Class decorators
-@cheatsheetIndex 3
+@cheatsheetIndex 4
 @description
 `import {Directive, ...} from 'angular2/angular2';`
 
diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md
index b687ec555c..6b75ed669b 100644
--- a/modules/angular2/docs/cheatsheet/component-configuration.md
+++ b/modules/angular2/docs/cheatsheet/component-configuration.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Component configuration
-@cheatsheetIndex 5
+@cheatsheetIndex 6
 @description
 `@Component` extends `@Directive`,
 so the `@Directive` configuration applies to components as well
diff --git a/modules/angular2/docs/cheatsheet/dependency-injection.md b/modules/angular2/docs/cheatsheet/dependency-injection.md
index 10aaf0908e..477618c15e 100644
--- a/modules/angular2/docs/cheatsheet/dependency-injection.md
+++ b/modules/angular2/docs/cheatsheet/dependency-injection.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Dependency injection configuration
-@cheatsheetIndex 7
+@cheatsheetIndex 9
 @description
 `import {provide} from 'angular2/angular2';`
 
diff --git a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md
index d1ebda6edc..6425eb1de0 100644
--- a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md
+++ b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Class field decorators for directives and components
-@cheatsheetIndex 6
+@cheatsheetIndex 7
 @description
 `import {Input, ...} from 'angular2/angular2';`
 
diff --git a/modules/angular2/docs/cheatsheet/directive-configuration.md b/modules/angular2/docs/cheatsheet/directive-configuration.md
index 535bef37b6..50747c45ea 100644
--- a/modules/angular2/docs/cheatsheet/directive-configuration.md
+++ b/modules/angular2/docs/cheatsheet/directive-configuration.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Directive configuration
-@cheatsheetIndex 4
+@cheatsheetIndex 5
 @description
 `@Directive({ property1: value1, ... }) )`
 
diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md
index d42cb417c2..730d65b277 100644
--- a/modules/angular2/docs/cheatsheet/forms.md
+++ b/modules/angular2/docs/cheatsheet/forms.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Forms
-@cheatsheetIndex 2
+@cheatsheetIndex 3
 @description
 `import {FORM_DIRECTIVES} from 'angular2/angular2';`
 
diff --git a/modules/angular2/docs/cheatsheet/lifecycle hooks.md b/modules/angular2/docs/cheatsheet/lifecycle hooks.md
index e28026ea59..e592dbebc1 100644
--- a/modules/angular2/docs/cheatsheet/lifecycle hooks.md	
+++ b/modules/angular2/docs/cheatsheet/lifecycle hooks.md	
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Directive and component change detection and lifecycle hooks
-@cheatsheetIndex 6
+@cheatsheetIndex 8
 @description
 (implemented as class methods)
 
diff --git a/modules/angular2/docs/cheatsheet/routing.md b/modules/angular2/docs/cheatsheet/routing.md
index b2d5ef71f7..823c0eb4fe 100644
--- a/modules/angular2/docs/cheatsheet/routing.md
+++ b/modules/angular2/docs/cheatsheet/routing.md
@@ -1,6 +1,6 @@
 @cheatsheetSection
 Routing and navigation
-@cheatsheetIndex 8
+@cheatsheetIndex 10
 @description
 `import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`
 
diff --git a/modules/angular2/docs/cheatsheet/template-syntax.md b/modules/angular2/docs/cheatsheet/template-syntax.md
new file mode 100644
index 0000000000..2690806496
--- /dev/null
+++ b/modules/angular2/docs/cheatsheet/template-syntax.md
@@ -0,0 +1,56 @@
+@cheatsheetSection
+Template syntax
+@cheatsheetIndex 1
+@description
+
+@cheatsheetItem
+`<input [value]="firstName">`|`[value]`
+Binds property `value` to the result of expression `firstName`.
+
+@cheatsheetItem
+`<div [attr.role]="myAriaRole">`|`[attr.role]`
+Binds attribute `role` to the result of expression `myAriaRole`.
+
+@cheatsheetItem
+`<div [class.extra-sparkle]="isDelightful">`|`[class.extra-sparkle]`
+Binds the presence of the css class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`.
+
+@cheatsheetItem
+`<div [style.width.px]="mySize">`|`[style.width.px]`
+Binds style property `width` to the result of expression `mySize` in pixels. Units are optional.
+
+@cheatsheetItem
+`<button (click)="readRainbow($event)">`|`(click)`
+Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object.
+
+@cheatsheetItem
+`<div title="Hello {{ponyName}}">`|`{{ponyName}}`
+Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:
+`<div [title]="'Hello' + ponyName">`
+
+@cheatsheetItem
+`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
+Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
+
+@cheatsheetItem
+`<my-cmp [(title)]="name">`|`[(title)]`
+Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (title-change)="name=$event">`
+
+@cheatsheetItem
+`<video #movieplayer ...>
+  <button (click)="movieplayer.play()">
+</video>`|`#movieplayer`|`(click)`
+Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template.
+
+@cheatsheetItem
+`<p *my-unless="myExpression">...</p>`|`*my-unless`
+The `*` symbol means that the current element will be turned into an embedded template. Equivalent to:
+`<template [myless]="myExpression"><p>...</p></template>`
+
+@cheatsheetItem
+`<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>`|`{{cardNumber | myCreditCardNumberFormatter}}`
+Transforms the current value of expression `cardNumber` via the pipe called `creditCardNumberFormatter`.
+
+@cheatsheetItem
+`<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
+The Elvis operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.