anchor.diff:  .l-main-section
     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.
  -  p.
  -      Let's walk through how we'd display a property, a list of properties, and then conditionally show content
  +      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.
  +  p.
  +      Let's walk through how to display a property and a list of properties,
  +      and then to conditionally show content
         based on state.
     p.
  -      We'll end up with a UI that looks like this:
  +      The final UI looks like this:
     figure.image-display
       img(src='displaying-data-example1.png')
   
   .l-main-section
  -  h2#section-create-an-entry-point Create an entry point
  -
  -  p Open your favorite editor and create a <code>show-properties.html</code> file with the content:
  +  h2#section-create-an-entry-point Create entry points and pubspec
  +
  +  p.
  +    Open your favorite editor and create a directory with
  +    a <code>web/main.dart</code> file,
  +    a <code>web/index.html</code> file, and
  +    a <code>pubspec.yaml</code> file:
  +
  +  .code-box
  +    pre.prettyprint.lang-dart(data-name="dart")
  +      code.
  +        // web/main.dart
  +        library displaying_data;
  +
  +        import 'package:angular2/angular2.dart';
  +        import 'package:angular2/src/reflection/reflection.dart' show reflector;
  +        import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
  +
  +        part 'show_properties.dart';
  +
  +        main() {
  +          reflector.reflectionCapabilities = new ReflectionCapabilities();
  +          bootstrap(DisplayComponent);
  +        }
  +    pre.prettyprint.lang-html(data-name="html")
  +      code.
  +        &lt;!-- web/index.html --&gt;
  +        &lt;!DOCTYPE html&gt;
  +        &lt;html&gt;
  +          &lt;head&gt;
  +            &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  +          &lt;/head&gt;
  +          &lt;body&gt;
  +
  +            &lt;display&gt;&lt;/display&gt;
  +
  +            &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
  +            &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
  +          &lt;/body&gt;
  +        &lt;/html&gt;
  +    pre.prettyprint.lang-yaml(data-name="yaml")
  +      code.
  +        # pubspec.yaml
  +        name: displaying_data
  +        description: Dart version of Angular 2 example, Displaying Data
  +        version: 0.0.1
  +        dependencies:
  +          angular2: 2.0.0-alpha.20
  +          browser: any
  +
  +  p.
  +   All of this code should look familiar from the previous page,
  +   except for the <code>library</code> and <code>part</code> statements
  +   in <code>main.dart</code>.
  +   Those statements let you implement part of the app in a different Dart file.
  +   All three of these files remain similar in the rest of the examples,
  +   so we'll just focus on what's different.
  +
  +.l-main-section
  +  h2#section-showing-properties-with-interpolation Showing properties with interpolation
  +  p.
  +    The simple method for binding text into templates is through interpolation,
  +    where you put the name of a property
  +    inside <strong>{{ }}</strong>.
  +
  +  p.
  +    To see this working, create a Dart file under <code>web</code>
  +    named <code>show_properties.dart</code>,
  +    and add the following:
  +
  +  pre.prettyprint.lang-dart
  +    code.
  +      // web/show_properties.dart
  +      part of displaying_data;
  +
  +      @Component(
  +        selector: 'display'
  +      )
  +      @View(
  +        template: '''
  +      &lt;p>My name: {{ myName }}&lt/p>
  +      '''
  +      )
  +      class DisplayComponent {
  +        String myName = 'Alice';
  +      }
  +
  +  p.
  +    You've just defined a component that encompasses a view and controller for the app. The view
  +    defines a template:
  +
     pre.prettyprint.lang-html
  -      code.
  -         //show-properties.html
  -         &lt;display&gt;&lt;/display&gt;
  -  p
  -   | The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
  -   | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
  -   | are different.
  -
  -.l-main-section
  -  h2#section-showing-properties-with-interpolation Showing properties with interpolation
  -  p.text-body
  -   | The simple method for binding text into templates is through interpolation where you put the name of a property
  -   | inside <strong>{{ }}</strong>.
  -
  -  p To see this working, create another file, <code>show-properties.dart</code>, and add the following:
  -
  -  pre.prettyprint.linenums.lang-javascript
  -      code.
  -        // Dart
  -        part of displaying_data;
  -
  -        @Component(
  -            selector: 'display'
  -          )
  -
  -        @View(
  -            template: '''
  -          &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
  -          '''
  -          )
  -        class DisplayComponent {
  -            String myName = 'Alice';
  -          }
  -
  -  p.
  -   You've just defined a component that encompases a view and controller for the app. The view
  -   defines a template:
  -  pre.prettyprint.lang-html
  -   code.
  -     &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
  -
  -  p.
  -   Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
  -   update it whenever it changes without work on your part.
  -
  -  p.
  -   One thing to notice here is that though you've written your <code>DisplayComponent</code> class, you haven't
  -   called new to create one anywhere.  By associating your class with elements named 'display' in
  -   the DOM, Angular knows to automatically call new on <code>DisplayComponent</code> and bind its properties to
  -   that part of the template.
  -
  -  p.
  -   When you're building templates, data bindings like these have access to the same scope of
  -   properties as your controller class does.  Here, your class is the <code>DisplayComponent</code> that has
  -   just one property, myName.
  +    code.
  +      &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
  +
  +  p.
  +   Angular will automatically pull the value of <code>myName</code> and
  +   insert it into the browser,
  +   automatically updating it whenever it changes.
   
     .callout.is-helpful
       header Note
  
positive.code:       While you've used <code>template:</code> to specify an inline view, for larger templates you'd
        want to move them to a separate file and load them with <code>templateUrl:</code> instead.
  
    p So you can see Angular dynamically update content, add a line after
  
        pre.prettyprint.lang-html
            code.
                &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
    p to this:
        pre.prettyprint.lang-html
            code.
                &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
    p.
        Then give the <code>DisplayComponent</code> a starting value for time and a call to update time
        via <code>setInterval</code>.
  
    pre.prettyprint.lang-dart
      code.
  
negative.code:         }
        }
  
    p Reload the app, and you'll now see the seconds updating automatically.
  
  .l-main-section
    h2#Create-an-array Display an iterable using *for
    p Moving up from a single value, create a property that's a list of values.
  
    pre.prettyprint.lang-dart
      code.
        class DisplayComponent {
          String myName = 'Alice';
          List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
        }
  
    p.
      You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
      with one for each item in the list.
  
    pre.prettyprint.lang-dart
      code.
        @View(
          template: '''
        &lt;p>My name: {{ myName }}&lt;/p>
        &lt;p>Friends:&lt;/p>
        &lt;ul>
           &lt;li *for="#name of friendNames">
              {{ name }}
           &lt;/li>
        &lt;/ul>
          '''
          )
    p.
      To make this work, you'll also need to add the Angular <code>For</code> directive used by
      the template to <code>show_properties.dart</code>, so that Angular knows to include it.
      Add <code>For</code> using the optional <code>directives</code> parameter,
      which contains a list of directives:
  
    pre.prettyprint.lang-dart
      code.
        @View(
          template: '''
        // ...HTML...
          ''',
          directives: const[For]
        )
  
    p Reload and you've got your list of friends!
    p.
  