feat(ts): moving dev guide TS.

Removes plunker links as they don't support TS yet.

public/docs/js/latest/guide/displaying-data.jade

@@ -1,8 +1,3 @@
-.statement
-  h4 Live Examples
-  p.
-    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview'> ES5 Example</a>.
-
 .l-main-section
 
   h2#section-displaying-controller-properties Displaying controller properties
@@ -15,6 +10,14 @@
   figure.image-display
     img(src='displaying-data-example1.png')
 
+.callout.is-helpful
+  header Typescript vs ES5
+  p.
+    Although we work through the examples in TypeScript, you can also use
+    regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
+    version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
+    <code>.ts</code>.
+
 .l-main-section
     h2#section-create-an-entry-point Create an entry point
 
@@ -33,26 +36,9 @@
      | The simple method for binding text into templates is through interpolation where you put the name of a property
      | inside <strong>{{ }}</strong>.
 
-    p To see this working, create another file, <code>show-properties.js</code>, and add the following:
+    p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
 
     .code-box
-      pre.prettyprint.linenums.lang-javascript(data-name="es5")
-          code.
-            // ES5
-            function DisplayComponent() {
-              this.myName = "Alice";
-            }
-            DisplayComponent.annotations = [
-              new angular.Component({
-                selector: "display"
-              }),
-              new angular.View({
-                template:
-                   '&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
-                directives: [angular.For, angular.If]
-              })
-            ];
-
       pre.prettyprint.linenums.lang-typescript(data-name="typescript")
           code.
               // TypeScript
@@ -75,6 +61,22 @@
                  this.myName = "Alice";
                }
               }
+      pre.prettyprint.linenums.lang-javascript(data-name="es5")
+          code.
+            // ES5
+            function DisplayComponent() {
+              this.myName = "Alice";
+            }
+            DisplayComponent.annotations = [
+              new angular.ComponentAnnotation({
+                selector: "display"
+              }),
+              new angular.ViewAnnotation({
+                template:
+                   '&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
+                directives: [angular.For, angular.If]
+              })
+            ];
     p.
      You've just defined a component that encompasses a view and controller for the app. The view
      defines a template:
@@ -124,13 +126,6 @@
     h2#Create-an-array Create an array property and use For on the view
     p Moving up from a single property, create an array to display as a list.
     .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              function DisplayComponent() {
-                this.myName = "Alice";
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-              }
       pre.prettyprint.lang-typescript(data-name="typescript")
           code.
               //Typescript
@@ -138,6 +133,13 @@
                 this.myName = "Alice";
                 this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
               }
+      pre.prettyprint.lang-javascript(data-name="es5")
+          code.
+              //ES5
+              function DisplayComponent() {
+                this.myName = "Alice";
+                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+              }
     p.
         You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
         with one for each item in the array.
