docs(*): move cheatsheet stuff into its own files
This commit is contained in:
parent
029c0534f3
commit
533b722c66
|
@ -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.
|
|
@ -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.
|
|
@ -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]);
|
||||||
|
|
|
@ -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> {
|
||||||
|
|
Loading…
Reference in New Issue