docs(cheatsheet) adding JS specific syntax to cheatsheet

gnomeontherun · IgorMinar · commit 283526591685 · 2015-12-14T23:19:12.000-08:00
Closes angular#5861
diff --git a/modules/angular2/docs/cheatsheet/bootstrapping.md b/modules/angular2/docs/cheatsheet/bootstrapping.md
@@ -2,12 +2,17 @@
 Bootstrapping
 @cheatsheetIndex 0
 @description
-{@target js ts}`import {bootstrap} from 'angular2/platform/browser';`{@endtarget}
+{@target ts}`import {bootstrap} from 'angular2/angular2';`{@endtarget}
+{@target js}Available from the `ng.platform.browser` namespace.{@endtarget}
 {@target dart}`import 'package:angular2/bootstrap.dart';`{@endtarget}
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `bootstrap​(MyAppComponent, [MyService, provide(...)]);`|`provide`
+syntax(js):
+`document.addEventListener('DOMContentLoaded', function () {
+  ng.platform.browser.bootstrap(MyAppComponent,
+    [MyService, ng.core.provide(...)]);
+});`|`provide`
 description:
-Bootstraps an application with MyAppComponent as the root component, and
-configures the app's dependency injection providers.
+Bootstraps an application with MyAppComponent as the root component and configures the DI providers. {@target js}Must be wrapped in the event listener to fire when the page loads.{@endtarget}
diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/modules/angular2/docs/cheatsheet/built-in-directives.md
@@ -2,7 +2,8 @@
 Built-in directives
 @cheatsheetIndex 2
 @description
-{@target js ts}`import {NgIf, ...} from 'angular2/common';`{@endtarget}
+{@target ts}`import {NgIf, ...} from 'angular2/common';`{@endtarget}
+{@target js}Available from the `ng.common` namespace{@endtarget}
 {@target dart}`import 'package:angular2/common.dart';`{@endtarget}
 
 @cheatsheetItem
diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md
@@ -2,36 +2,48 @@
 Class decorators
 @cheatsheetIndex 4
 @description
-{@target js ts}`import {Directive, ...} from 'angular2/core';`{@endtarget}
+{@target ts}`import {Directive, ...} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
 {@target dart}`import 'package:angular2/core.dart';`{@endtarget}
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `@Component({...})
 class MyComponent() {}`|`@Component({...})`
+syntax(js):
+`var MyComponent = ng.core.Component({...}).Class({...})`|`ng.core.Component({...})`
 syntax(dart):
 `@Component(...)
 class MyComponent() {}`|`@Component(...)`
 description:
 Declares that a class is a component and provides metadata about the component.
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `@Pipe({...})
 class MyPipe() {}`|`@Pipe({...})`
+syntax(js):
+`var MyPipe = ng.core.Pipe({...}).Class({...})`|`ng.core.Pipe({...})`
 syntax(dart):
 `@Pipe(...)
 class MyPipe() {}`|`@Pipe(...)`
 description:
 Declares that a class is a pipe and provides metadata about the pipe.
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `@Injectable()
 class MyService() {}`|`@Injectable()`
+syntax(js):
+`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});
+var OtherService = ng.core.Class({constructor: function() { }});`
+var MyService = ng.core.Injectable({...})`|`ng.core.Injectable({...})`
 syntax(dart):
 `@Injectable()
 class MyService() {}`|`@Injectable()`
 description:
-Declares that a class has dependencies that should be injected into the constructor when the dependency
-injector is creating an instance of this class.
+{@target ts dart}Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+{@endtarget}
+{@target js}
+Declares a service to inject into a class by providing an array with the services with the final item being the function which will receive the injected services.
+{@endtarget}
diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md
@@ -2,12 +2,16 @@
 Component configuration
 @cheatsheetIndex 6
 @description
-`@Component` extends `@Directive`,
-so the `@Directive` configuration applies to components as well
+{@target js}`ng.core.Component` extends `ng.core.Directive`,
+so the `ng.core.Directive` configuration applies to components as well{@endtarget}
+{@target ts dart}`@Component` extends `@Directive`,
+so the `@Directive` configuration applies to components as well{@endtarget}
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `viewProviders: [MyService, provide(...)]`|`viewProviders:`
+syntax(js):
+`viewProviders: [MyService, ng.core.provide(...)]`|`viewProviders:`
 description:
 Array of dependency injection providers scoped to this component's view.
 
diff --git a/modules/angular2/docs/cheatsheet/dependency-injection.md b/modules/angular2/docs/cheatsheet/dependency-injection.md
@@ -2,26 +2,32 @@
 Dependency injection configuration
 @cheatsheetIndex 9
 @description
-{@target js ts}`import {provide} from 'angular2/core';`{@endtarget}
+{@target ts}`import {provide} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
 {@target dart}`import 'package:angular2/core.dart';`{@endtarget}
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `provide(MyService, {useClass: MyMockService})`|`provide`|`useClass`
+syntax(js):
+`ng.core.provide(MyService, {useClass: MyMockService})`|`provide`|`useClass`
 description:
 Sets or overrides the provider for MyService to the MyMockService class.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory`
+syntax(js):
+`ng.core.provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory`
 description:
 Sets or overrides the provider for MyService to the myFactory factory function.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
+`provide(MyValue, {useValue: 41})`|`provide`|`useValue`
+syntax(js):
 `provide(MyValue, {useValue: 41})`|`provide`|`useValue`
 description:
 Sets or overrides the provider for MyValue to the value 41.
