anchor.diff:      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]
  +        })
  +
  +
  +      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.
  
positive.code:     code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //Typescript
          constructor() {
            this.myName = "Alice";
            this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
          }
  
        code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
          //ES5
          function DisplayComponent() {
            this.myName = "Alice";
            this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
          }
      p.
          You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
  
negative.code: 
      code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          @Component({
            ...
            <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>
            }
          }
  
        code-pane(language="javascript" name="ES5" format="linenums").
          //ES5
          function FriendsService() {
            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
          }
          function DisplayComponent(<span class='otl'>friends</span>) {
            this.myName = "Alice";
            this.names = <span class='otl'>friends.names</span>;
          }
          DisplayComponent.annotations = [
            new angular.ComponentAnnotation({
              selector: "display",
              <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]
            })
          ];
          <span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
          document.addEventListener("DOMContentLoaded", function() {
            angular.bootstrap(DisplayComponent);
          });
  