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

This commit is contained in:
Peter Bacon Darwin 2015-11-05 12:33:56 +00:00 committed by Naomi Black
parent 029c0534f3
commit 533b722c66
4 changed files with 80 additions and 78 deletions

View File

@ -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.

View File

@ -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.

View File

@ -44,29 +44,6 @@ import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './ng_switch';
* ... * ...
* } * }
* ``` * ```
* @cheatsheetSection
* Built-in directives
* `import {NgIf, ...} from 'angular2/angular2';`
* @cheatsheetItem
* <section *ng-if="showSection">
* Removes or recreates a portion of the DOM tree based on the showSection expression.
* *ng-if
* @cheatsheetItem
* <li *ng-for="#item of list">
* Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
* '*ng-for'
* @cheatsheetItem
* <div [ng-switch]="conditionExpression">\n <template [ng-switch-when]="case1Exp">...</template>\n <template ng-switch-when="case2LiteralString">...</template>\n <template ng-switch-default>...</template>\n</div>
* Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
* [ng-switch]
* [ng-switch-when]
* ng-switch-when
* ng-switch-default
* @cheatsheetItem
* <div [ng-class]="{active: isActive, disabled: isDisabled}">
* 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.
* [ng-class]
*/ */
export const CORE_DIRECTIVES: Type[] = export const CORE_DIRECTIVES: Type[] =
CONST_EXPR([NgClass, NgFor, NgIf, NgStyle, NgSwitch, NgSwitchWhen, NgSwitchDefault]); CONST_EXPR([NgClass, NgFor, NgIf, NgStyle, NgSwitch, NgSwitchWhen, NgSwitchDefault]);

View File

@ -18,61 +18,6 @@ export {
} from './application_ref'; } from './application_ref';
/// See [commonBootstrap] for detailed documentation. /// See [commonBootstrap] for detailed documentation.
/**
* @cheatsheetSection
* Bootstrapping
* `import {bootstrap} from 'angular2/angular2';`
* @cheatsheetItem
* <input [value]="firstName">
* Binds property value to the result of expression firstName.
* [value]
* @cheatsheetItem
* <div [attr.role]="myAriaRole">
* Binds attribute role to the result of expression myAriaRole.
* [attr.role]
* @cheatsheetItem
* <div [class.extra-sparkle]="isDelightful">
* Binds the presence of the css class extra-sparkle on the element to the truthiness of the expression isDelightful.
* [class.extra-sparkle]
* @cheatsheetItem
* <div [style.width.px]="mySize">
* Binds style property width to the result of expression mySize in pixels. Units are optional.
* [style.width.px]
* @cheatsheetItem
* <button (click)="readRainbow($event)">
* Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
* (click)
* @cheatsheetItem
* <div title="Hello {{ponyName}}">
* Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to: <div [title]="'Hello' + ponyName">
* {{ponyName}}
* @cheatsheetItem
* <p>Hello {{ponyName}}</p>
* Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
* {{ponyName}}
* @cheatsheetItem
* <my-cmp [(title)]="name">
* Sets up two-way data binding. Equivalent to:\n<my-cmp [title]="name" (title-change)="name=$event">
* [(title)]
* @cheatsheetItem
* <video #movieplayer ...>\n<button (click)="movieplayer.play()" >
* Creates a local variable movieplayer that provides access to the video element instance in data- and event-binding expressions in the current template.
* #movieplayer
* (click)
* @cheatsheetItem
* <p *my-unless="myExpression">...</p>
* The * symbol means that the current element will be turned into an embedded template. Equivalent to:\n<template [my-unless]="myExpression"><p>...</p></template>
* *my-unless
* @cheatsheetItem
* <p>Card No.: {{cardNumber myCreditCardNumberFormatter}}</p>
* Transforms the current value of expression cardNumber via pipe called creditCardNumberFormatter.
* {{cardNumber myCreditCardNumberFormatter}}
* @cheatsheetItem
* <p>Employer: {{employer?.companyName}}</p>
* The Elvis operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
* {{employer?.companyName}}
*
*/
export function bootstrap( export function bootstrap(
appComponentType: /*Type*/ any, appComponentType: /*Type*/ any,
appProviders: Array<Type | Provider | any[]> = null): Promise<ComponentRef> { appProviders: Array<Type | Provider | any[]> = null): Promise<ComponentRef> {