-
diff --git a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md
@@ -2,62 +2,79 @@
 Class field decorators for directives and components
 @cheatsheetIndex 7
 @description
-{@target js ts}`import {Input, ...} from 'angular2/core';`{@endtarget}
+{@target ts}`import {Input, ...} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
 {@target dart}`import 'package:angular2/core.dart';`{@endtarget}
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@Input() myProperty;`|`@Input()`
+syntax(js):
+`ng.core.Input(myProperty, myComponent);`|`ng.core.Input(`|`);`
 description:
 Declares an input property that we can update via property binding (e.g.
 `<my-cmp [my-property]="someExpression">`).
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@Output() myEvent = new EventEmitter();`|`@Output()`
+syntax(js):
+`myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);`|`ng.core.Output(`|`);`
 description:
 Declares an output property that fires events to which we can subscribe with an event binding (e.g. `<my-cmp (my-event)="doSomething()">`).
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`
+syntax(js):
+`ng.core.HostBinding('[class.valid]', 'isValid', myComponent);`|`ng.core.HostBinding('[class.valid]', 'isValid'`|`);`
 description:
 Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
 
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
+syntax(js):
+`ng.core.HostListener('click', ['$event'], onClick(e) {...}, myComponent);`|`ng.core.HostListener('click', ['$event'], onClick(e)`|`);`
 description:
 Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
+syntax(js):
+`ng.core.ContentChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.ContentChild(myPredicate,`|`);`
 description:
 Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
+syntax(js):
+`ng.core.ContentChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ContentChildren(myPredicate,`|`);`
 description:
 Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
+syntax(js):
+`ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.ViewChild(myPredicate,`|`);`
 description:
 Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
+syntax(js):
+`ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ViewChildren(myPredicate,`|`);`
 description:
 Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.
diff --git a/modules/angular2/docs/cheatsheet/directive-configuration.md b/modules/angular2/docs/cheatsheet/directive-configuration.md
@@ -2,7 +2,8 @@
 Directive configuration
 @cheatsheetIndex 5
 @description
-{@target js ts}`@Directive({ property1: value1, ... })`{@endtarget}
+{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
+{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget}
 {@target dart}`@Directive(property1: value1, ...)`{@endtarget}
 
 @cheatsheetItem
@@ -15,7 +16,9 @@ Specifies a CSS selector that identifies this directive within a template. Suppo
 Does not support parent-child relationship selectors.
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `providers: [MyService, provide(...)]`|`providers:`
+syntax(js):
+`providers: [MyService, ng.core.provide(...)]`|`providers:`
 description:
 Array of dependency injection providers for this directive and its children.
diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md
@@ -2,7 +2,8 @@
 Forms
 @cheatsheetIndex 3
 @description
-{@target js ts}`import {FORM_DIRECTIVES} from 'angular2/common';`{@endtarget}
+{@target ts}`import {FORM_DIRECTIVES} from 'angular2/common';`{@endtarget}
+{@target js}Available from `ng.common.FORM_DIRECTIVES`{@endtarget}
 {@target dart}`import 'package:angular2/common.dart';`{@endtarget}
 
 @cheatsheetItem
diff --git a/modules/angular2/docs/cheatsheet/lifecycle hooks.md b/modules/angular2/docs/cheatsheet/lifecycle hooks.md
@@ -2,68 +2,87 @@
 Directive and component change detection and lifecycle hooks
 @cheatsheetIndex 8
 @description
-(implemented as class methods)
+{@target ts dart}(implemented as class methods){@endtarget}
+{@target js}(implemented as component properties){@endtarget}
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
+syntax(js):
+`constructor: function(MyService, ...) { ... }`|`constructor: function(MyService, ...)`
 syntax(dart):
 `MyAppComponent(MyService myService, ...) { ... }`|`MyAppComponent(MyService myService, ...)`
 description:
 The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
+syntax(js):
+`ngOnChanges: function(changeRecord) { ... }`|`ngOnChanges: function(changeRecord)`
 description:
 Called after every change to input properties and before processing content or child views.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngOnInit() { ... }`|`ngOnInit()`
+syntax(js):
+`ngOnInit: function() { ... }`|`ngOnInit: function()`
 description:
 Called after the constructor, initializing input properties, and the first call to ngOnChanges.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngDoCheck() { ... }`|`ngDoCheck()`
+syntax(js):
+`ngDoCheck: function() { ... }`|`ngDoCheck: function()`
 description:
 Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngAfterContentInit() { ... }`|`ngAfterContentInit()`
+syntax(js):
+`ngAfterContentInit: function() { ... }`|`ngAfterContentInit: function()`
 description:
 Called after ngOnInit when the component's or directive's content has been initialized.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
+syntax(js):
+`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
 description:
 Called after every check of the component's or directive's content.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngAfterViewInit() { ... }`|`ngAfterViewInit()`
+syntax(js):
+`ngAfterViewInit: function() { ... }`|`ngAfterViewInit: function()`
 description:
 Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`
+syntax(js):
+`ngAfterViewChecked: function() { ... }`|`ngAfterViewChecked: function()`
 description:
 Called after every check of the component's view. Applies to components only.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `ngOnDestroy() { ... }`|`ngOnDestroy()`
+syntax(js):
+`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
 description:
 Called once, before the instance is destroyed.
diff --git a/modules/angular2/docs/cheatsheet/routing.md b/modules/angular2/docs/cheatsheet/routing.md
