docs(cheatsheet): add missing bootstrapping section

Closes #5269

Closes #5269

modules/angular2/docs/cheatsheet/bootstrapping.md

@@ -5,53 +5,5 @@ Bootstrapping
 `import {bootstrap} from 'angular2/angular2';`
 
 @cheatsheetItem
-`<input [value]="firstName">`|`[value]`
+`bootstrap​(MyAppComponent, [MyService, provide(...)]);`
-Binds property `value` to the result of expression `firstName`.
+Bootstraps an application with MyAppComponent as the root component and configures the DI providers.
-
-@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.

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';`
 

modules/angular2/docs/cheatsheet/class-decorators.md

@@ -1,6 +1,6 @@
 @cheatsheetSection
 Class decorators
-@cheatsheetIndex 3
+@cheatsheetIndex 4
 @description
 `import {Directive, ...} from 'angular2/angular2';`
 

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

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';`
 

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';`
 

modules/angular2/docs/cheatsheet/directive-configuration.md

@@ -1,6 +1,6 @@
 @cheatsheetSection
 Directive configuration
-@cheatsheetIndex 4
+@cheatsheetIndex 5
 @description
 `@Directive({ property1: value1, ... }) )`
 

modules/angular2/docs/cheatsheet/forms.md

@@ -1,6 +1,6 @@
 @cheatsheetSection
 Forms
-@cheatsheetIndex 2
+@cheatsheetIndex 3
 @description
 `import {FORM_DIRECTIVES} from 'angular2/angular2';`
 

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)
 

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';`
 

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.