docs(cheatsheet) adding JS specific syntax to cheatsheet

Closes #5861

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}

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

modules/angular2/docs/cheatsheet/class-decorators.md

@@ -2,13 +2,16 @@
 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(...)`
@@ -16,9 +19,11 @@ 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(...)`
@@ -26,12 +31,19 @@ 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}

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.
 

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

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.

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.

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

modules/angular2/docs/cheatsheet/lifecycle hooks.md

@@ -2,11 +2,14 @@
 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:
@@ -14,56 +17,72 @@ The class constructor is called before any other lifecycle hook. Use it to injec
 
 
 @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.

modules/angular2/docs/cheatsheet/routing.md

@@ -2,18 +2,27 @@
 Routing and navigation
 @cheatsheetIndex 10
 @description
-{@target js ts}`import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`{@endtarget}
+{@target ts}`import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`{@endtarget}
+{@target js}Available from the `ng.router` namespace{@endtarget}
 {@target dart}`import 'package:angular2/router.dart';`{@endtarget}
 
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `@RouteConfig([
   { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
   { path: '/staticPath', component: ..., as: ...},
   { path: '/*wildCardParam', component: ..., as: ...}
 ])
 class MyComponent() {}`|`@RouteConfig`
+syntax(js):
+`var MyComponent = ng.router.RouteConfig([
+  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
+  { path: '/staticPath', component: ..., as: ...},
+  { path: '/*wildCardParam', component: ..., as: ...}
+]).Class({
+  constructor: function() {}
+});`|`ng.router.RouteConfig`
 syntax(dart):
 `@RouteConfig(const [
   const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),
@@ -37,8 +46,10 @@ Creates a link to a different view based on a route instruction consisting of a
 
 
 @cheatsheetItem
-syntax(js ts):
+syntax(ts):
 `@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`
+syntax(js):
+`var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});`|`ng.router.CanActivate(function() { ... })`
 syntax(dart):
 `@CanActivate(() => ...)class MyComponent() {}`|`@CanActivate`
 description:
@@ -46,35 +57,45 @@ A component decorator defining a function that the router should call first to d
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
+syntax(js):
+`routerOnActivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
 description:
 After navigating to a component, the router calls the component's routerOnActivate method (if defined).
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
+syntax(js):
+`routerCanReuse: function(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
 description:
 The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a {@target js ts}promise{@endtarget}{@target dart}future{@endtarget}.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
+syntax(js):
+`routerOnReuse: function(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
 description:
 The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
+syntax(js):
+`routerCanDeactivate: function(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
 description:
 The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a {@target js ts}promise that is resolved{@endtarget}{@target dart}future that completes successfully{@endtarget}.
 
 
 @cheatsheetItem
-syntax:
+syntax(ts dart):
 `routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
+syntax(js):
+`routerOnDeactivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
 description:
 Called before the directive is removed as the result of a route change. May return a {@target js ts}promise{@endtarget}{@target dart}future{@endtarget} that pauses removing the directive until the {@target js ts}promise resolves{@endtarget}{@target dart}future completes{@endtarget}.