docs(*): move cheatsheet stuff into its own files

modules/angular2/docs/cheatsheet/bootstrapping.md

@@ -0,0 +1,56 @@
+@cheatsheetSection
+@name Bootstrapping
+@description
+`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.

modules/angular2/docs/cheatsheet/built-in-directives.md

@@ -0,0 +1,24 @@
+@cheatsheetSection
+@name Built-in directives
+@description
+`import {NgIf, ...} from 'angular2/angular2';`
+
+@cheatsheetItem
+`<section *ng-if="showSection">`|`*ng-if`
+Removes or recreates a portion of the DOM tree based on the showSection expression.
+
+@cheatsheetItem
+`<li *ng-for="#item of list">`|`*ng-for`
+Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
+
+@cheatsheetItem
+`<div [ng-switch]="conditionExpression">
+  <template [ng-switch-when]="case1Exp">...</template>
+  <template ng-switch-when="case2LiteralString">...</template>
+  <template ng-switch-default>...</template>
+</div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`
+Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
+
+@cheatsheetItem
+`<div [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]`
+Binds the presence of css classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.