add DI section

Author: filipesilva

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6

@@ -20,9 +20,10 @@ class TitleComponent {
   msg = '';
   constructor(
     @Inject('titlePrefix') @Optional() titlePrefix,
-    @Attribute('title') title) {
-      this.titlePrefix = titlePrefix;
-      this.title = title;
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
   }
 
   ok() {

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6

@@ -9,7 +9,7 @@ import { BrowserModule } from '@angular/platform-browser';
 class HeroComponent {
   constructor(@Inject('heroName') name) {
     this.name = name;
-   }
+  }
 }
 // #enddocregion
 

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6

@@ -8,6 +8,7 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
+
 class HeroComponent {
   name;
   constructor(dataService: DataService) {

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js

@@ -9,10 +9,7 @@
       '<p>{{ msg }}</p>'
   }).Class({
     constructor: [
-      [
-        new ng.core.Optional(),
-        new ng.core.Inject('titlePrefix')
-      ],
+      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
       new ng.core.Attribute('title'),
       function(titlePrefix, title) {
         this.titlePrefix = titlePrefix;
@@ -33,7 +30,7 @@
   }).Class({
     constructor: function() { }
   });
- 
+
   app.HeroesDIInjectAdditionalModule =
     ng.core.NgModule({
       imports: [ ng.platformBrowser.BrowserModule ],

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js

@@ -25,7 +25,7 @@
     .Class({
       constructor: function() {}
     });
-  
+
 })(window.app = window.app || {});
 
 (function(app) {
@@ -35,11 +35,12 @@
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor:
-      [new ng.core.Inject('heroName'), 
-       function(name) {
-         this.name = name;
-       }]
+    constructor: [
+      new ng.core.Inject('heroName'),
+      function(name) {
+        this.name = name;
+      }
+    ]
   });
 // #enddocregion ctor
 

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js

@@ -5,11 +5,12 @@
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor:
-      [app.DataService, 
-       function(service) {
-         this.name = service.getHeroName();
-       }]
+    constructor: [
+      app.DataService,
+      function(service) {
+        this.name = service.getHeroName();
+      }
+    ]
   });
   // #enddocregion
 

public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js

@@ -6,9 +6,11 @@
   function HeroComponent(dataService) {
     this.name = dataService.getHeroName();
   }
+  
   HeroComponent.parameters = [
     app.DataService
   ];
+
   HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',

public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts

@@ -19,12 +19,9 @@ import { BrowserModule } from '@angular/platform-browser';
 class TitleComponent {
   private msg: string = '';
   constructor(
-    @Inject('titlePrefix')
-    @Optional()
-      private titlePrefix: string,
-    @Attribute('title')
-      private title: string) {
-  }
+    @Inject('titlePrefix') @Optional() private titlePrefix: string,
+    @Attribute('title') private title: string
+  ) { }
 
   ok() {
     this.msg = 'OK!';

public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts

@@ -7,10 +7,7 @@ import { BrowserModule } from '@angular/platform-browser';
   template: `<h1>Hero: {{name}}</h1>`
 })
 class HeroComponent {
-  constructor(
-    @Inject('heroName')
-      private name: string) {
-  }
+  constructor(@Inject('heroName') private name: string) { }
 }
 // #enddocregion
 

public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts

