diff --git a/public/docs/dart/latest/guide/displaying-data-example1.png b/public/docs/dart/latest/guide/displaying-data-example1.png
new file mode 100644
index 0000000000..d0f02a6464
Binary files /dev/null and b/public/docs/dart/latest/guide/displaying-data-example1.png differ
diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade
index 3513e5a7c1..185b1aed4f 100644
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@@ -1,334 +1,304 @@
.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:
- div(align='center')
- img(src='displaying-data-example1.png')
+ 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:
+ div(align='center')
+ img(src='displaying-data-example1.png')
.l-main-section
- h2#section-create-an-entry-point Create an entry point
+ h2#section-create-an-entry-point Create an entry point
- p Open your favorite editor and create a show-properties.html file with the content:
- pre.prettyprint.linenums.lang-html
- code.
- //ES5
- <display></display>
-
- pre.prettyprint.linenums.lang-html
- code.
- //TypeScript
- <display></display>
-
- p
- | The <display> 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.
+ p Open your favorite editor and create a show-properties.html file with the content:
+ pre.prettyprint.lang-html
+ code.
+ //show-properties.html
+ <display></display>
+ p
+ | The <display> 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 {{ }}.
+ 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 {{ }}.
- p To see this working, create another file, show-properties.js, and add the following:
+ p To see this working, create another file, show-properties.dart, and add the following:
- pre.prettyprint.linenums.lang-javascript
- code.
- // ES5
- function DisplayComponent() {
- this.myName = "Alice";
+ pre.prettyprint.linenums.lang-javascript
+ code.
+ // Dart
+ part of displaying_data;
+
+ @Component(
+ selector: 'display'
+ )
+
+ @View(
+ template: '''
+ <p>My name: {{ myName }}</p>
+ '''
+ )
+ class DisplayComponent {
+ String myName = 'Alice';
}
- DisplayComponent.annotations = [
- new angular.Component({
- selector: "display"
- }),
- new angular.View({
- template:
- '<p>My name: {{ myName }}</p>',
- directives: [angular.For, angular.If]
- })
- ];
- pre.prettyprint.linenums.lang-typescript
- code.
- // TypeScript
- import {Component, View, bootstrap, For} from 'angular2/angular2';
+ 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.
+ <p>My name: {{ myName }}</p>
- @Component({
- selector: 'display'
- })
- @View({
- template: `
- <p>My name: {{ myName }}</p>
- `,
- directives: [For]
- })
- class DisplayComponent {
- myName: string;
- todos: Array<string>;
+ p.
+ Angular will automatically pull the value of myName and insert it into the browser and
+ update it whenever it changes without work on your part.
- constructor() {
- this.myName = "Alice";
- }
- }
+ p.
+ One thing to notice here is that though you've written your DisplayComponent 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 DisplayComponent 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 DisplayComponent that has
+ just one property, myName.
+
+ .callout.is-helpful
+ header Note
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.
- <p>My name: {{ myName }}</p>
+ While you've used template: to specify an inline view, for larger templates you'd
+ want to move them to a separate file and load them with templateUrl: instead.
- p.
- Angular will automatically pull the value of myName and insert it into the browser and
- update it whenever it changes without work on your part.
+ p So you can see Angular dynamically update content, add a line after
- p.
- One thing to notice here is that though you've written your DisplayComponent 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 DisplayComponent 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 DisplayComponent that has
- just one property, myName.
-
- .callout.is-helpful
- header Note
- p.
- While you've used template: to specify an inline view, for larger templates you'd
- want to move them to a separate file and load them with templateUrl: instead.
-
- p So you can see Angular dynamically update content, add a line after
-
- pre.prettyprint.lang-html
- code.
- <p>My name: {{ myName }}</p>
- p to this:
- pre.prettyprint.lang-html
- code.
- <p>Current time: {{ time }}</p>
- p.
- Then give the DisplayComponent a starting value for time and a call to update time
- via setInterval.
-
- pre.prettyprint.lang-javascript
- code.
- setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000);
- 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-javascript
- code.
- //ES5
- function DisplayComponent() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- pre.prettyprint.lang-typescript
- code.
- //Typescript
- constructor() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- p.
- You can then use this array in your template with the for directive to create copies of DOM elements
- with one for each item in the array.
- pre.prettyprint.lang-javascript
- code.
- //ES5
- template:
- '<p>My name: {{ myName }}</p>' +
- '<p>Friends:</p>' +
- '<ul>' +
- '<li *for="#name of names">' +
- '{{ name }}' +
- '</li>' +
- '</ul>',
-
- pre.prettyprint.lang-typescript
- code.
- //Typescript
- template: `
+ pre.prettyprint.lang-html
+ code.
<p>My name: {{ myName }}</p>
- <p>Friends:</p>
- <ul>
- <li *for="#name of names">
- {{ name }}
- </li>
- </ul>
- `,
- p.
- To make this work, you'll also need to add the angular.For directive used by the template so
- that Angular knows to include it:
+ p to this:
+ pre.prettyprint.lang-html
+ code.
+ <p>Current time: {{ time }}</p>
+ p.
+ Then give the DisplayComponent a starting value for time and a call to update time
+ via setInterval.
+
+ 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.
- pre.prettyprint.lang-javascript
- code.
- //ES5
- directives: [angular.For]
- pre.prettyprint.lang-typescript
- code.
- //Typescript
- import {Component, View, bootstrap, For} from
- ...
- directives: [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 <li>. 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.
- //HTML
- <li *for="#name of names">
- {{ name }}
- </li>
- p The way to read this is:
- ul
- li.
- *for : create a DOM element for each item in an
- iterable
- like an array
- li #name : refer to individual values of the iterable as 'name'
- li of names : the iterable to use is called 'names' 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 FriendsService class to provide the model with the list of friends.
- pre.prettyprint.lang-javascript
- code.
- function FriendsService() {
- this.names = ["Alice", "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-javascript
- code.
- function DisplayComponent(friends) {
- this.myName = "Alice";
- this.names = friends.names;
- }
- p And then make FriendsService available to dependency injection
- pre.prettyprint.lang-javascript
- code.
- DisplayComponent.annotations = [
- new angular.Component({
- selector: "display",
- injectables: [FriendsService]
- }),
- ...
- DisplayComponent.parameters = [[FriendsService]];
- .callout.is-helpful
- header ES5 Note
- p.
- The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
- working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
- pre.prettyprint.lang-javascript
- code.
- //ES5
- function FriendsService() {
- this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- function DisplayComponent(friends) {
- this.myName = "Alice";
- this.names = friends.names;
- }
- DisplayComponent.annotations = [
- new angular.Component({
- selector: "display",
- injectables: [FriendsService]
- }),
- new angular.View({
- template: '{{ myName }} <ul> <li *for="#name of names"<{{ name }}>/li< >/ul<',
- directives: [angular.For, angular.If]
- })
- ];
- DisplayComponent.parameters = [[FriendsService]];
- document.addEventListener("DOMContentLoaded", function() {
- angular.bootstrap(DisplayComponent);
- });
- pre.prettyprint.lang-typescript
- code.
- //TypeScript
- import {Component, View, bootstrap, For} from
- ...
- directives: [For]
+ 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<String> friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
+ ...
+ }
+
+ p.
+ You can then use this array in your template with the for directive to create copies of DOM elements
+ with one for each item in the array.
+ pre.prettyprint.lang-dart
+ code.
+ //Dart
+ template: '''
+ <p>My name: {{ myName }}</p>
+ <p>Friends:</p>
+ <ul>
+ <li *for="#name of friendNames">
+ {{ name }}
+ </li>
+ </ul>
+ ''',
+
+ p.
+ To make this work, you'll also need to add the angular.For directive used by
+ the template to show_properties.dart 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 <li>. 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.
+ <li *for="#name of friendNames">
+ {{ name }}
+ </li>
+
+ p The way to read this is:
+ ul
+ li.
+ *for : create a DOM element for each item in an
+ iterable
+ like an array
+ li #name : refer to individual values of the iterable as 'name'
+ li of friendNames : 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#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 If. The
- If 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.
- <p *if="names.length > 3">You have many friends!</p>
- p You'll also need to add the If directive so Angular knows to include it.
- p [TODO: CODE]
- 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.
- pre.prettyprint.lang-javascript
- code.
- //ES5
- function DisplayComponent() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- DisplayComponent.annotations = [
- new angular.Component({
- selector: "display"
- }),
- new angular.View({
- template:
- '<p>My name: {{ myName }}</p>' +
- '<p>Friends:</p>' +
- '<ul>' +
- '<li *for="#name of names">' +
- '{{ name }}' +
- '</li>' +
- '</ul>' +
- '<p *if="names.length > 3">You have many friends!</p>',
- directives: [angular.For, angular.If]
- })
- ];
- pre.prettyprint.lang-typescript
- code.
- //TypeScript
- import {Component, View, bootstrap, For, If} from 'angular2/angular2';
- @Component({
- selector: 'display'
- })
- @View({
- template: `
- <p>My name: {{ myName }}</p>
- <p>Friends:</p>
- <ul>
- <li *for="#name of names">
- {{ name }}
- </li>
- </ul>
- <p *if="names.length > 3">You have many friends!</p>
- `,
- directives: [For, If]
- })
- class DisplayComponent {
- myName: string;
- todos: Array;
- constructor() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
- }
- }
\ No newline at end of file
+ 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 FriendsService class to provide the model with the list of friends. We'll put this in a new
+ friends_service.dart under web/, and add part friends_service.dart
+ to main.dart. Here's what the class looks like:
+
+ pre.prettyprint.lang-dart
+ code.
+ part of displaying_data;
+
+ class FriendsService {
+ List<String> 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: '''
+ <p>My name: {{ myName }}</p>
+ <p>Friends:</p>
+ <ul>
+ <li *for="#name of friendNames">
+ {{ name }}
+ </li>
+ </ul>
+ ''',
+ directives: const[For]
+ )
+
+ class DisplayComponent {
+ String myName = 'Alice';
+ List<String> 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 If. The
+ If 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.
+ <p *if="names.length > 3">You have many friends!</p>
+
+ 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 show_properties.dart
+
+ pre.prettyprint.lang-dart
+ code.
+ part of displaying_data;
+
+ @Component(
+ selector: 'display',
+ injectables: const[FriendsService]
+ )
+ @View(
+ template: '''
+ <p>My name: {{ myName }}</p>
+ <p>Friends:</p>
+ <ul>
+ <li *for="#name of friendNames">
+ {{ name }}
+ </li>
+ </ul>
+ <p *if="friendNames.length > 3">You have many friends!</p>
+ ''',
+ directives: const[For, If]
+ )
+ class DisplayComponent {
+ String myName = 'Alice';
+ List<String> friendNames;
+ DisplayComponent(FriendsService friendsService) {
+ friendNames = friendsService.names;
+ }
+ }
+
+ p And the accompanying main.dart:
+
+ 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);
+ }
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade
index 329202fc0e..70d3aa4a81 100644
--- a/public/docs/dart/latest/guide/setup.jade
+++ b/public/docs/dart/latest/guide/setup.jade
@@ -30,7 +30,7 @@
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
- In the web/ directory for you app, create an index.html file and add the Angular library
+ In the web/ directory for your app, create an index.html file and add the Angular library
tags and a main.dart file where you'll build your first component.
p.