From d3f8fb741ae18c1e56cc830c3adeeba9fb7f3c79 Mon Sep 17 00:00:00 2001
From: David East <david@firebase.com>
Date: Tue, 21 Apr 2015 17:01:09 -0700
Subject: [PATCH] Live examples and formatting.

---
 .../docs/js/latest/guide/displaying-data.jade | 37 +++++++++----------
 public/docs/js/latest/guide/setup.jade        | 10 +++++
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
index 259fd013d7..2943ba134f 100644
--- a/public/docs/js/latest/guide/displaying-data.jade
+++ b/public/docs/js/latest/guide/displaying-data.jade
@@ -1,7 +1,4 @@
 .l-main-section
-    p.
-      <strong>Mission:</strong> By the end of this chapter, you should be able to display data from both properties and
-      lists from a component’s controller to the view.
     p.
         Displaying data is job number one for any good application.  In Angular, you bind data to elements in HTML
         templates and Angular automatically updates the UI as data changes.
@@ -14,7 +11,9 @@
         img(src='displaying-data-example1.png')
 
     .l-sub-section
-        h3#section-examples Examples:
+        h3#section-examples Live Examples
+        p.
+          If you want to skip the working examples you can check out these links on Plunker.
         ul
          li
             a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
@@ -302,24 +301,24 @@
               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]
-            })
+              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
         code.
             //TypeScript
             import {Component, View, bootstrap, For, If} from 'angular2/angular2';
-                      @Component({
+            @Component({
               selector: 'display'
             })
             @View({
@@ -338,8 +337,8 @@
             class DisplayComponent {
               myName: string;
               todos: Array<string>;
-                        constructor() {
+              constructor() {
                 this.myName = "Alice";
                 this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
               }
-            }
\ No newline at end of file
+            }
diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade
index d6d6423cf6..0f97acb3fb 100644
--- a/public/docs/js/latest/guide/setup.jade
+++ b/public/docs/js/latest/guide/setup.jade
@@ -21,6 +21,16 @@
 
   pre.prettyprint.lang-bash
     code python -m SimpleHTTPServer 8000
+    
+  .l-sub-section
+      h3#section-examples Live Examples
+      p.
+        If you want to skip the working examples you can check out these links on Plunker.
+      ul
+       li
+          a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript
+       li
+          a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5
 
 .l-main-section
   h2#section-create-an-entry-point Create an entry point