Live examples and formatting.

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({
+              new angular.View({
-              template:
+                template:
-                &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
+                  &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
-                &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
+                  &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
-                &#39;&lt;ul&gt;&#39; +
+                  &#39;&lt;ul&gt;&#39; +
-                &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
+                  &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
-                &#39;{{ name }}&#39; +
+                  &#39;{{ name }}&#39; +
-                &#39;&lt;/li&gt;&#39; +
+                  &#39;&lt;/li&gt;&#39; +
-                &#39;&lt;/ul&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;,
+                  &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
-              directives: [angular.For, angular.If]
+                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"];
               }
-            }
+            }

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