@@ -167,20 +169,20 @@
                 &lt;/ul&gt;
               `,
     p.
-        To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
+        To make this work, you'll also need to add the <code>For</code> directive used by the template so
         that Angular knows to include it:
 
     .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              directives: [angular.For]
       pre.prettyprint.lang-typescript(data-name="typescript")
           code.
               //Typescript
               import {Component, View, bootstrap, For} from
               ...
                 directives: [For]
+      pre.prettyprint.lang-javascript(data-name="es5")
+          code.
+              //ES5
+              directives: [angular.For]
     p Reload and you've got your list of friends!
     p.
         Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
@@ -211,28 +213,32 @@
     p Make a <code>FriendsService</code> class to provide the model with the list of friends.
     pre.prettyprint.lang-javascript
         code.
-            function FriendsService() {
+            class FriendsService {
-              this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+              names: Array&lt;string&gt;;
+              constructor() {
+                this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+              }
             }
     p.
         Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
         names in DisplayComponent to the names provided by the service you passed in.
     pre.prettyprint.lang-javascript
         code.
-            function DisplayComponent(friends) {
+            class DisplayComponent {
-              this.myName = "Alice";
+              names: Array&lt;string&gt;;
-              this.names = friends.names;
+              constructor(friendsService: FriendsService) {
+                this.names = friendsService.names;
+              }
             }
     p And then make FriendsService available to dependency injection
     pre.prettyprint.lang-javascript
         code.
-            DisplayComponent.annotations = [
+            @Component({
-              new angular.Component({
+              ...
-                selector: "display",
+              injectables: [DisplayComponent]
-                injectables: [FriendsService]
+            })
-              }),
             ...
-            DisplayComponent.parameters = [[FriendsService]];
+            class DisplayComponent {...
     .callout.is-helpful
         header ES5 Note
         p.
@@ -240,6 +246,24 @@
             working on sugaring the syntax to match the way it works in Angular 1.  Expect this to change soon.
 
     .code-box
+      pre.prettyprint.lang-typescript(data-name="typescript")
+          code.
+              //TypeScript
+              class FriendsService {
+                names: Array&lt;string&gt;;
+                constructor() {
+                  this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+                }
+              }
+              ...
+              class DisplayComponent {
+                 names: Array&lt;string&gt;;
+
+                 constructor(friendsService: FriendsService) {
+                   this.names = friendsService.names;
+                 }
+              }
+
       pre.prettyprint.lang-javascript(data-name="es5")
           code.
               //ES5
@@ -251,11 +275,11 @@
                 this.names = friends.names;
               }
               DisplayComponent.annotations = [
-                new angular.Component({
+                new angular.ComponentAnnotation({
                   selector: "display",
                   injectables: [FriendsService]
                 }),
-                new angular.View({
+                new angular.ViewAnnotation({
                   template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
                   directives: [angular.For, angular.If]
                 })
@@ -264,12 +288,6 @@
               document.addEventListener("DOMContentLoaded", function() {
                 angular.bootstrap(DisplayComponent);
               });
-      pre.prettyprint.lang-typescript(data-name="typescript")
-          code.
-              //TypeScript
-              import {Component, View, bootstrap, For} from
-              ...
-                directives: [For]
 .l-main-section
     h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
     p.
@@ -279,47 +297,23 @@
     pre.prettyprint.lang-html
         code.
             &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
-    p You'll also need to add the If directive so Angular knows to include it.
+    p You'll also need to add the <code>If</code> directive so Angular knows to include it.
 
     .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              directives: [angular.For, angular.If]
       pre.prettyprint.lang-typescript(data-name="typescript")
           code.
               //Typescript
               import {Component, View, bootstrap, For, If} from
               ...
                 directives: [For, If]
+      pre.prettyprint.lang-javascript(data-name="es5")
+          code.
+              //ES5
+              directives: [angular.For, angular.If]
     p.
         As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
         Remove two items from the list, reload your browser, and see that the message no longer displays.
     .code-box
-      pre.prettyprint.lang-javascript(data-name="es5")
-          code.
-              //ES5
-              function DisplayComponent() {
-                this.myName = "Alice";
-                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-              }
-              DisplayComponent.annotations = [
-                new angular.Component({
-                  selector: "display"
-                }),
-                new angular.View({
-                  template:
-                    &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
-                    &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
-                    &#39;&lt;ul&gt;&#39; +
-                    &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
-                    &#39;{{ name }}&#39; +
-                    &#39;&lt;/li&gt;&#39; +
-                    &#39;&lt;/ul&gt;&#39; +
-                    &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
-                  directives: [angular.For, angular.If]
-                })
-              ];
       pre.prettyprint.lang-typescript(data-name="typescript")
           code.
               //TypeScript
@@ -342,9 +336,33 @@
               })
               class DisplayComponent {
                 myName: string;
-                todos: Array<string>;
+                todos: Array&lt;string&gt;
                 constructor() {
                   this.myName = "Alice";
                   this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
                 }
               }
+      pre.prettyprint.lang-javascript(data-name="es5")
+          code.
+              //ES5
+              function DisplayComponent() {
+                this.myName = "Alice";
+                this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+              }
+              DisplayComponent.annotations = [
+                new angular.ComponentAnnotation({
+                  selector: "display"
+                }),
+                new angular.ViewAnnotation({
+                  template:
+                    &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
+                    &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
+                    &#39;&lt;ul&gt;&#39; +
+                    &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
+                    &#39;{{ name }}&#39; +
+                    &#39;&lt;/li&gt;&#39; +
+                    &#39;&lt;/ul&gt;&#39; +
+                    &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
+                  directives: [angular.For, angular.If]
+                })
+              ];

public/docs/js/latest/guide/making-components.jade

@@ -1,8 +1,3 @@
-.statement
-  h4 Live Examples
-  p.
-    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
-
 .l-main-section
 
   h2#section-its-all-a-tree It's all a tree
@@ -16,24 +11,6 @@
       component that uses a <code>&lt;child&gt;</code> component like so:
 
   .code-box
-    pre.prettyprint.linenums.lang-javascript(data-name="es5")
-      code.
-        //ES5
-        function ParentComponent() {
-          this.message = "I'm the parent";
-        }
-        ParentComponent.annotations = [
-          new angular.Component({
-            selector: "parent"
-          }),
-          new angular.View({
-            template:
-              '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
-              '&lt;child&gt;&lt;/child&gt;',
-            directives: [ChildComponent]
-          })
-        ];
-
     pre.prettyprint.linenums.lang-typescript(data-name="typescript")
       code.
         //TypeScript
@@ -54,25 +31,28 @@
             this.message = "I'm the parent";
           }
         }
+    pre.prettyprint.linenums.lang-javascript(data-name="es5")
+      code.
+        //ES5
+        function ParentComponent() {
+          this.message = "I'm the parent";
+        }
+        ParentComponent.annotations = [
+          new angular.ComponentAnnotation({
+            selector: "parent"
+          }),
+          new angular.ViewAnnotation({
+            template:
+              '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
+              '&lt;child&gt;&lt;/child&gt;',
+            directives: [ChildComponent]
+          })
+        ];
+
 
   p You then just need to write the <code>ChildComponent</code> class to make it work:
 
   .code-box
-    pre.prettyprint.linenums.lang-javascript(data-name="es5")
-      code.
-        //ES5
-        function ChildComponent() {
-          this.message = "I'm the child";
-        }
-        ChildComponent.annotations = [
-          new angular.Component({
-            selector: "child"
-          }),
-          new angular.View({
-            template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
-          })
-        ];
-
     pre.prettyprint.linenums.lang-typescript(data-name="typescript")
       code.
         //TypeScript
@@ -85,10 +65,26 @@
           `
         })
         class ChildComponent {
+          message: string;
           constructor() {
             this.message = "I'm the child";
           }
         }
