style(guide): add more context throughout displaying-data guide

jeffbcross · jeffbcross · commit 99663edb8cef · 2015-05-19T14:33:21.000-07:00
diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
@@ -110,16 +110,21 @@
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //Typescript
-        constructor() {
-          this.myName = "Alice";
-          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+        class DisplayComponent {
+          myName: string;
+          <span class='otl'>names: Array<string>;</span>
+
+          constructor() {
+            this.myName = "Alice";
+            <span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
+          }
         }
 
       code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
         //ES5
         function DisplayComponent() {
           this.myName = "Alice";
-          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+          <span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
         }
     p.
         You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
@@ -155,13 +160,22 @@
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //Typescript
-        ...
         import {Component, View, bootstrap, For} from 'angular2/angular2';
+        @View({
+          ...
           directives: [For]
+        })
+
 
       code-pane(language="javascript" name="ES5" format="linenums").
         //ES5
-        directives: [angular.For]
+        DisplayComponent.annotations = [
+          ...
+          new angular.ViewAnnotation({
+            ...
+            directives: [angular.For]
+          })
+        ];
 
     p Reload and you've got your list of friends!
     p.
@@ -185,39 +199,32 @@
     p Using this syntax, you can build UI lists from any iterable object.
 .l-main-section
     h2#Create-a-class Create a class for the array property and inject into component
+
     p.
         Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
         proper form.  We should separate the concerns by having another class serve the role of model and inject it into
         the controller.
+
     p Make a <code>FriendsService</code> class to provide the model with the list of friends.
 
-    code-example(language="javascript" format="linenums").
-      class FriendsService {
-        names: Array&lt;string&gt;;
-        constructor() {
-          this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+    code-tabs
+      code-pane(language="javascript" name="TypeScript" format="linenums").
+        class FriendsService {
+          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.
 
-    code-example(language="javascript" format="linenums").
-      class DisplayComponent {
-        names: Array&lt;string&gt;;
-        constructor(friendsService: FriendsService) {
-          this.names = friendsService.names;
+      code-pane(language="javascript" name="ES5" format="linenums").
+        function FriendsService() {
+          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
         }
-      }
+    p.
+        Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list,
+        then including the service in the constructor, and finally setting the list of
+        names in DisplayComponent to the names provided by the service you passed in.
 
-    p And then make FriendsService available to dependency injection
-    code-example(language="javascript" format="linenums").
-      @Component({
-        ...
-        injectables: [FriendsService]
-      })
-      ...
-      class DisplayComponent {...
     .callout.is-helpful
         header ES5 Note
         p.
@@ -226,41 +233,39 @@
 
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
-        //TypeScript
-        class FriendsService {
+        @Component({
+          ...
+          <span class='otl'>injectables: [FriendsService]</span>
+        })
+        class DisplayComponent {
+          myName: string;
           names: Array&lt;string&gt;;
-          constructor() {
-            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+          constructor(<span class='otl'>friendsService: FriendsService</span>) {
+            this.myName = 'Alice';
+            <span class='otl'>this.names = friendsService.names;</span>
           }
         }
-        ...
-        class DisplayComponent {
-           names: Array&lt;string&gt;;
 
-           constructor(friendsService: FriendsService) {
-             this.names = friendsService.names;
-           }
-              }
       code-pane(language="javascript" name="ES5" format="linenums").
         //ES5
         function FriendsService() {
           this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
         }
-        function DisplayComponent(friends) {
+        function DisplayComponent(<span class='otl'>friends</span>) {
           this.myName = "Alice";
-          this.names = friends.names;
+          this.names = <span class='otl'>friends.names</span>;
         }
         DisplayComponent.annotations = [
           new angular.ComponentAnnotation({
             selector: "display",
-            injectables: [FriendsService]
+            <span class='otl'>injectables: [FriendsService]</span>
           }),
           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]
+            directives: [angular.For]
           })
         ];
-        DisplayComponent.parameters = [[FriendsService]];
+        <span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
         document.addEventListener("DOMContentLoaded", function() {
           angular.bootstrap(DisplayComponent);
         });
