docs(*): more cheatsheet docs

This commit is contained in:
Peter Bacon Darwin 2015-11-05 15:04:55 +00:00 committed by Naomi Black
parent 533b722c66
commit 756727b930
5 changed files with 123 additions and 0 deletions

View File

@ -0,0 +1,19 @@
@cheatsheetSection Class decorators
@description
`import {Directive, ...} from 'angular2/angular2';`
@cheatsheetItem
`@Component({...})
class MyComponent() {}`|`@Component({...})`
Declares that a class is a component and provides metadata about the component.
@cheatsheetItem
`@Pipe({...})
class MyPipe() {}`|`@Pipe({...})`
Declares that a class is a pipe and provides metadata about the pipe.
@cheatsheetItem
`@Injectable()
class MyService() {}`|`@Injectable()`
Declares that a class has dependencies that should be injected into the constructor when the dependency
injector is creating an instance of this class.

View File

@ -0,0 +1,27 @@
@cheatsheetSection Component configuration
@description
`@Component extends @Directive`, so the @Directive configuration applies to components as well)
@cheatsheetItem
`viewProviders: [MyService, provide(...)]`|`viewProviders:`
Array of dependency injection providers scoped to this component's view.
@cheatsheetItem
`template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'`|`template:`|`templateUrl:`
Inline template / external template url of the component's view.
@cheatsheetItem
`styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
List of inline css styles / external stylesheet urls for styling components view.
@cheatsheetItem
`directives: [MyDirective, MyComponent]`|`directives:`
List of directives used in the the components template.
@cheatsheetItem
`pipes: [MyPipe, OtherPipe]`|`pipes:`
List of pipes used in the component's template.

View File

@ -0,0 +1,55 @@
@cheatsheetSection Class field decorators for directives and components
@description
`import {Input, ...} from 'angular2/angular2';`
@cheatsheetItem
`@Input() myProperty;`|`@Input()`
Declares an input property that we can update via property binding, e.g.
`<my-cmp [my-property]="someExpression">`
@cheatsheetItem
`@Output() myEvent = new EventEmitter();`|`@Output()`
Declares an output property that fires events to which we can subscribe with an event binding, e.g. `<my-cmp (my-event)="doSomething()">`
@cheatsheetItem
`@HostBinding('[class.valid]') isValid;`|`@HostBinding(\'[class.valid]\')`
Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid)
@cheatsheetItem
`@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
Subscribes to a host element event (e.g. click) with a directive/component method (e.g., onClick), optionally passing an argument ($event)
@cheatsheetItem
`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
@cheatsheetItem
`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
@cheatsheetItem
`@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
@cheatsheetItem
`@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.

View File

@ -0,0 +1,14 @@
@cheatsheetSection @Directive configuration
@descripton
`@Directive({ property1: value1, ... }) )`
@cheatsheetItem
`selector: '.cool-button:not(a)'`|`selector:`
Specifies a css selector that identifies this directive within a template. Supported selectors include: `element`,
`[attribute]`, `.class`, and `:not()`.
Does not support parent-child relationship selectors.
@cheatsheetItem
`providers: [MyService, provide(...)]`|`providers:`
Array of dependency injection providers for this directive and its children.

View File

@ -0,0 +1,8 @@
@cheatsheetSection
@name Forms
@description
`import {FORM_DIRECTIVES} from 'angular2/angular2';`
@cheatsheetItem
`<input [(ng-model)]=\"userName\">`|`[(ng-model)]`
Provides two-way data-binding, parsing and validation for form controls.