+    pre.prettyprint.linenums.lang-javascript(data-name="es5")
+      code.
+        //ES5
+        function ChildComponent() {
+          this.message = "I'm the child";
+        }
+        ChildComponent.annotations = [
+          new angular.ComponentAnnotation({
+            selector: "child"
+          }),
+          new angular.ViewAnnotation({
+            template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
+          })
+        ];
+
 
   p.
       Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to

public/docs/js/latest/guide/setup.jade

@@ -1,11 +1,6 @@
-.statement
-  h4 Live Examples
-  p.
-    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
-
 .l-main-section
 
-  h2#section-install-or-plunker Install Angular or Use Plunker
+  h2#section-install-or-plunker Install Angular
   p There are four steps to create any Angular app:
   ol
     li Create an entry point HTML file where users will start
@@ -14,24 +9,27 @@
     li Bootstrap Angular
 
   p.
-    You can edit and test out your apps either though serving local files through a web server or through a service like
+    You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
-    Plunker.
-
-  .callout.is-helpful
-    header Plunker is the fastest setup
-    p.
-      Plunker is a free online text editor. You can use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> for Angular 2 to get going without any setup.
 
   p.
-    For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> to get going.  If you're serving local files, edit and save them and start a web server that serves files in that directory.  If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
+    When you're serving local files, edit and save them and start a web server that serves files in that directory.  If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
 
   pre.prettyprint.lang-bash
     code python -m SimpleHTTPServer 8000
 