@@ -8,6 +8,7 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
+
 class HeroComponent {
   name: string;
   constructor(dataService: DataService) {

public/docs/js/latest/cookbook/ts-to-js.jade

@@ -170,7 +170,7 @@ a(id="class-metadata")
   Each item in the array corresponds to a decorator.
 
   The pattern of creating a constructor and decorating it with metadata is so common that Angular 
-  provides an alternative convenience Class API for it for ES5 Javascript.
+  provides an alternative ES5 convenience class API for it for ES5 Javascript.
   This API lets us define everything in a single expression.
 
   With this API we first call the `ng.core.Component` function, followed by a chained `Class` 
@@ -264,102 +264,99 @@ a(id="property-metadata")
 :marked
   ## Dependency Injection
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Injection by Type
+  ### Injection by Type
 
-        Angular can often use TypeScript type information to
-        determine what needs to be injected.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." )
-
-    td
-      :marked
-        ### Injection with Parameter Tokens
-
-        Since no type information is available in ES5 JavaScript,
-        we must identify "injectables" in some other way.
-
-        We attach a `parameters` array to the constructor function. 
-        Each array item is the dependency injection token that identifies the thing to be injected. 
-        Often the token is the constructor function for the class-like dependency.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di.component.js')(format="." )
-
-      :marked
-        When using the class convenience API, we can also supply the parameter
-        tokens by wrapping the constructor in an array.
+  Angular can often use TypeScript type information to determine what needs to be injected.
+  ES6 with decorators can also make use of type information.
 
-      +makeExample('cb-ts-to-js/js/app/hero-di-inline.component.js')(format="." )
+  Since no type information is available in ES5/6 JavaScript, we must identify "injectables" in 
+  some other way.
 
-  tr(style=top)
-    td
-      :marked
-        ### Injection with the @Inject decorator
-
-        When the thing being injected doesn't correspond directly to a type,
-        we use the `@Inject()` decorator to supply the injection token.
-        
-        In this example, we're injecting a string identified by the "heroName" token.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject.component.ts')(format="." )
-
-    td
-      :marked
-        ### Injection with plain string tokens
-
-        In JavaScript we add the token string to the injection parameters array.
+  We attach a `parameters` array to the constructor function. 
+  Each array item is the dependency injection token that identifies the thing to be injected. 
+  Often the token is the constructor function for the class-like dependency.
+  
+  In ES6 the decorators need to be inside a nested array.
+  When using the ES5 class convenience API, we can also supply the parameter tokens by wrapping 
+  the constructor in an array.
 
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','parameters')(format="." )
-      
-      :marked
-        Alternatively, we can create a token with the `Inject` method and
-        add that to the constructor array in the annotations like this:
-        
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','ctor')(format="." )        
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di.component.es6,
+    cb-ts-to-js/js/app/hero-di.component.js,
+    cb-ts-to-js/js/app/hero-di-inline.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript,
+    ES5 Javascript with Class API
+  `)
 
-  tr(style=top)
-    td
-      :marked
-        ### Additional Injection Decorators
+:marked
+  ### Injection with the @Inject decorator
 
-        We can attach additional decorators to constructor parameters
-        to qualify the injection behavior. We can mark
-        optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
-        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-        inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-        and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
+  When the thing being injected doesn't correspond directly to a type, we use the 
+  `@Inject()` decorator to supply the injection token.
+  In this example, we're injecting a string identified by the "heroName" token. 
 
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
+  In ES5/6 JavaScript we add the token string to the injection parameters array.
+  Alternatively, when using the ES5 convenience class API we can create a token with the 
+  `Inject` method and add that to the constructor array in the annotations.
 
-    td
-      :marked
-        ### Additional Injection Metadata with Nested Arrays 
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject.component.js,
+    cb-ts-to-js/js/app/hero-di-inject.component.js
+  `,`
+  ,
+  ,
+  ,
+  parameters,
+  ctor
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript,
+    ES5 Javascript with Class API
+  `)
 
-        To achieve the same effect in JavaScript, use the constructor array notation
-        in which the injection information precedes the constructor function itself.
-        
-        Use the injection support functions `Attribute`, `Host`, `Optional`, `Self`, `SkipSelf` to qualify dependency injection behavior.
-        
-        Use a nested array to combine injection functions.
+:marked
+  ### Additional Injection Decorators
 
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject-additional.component.js')(format="." )
+  We can attach additional decorators to constructor parameters to qualify the injection behavior. 
+  We can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
+  inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
+  inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
+  and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
 
-      :marked
-        We can apply other additional parameter decorators such as
-        [`@Host`](../api/core/index/Host-decorator.html) and
-        [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-        by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-        parameters array.
+  In ES6 Javascript we just add the extra decorators to the nested injection parameters array.
 
+  To achieve the same effect in ES5 JavaScript, use the a nested array with the constructor 
+  array notation in which the injection information precedes the constructor function itself.
+  
+  We can apply other additional parameter decorators such as
+  [`@Host`](../api/core/index/Host-decorator.html) and
+  [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
+  by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
+  parameters array.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript
+  `)  
 
 a(id="other-property-metadata")
 .l-main-section