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:         }
        }
  
    p Reload the page in your browser and you'll now see the seconds updating automatically.
  
  .l-main-section
    h2#Create-an-array Create an array property and use For on the view
    p Moving up from a single property, create an array to display as a list.
  
    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 array in your template with the <code>for</code> directive to create copies of DOM elements
      with one for each item in the array.
    pre.prettyprint.lang-dart
      code.
        //Dart
          template: &#39;&#39;&#39;
        &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
        &lt;p&gt;Friends:&lt;/p&gt;
        &lt;ul&gt;
           &lt;li *for=&quot;#name of friendNames&quot;&gt;
              {{ name }}
           &lt;/li&gt;
        &lt;/ul&gt;
        ''',
  
    p.
      To make this work, you'll also need to add the <code>angular.For</code> directive used by
      the template to <code>show_properties.dart</code> so that Angular knows to include it:
  
    pre.prettyprint.lang-dart
      code.
            directives: const[For]
  
    p Reload and you've got your list of friends!
    p.
  
negative.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.
     One thing to notice is that although you've written
     your <code>DisplayComponent</code> class, you haven't
     used <code>new</code> to instantiate it.
     Because your class is associated with <code>&lt;display&gt;</code> elements in
     the DOM, Angular automatically calls <code>new</code> 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 <code>DisplayComponent</code>, which has
     just one property, <code>myName</code>.
  
    p.
      Add a second line to the template,
      so you can see Angular dynamically update content:
  
    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.
  