anchor.diff:        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>.
  +  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.
  
positive.code: .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
        based on state.
    p.
        We'll end up with a UI that 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:
    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.
  
    .callout.is-helpful
      header Note
  
negative.code:           injectables: const[FriendsService]
          )
          @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>
          ''',
            directives: const[For]
          )
          class DisplayComponent {
            String myName = 'Alice';
            List&lt;String> friendNames;
  
            DisplayComponent(FriendsService friendsService) {
              friendNames = friendsService.names;
            }
          }
      pre.prettyprint.lang-dart(data-name="friends_service.dart")
        code.
          // web/friends_service.dart
          part of displaying_data;
  
          class FriendsService {
            List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
          }
      pre.prettyprint.lang-dart(data-name="main.dart")
        code.
          // web/main.dart
          library displaying_data;
  
          import 'dart:async';
  
          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';
          part 'friends_service.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
  .l-main-section
    h2#section-explanations Explanations
  
    .l-sub-section
      h3 Using multiple Dart files in an Angular app
  
        p.
          Dart offers a few ways to implement an app in multiple files.
          In this guide, all the code for each example is in a single library;
          each Dart file under <code>web</code> is part of that library.
  
        p.
          To let the code in <code>main.dart</code>
          use the code in <code>show_properties.dart</code>,
          declare a library in <code>main.dart</code>.
          Then make <code>show_properties.dart</code> part of that library.
  
        .code-box
          pre.prettyprint.lang-dart(data-name="main library file")
            code.
              // web/main.dart
              library displaying_data;
              // imports...
              part 'show_properties.dart';
              // Code goes here...
          pre.prettyprint.lang-dart(data-name="additional library file")
            code.
              // web/show_properties.dart
              part of displaying_data;
              // Code goes here...
  
        p.
          Another way to split Dart code is to
          define multiple libraries in a single package.
          The additional libraries go under a <code>lib</code> directory
          parallel to <code>web</code>.
          <!-- PENDING: show or point to an example -->
  
        p.
          Yet another approach, often used when some of the code is highly reusable,
          is to split the code into libraries in two or more packages.
  
        p.
          For more information on implementing Dart libraries, see
          <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
          in the
          <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.
  