+.callout.is-helpful
+  header Typescript vs ES5
+  p.
+    Although we work through the examples in TypeScript, you can also use
+    regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
+    version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
+    <code>.ts</code>.
+
+
 .l-main-section
   h2#section-create-an-entry-point Create an entry point
   p.
-    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
+    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
     you'll build your first component.
 
   p.
@@ -39,21 +37,9 @@
     application.
 
   p.
-    The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load.
+    The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
 
   .code-box
-    pre.prettyprint.lang-html(data-name="es5")
-      code.
-        &lt;!DOCTYPE html&gt;
-        &lt;html&gt;
-          &lt;head&gt;
-            &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
-            &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
-          &lt;/head&gt;
-          &lt;body&gt;
-          &lt;/body&gt;
-        &lt;/html&gt;
-
     pre.prettyprint.lang-html(data-name="typescript")
       code.
         &lt;!DOCTYPE html&gt;
@@ -61,22 +47,27 @@
           &lt;head&gt;
             &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
             &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
-            &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js&quot;&gt;&lt;/script&gt;
+            &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.21/angular2.dev.js&quot;&gt;&lt;/script&gt;
           &lt;/head&gt;
           &lt;body&gt;
             &lt;my-app&gt;&lt;/my-app&gt;
             &lt;script&gt;
-              System.config({
-                paths: {
-                  &#39;*&#39;: &#39;*.js&#39;,
-                  &#39;angular2/*&#39;: &#39;angular2/*&#39;,
-                }
-              });
               System.import(&#39;main&#39;);
             &lt;/script&gt;
           &lt;/body&gt;
         &lt;/html&gt;
 
+    pre.prettyprint.lang-html(data-name="es5")
+      code.
+        &lt;!DOCTYPE html&gt;
+        &lt;html&gt;
+          &lt;head&gt;
+            &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.21/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
+            &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
+          &lt;/head&gt;
+          &lt;body&gt;
+          &lt;/body&gt;
+        &lt;/html&gt;
 
 .callout.is-helpful
   header Don't use code.angularjs.org in a live app
@@ -88,28 +79,11 @@
   h2#section-set-up-the-starting-component Set up the starting component
 
   p.
-    In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the
+    In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
     <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
     it all off like this:
 
   .code-box
-    pre.prettyprint.lang-javascript(data-name="es5")
-      code.
-        function AppComponent() {}
-
-        AppComponent.annotations = [
-          new angular.Component({
-            selector: 'my-app'
-          }),
-          new angular.View({
-            template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
-          })
-        ];
-
-        document.addEventListener('DOMContentLoaded', function() {
-          angular.bootstrap(AppComponent);
-        });
-
     pre.prettyprint.lang-typescript(data-name="typescript")
       code.
         import {Component, View, bootstrap} from 'angular2/angular2';
@@ -125,13 +99,37 @@
 
         bootstrap(AppComponent);
 
+    pre.prettyprint.lang-javascript(data-name="es5")
+      code.
+        function AppComponent() {}
+
+        AppComponent.annotations = [
+          new angular.ComponentAnnotation({
+            selector: 'my-app'
+          }),
+          new angular.ViewAnnotation({
+            template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+          })
+        ];
+
+        document.addEventListener('DOMContentLoaded', function() {
+          angular.bootstrap(AppComponent);
+        });
+
+
+  .callout.is-helpful
+    header Annotations vs Decorators
+    p.
+      If you are transpiling using a tool that translates the <code>@</code> symbols to
+      annotations (for example Traceur), you will need to import the annotation versions of
+      Component and View. That can be easily achieved using
+      <code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.
 
 .l-main-section
   h2#section-run-it Run it!
 
   p.
-    Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and
+    Open <code>index.html</code> through your web server and you should see:
-    you should see:
   div(align='center')
     img(src='setup-example1.png')
 
@@ -181,18 +179,15 @@
       In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
 
     .code-box
-      pre.prettyprint.lang-typescript(data-name="es5")
-        code.
-          // window.angular is available because the script file attaches the angular property to the window
-          document.addEventListener('DOMContentLoaded', function() {
-            angular.bootstrap(AppComponent);
-          });
       pre.prettyprint.lang-typescript(data-name="typescript")
         code.
           import {Component, View, bootstrap} from 'angular2/angular2';
           ...
           // bootstrap is available for use because it was imported from angular core
           bootstrap(AppComponent);
-
+      pre.prettyprint.lang-typescript(data-name="es5")
-
+        code.
-
+          // window.angular is available because the script file attaches the angular property to the window
+          document.addEventListener('DOMContentLoaded', function() {
+            angular.bootstrap(AppComponent);
+          });

public/docs/js/latest/guide/user-input.jade

@@ -1,8 +1,3 @@
-.statement
-  h4 Live Examples
-  p.
-    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
-
 .l-main-section
   h2#section-responding-to-user-input Responding to user input with event syntax
 
@@ -43,6 +38,18 @@
     on the array when called.
 
   .code-box
+    pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+      code.
+        //TypeScript
+        class TodoList {
+          todos: Array&lt;string&gt;;
+          constructor() {
+            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+          }
+          addTodo(todo: string) {
+            this.todos.push(todo);
+          }
+        }
     pre.prettyprint.linenums.lang-javascript(data-name="es5")
       code.
         //ES5
@@ -53,19 +60,6 @@
           };
         }
 
