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

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

@@ -110,16 +110,21 @@
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //Typescript
+        class DisplayComponent {
+          myName: string;
+          <span class='otl'>names: Array<string>;</span>
+
           constructor() {
             this.myName = "Alice";
-          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+            <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
+        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").
+    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"];
           }
         }
+
+      code-pane(language="javascript" name="ES5" format="linenums").
+        function FriendsService() {
+          this.names = ["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
+        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.
 
-    code-example(language="javascript" format="linenums").
-      class DisplayComponent {
-        names: Array&lt;string&gt;;
-        constructor(friendsService: FriendsService) {
-          this.names = friendsService.names;
-        }
-      }
-
-    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
+        @Component({
-        class FriendsService {
-          names: Array&lt;string&gt;;
-          constructor() {
-            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
-          }
-        }
           ...
+          <span class='otl'>injectables: [FriendsService]</span>
+        })
         class DisplayComponent {
+          myName: string;
           names: Array&lt;string&gt;;
+          constructor(<span class='otl'>friendsService: FriendsService</span>) {
+            this.myName = 'Alice';
+            <span class='otl'>this.names = friendsService.names;</span>
+          }
+        }
 
-           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);
         });