style(guide): incorporate FriendsService into final example, If directive

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

@@ -297,11 +297,9 @@
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //TypeScript
         import {Component, View, bootstrap, For, If} from 'angular2/angular2';
-        @Component({
-          selector: 'display'
-        })
+        ...
         @View({
-          template: `
+          <span class='otl'>template</span>: `
             &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
             &lt;p&gt;Friends:&lt;/p&gt;
             &lt;ul&gt;
@@ -314,25 +312,25 @@
           directives: [For, If]
         })
         class DisplayComponent {
-          myName: string;
-          names: Array&lt;string&gt;
+          ...
+        }
+
+        class FriendsService {
+          names: Array<string>;
           constructor() {
-            this.myName = "Alice";
-            this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+            <span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
           }
         }
       code-pane(language="javascript" name="ES5" format="linenums").
         //ES5
-        function DisplayComponent() {
+        function DisplayComponent(friends) {
           this.myName = "Alice";
-          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+          this.names = friends.names;
         }
         DisplayComponent.annotations = [
-          new angular.ComponentAnnotation({
-            selector: "display"
-          }),
+          ...
           new angular.ViewAnnotation({
-            template:
+            <span class='otl'>template</span>: '
               &#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; +
@@ -340,7 +338,11 @@
               &#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;,
+              &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
             directives: [angular.For, angular.If]
           })
         ];
+
+        function FriendsService () {
+          <span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
+        }