angular-cn/public/docs/dart/latest/guide/displaying-data.jade

.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
    p.
      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.
      class DisplayComponent {
        String myName = 'Alice';
        String time;
        Timer _timer;

        DisplayComponent() {
          _updateTime(null);
          _timer = new Timer.periodic(new Duration(seconds: 1), _updateTime);
        }

        _updateTime(Timer _) {
          time = new DateTime.now().toString();
        }
      }

  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.
    Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
    list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of
    the DOM list.

  p Let's look at the few lines that do the work again:

  pre.prettyprint.lang-html
    code.
      &lt;li *for=&quot;#name of friendNames&quot;&gt;
         {{ name }}
      &lt;/li&gt;

  p The way to read this is:
  ul
    li.
      <code>*for</code> : create a DOM element for each item in an
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
       like an array
    li <code>#name</code> : refer to individual values of the iterable as 'name'
    li <code>of friendNames</code> : the iterable to use is called 'friendNames' in the current controller

  p Using this syntax, you can build UI lists from any iterable object.

.l-main-section
  h2#Create-a-class Create a class for the array property and inject into component
  p.
    Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
    proper form.  We should separate the concerns by having another class serve the role of model and inject it into
    the controller.

  p.
    Make a <code>FriendsService</code> class to provide the model with the list of friends. We'll put this in a new
    <code>friends_service.dart</code> under <code>web/</code>, and add <code>part friends_service.dart</code>
    to <code>main.dart</code>. Here's what the class looks like:

  pre.prettyprint.lang-dart
    code.
      part of displaying_data;

      class FriendsService {
        List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
      }

  p.
    Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
    names in DisplayComponent to the names provided by the service you passed in.

  pre.prettyprint.lang-dart
    code.
      DisplayComponent(FriendsService friendsService) {
        friendNames = friendsService.names;
      }
  p And then make FriendsService available to dependency injection

  pre.prettyprint.lang-dart
      code.
        part of displaying_data;

        @Component(
          selector: 'display',
          injectables: const[FriendsService]
        )
        @View(
          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;
        ''',
          directives: const[For]
        )

        class DisplayComponent {
          String myName = 'Alice';
          List&lt;String&gt; friendNames;

          DisplayComponent(FriendsService friendsService) {
            friendNames = friendsService.names;
          }
        }

.l-main-section
  h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
  p.
    Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>If</code>.  The
    <code>If</code> directive adds or removes elements from the DOM based on the expression you provide.

  p See it in action by adding a paragraph at the end of your template

  pre.prettyprint.lang-html
    code.
      &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;

  p You'll also need to add the If directive so Angular knows to include it.

    pre.prettyprint.lang-dart
      code.
        directives: const[For, If]
  p.
    As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
    Remove two items from the list, reload your browser, and see that the message no longer displays.

  p Here's our final <code>show_properties.dart</code>

  pre.prettyprint.lang-dart
    code.
      part of displaying_data;

      @Component(
         selector: 'display',
         injectables: const[FriendsService]
       )
       @View(
         template: '''
       &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;
       &lt;p *if=&quot;friendNames.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
       ''',
         directives: const[For, If]
       )
       class DisplayComponent {
         String myName = 'Alice';
         List&lt;String&gt; friendNames;
                    DisplayComponent(FriendsService friendsService) {
           friendNames = friendsService.names;
         }
       }

  p And the accompanying <code>main.dart</code>:

  pre.prettyprint.lang-dart
    code.
      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);
      }