-    pre.prettyprint.linenums.lang-typescript(data-name="typescript")
-      code.
-        //TypeScript
-        class TodoList {
-          todos: Array&lt;string&gt;
-          constructor() {
-            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
-          }
-          addTodo(todo: string) {
-            this.todos.push(todo);
-          }
-        }
-
 .callout.is-helpful
   header Production Best Practice
   p.
@@ -118,45 +112,6 @@
   h2#section-final-code Final Code
 
   .code-box
-    pre.prettyprint.lang-javascript(data-name="es5")
-      code.
-        //ES5
-        function TodoList() {
-          this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
-
-          this.addTodo = function(todo) {
-            this.todos.push(todo);
-          };
-
-          this.doneTyping = function($event) {
-            if($event.which === 13) {
-              this.addTodo($event.target.value);
-              $event.target.value = null;
-            }
-          }
-        }
-
-        TodoList.annotations = [
-          new angular.Component({
-            selector: "todo-list"
-          }),
-          new angular.View({
-            template:
-              '&lt;ul&gt;' +
-              '&lt;li *for="#todo of todos">' +
-              '{{ todo }}' +
-              '&lt;/li&gt;' +
-              '&lt;/ul&gt;' +
-              '&lt;input #textbox (keyup)="doneTyping($event)">' +
-              '&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
-            directives: [angular.For, angular.If]
-          })
-        ];
-
-        document.addEventListener("DOMContentLoaded", function() {
-          angular.bootstrap(TodoList);
-        });
-
     pre.prettyprint.lang-typescript(data-name="typescript")
       code.
         //TypeScript
@@ -179,7 +134,7 @@
           directives: [For, If]
         })
         class TodoList {
-          todos: Array<string>;
+          todos: Array&lt;string&gt;;
 
           constructor() {
             this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
@@ -198,3 +153,42 @@
         }
 
         bootstrap(TodoList);
+    pre.prettyprint.lang-javascript(data-name="es5")
+      code.
+        //ES5
+        function TodoList() {
+          this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+
+          this.addTodo = function(todo) {
+            this.todos.push(todo);
+          };
+
+          this.doneTyping = function($event) {
+            if($event.which === 13) {
+              this.addTodo($event.target.value);
+              $event.target.value = null;
+            }
+          }
+        }
+
+        TodoList.annotations = [
+          new angular.ComponentAnnotation({
+            selector: "todo-list"
+          }),
+          new angular.ViewAnnotation({
+            template:
+              '&lt;ul&gt;' +
+              '&lt;li *for="#todo of todos">' +
+              '{{ todo }}' +
+              '&lt;/li&gt;' +
+              '&lt;/ul&gt;' +
+              '&lt;input #textbox (keyup)="doneTyping($event)">' +
+              '&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
+            directives: [angular.For, angular.If]
+          })
+        ];
+
+        document.addEventListener("DOMContentLoaded", function() {
+          angular.bootstrap(TodoList);
+        });
+