From 7a87fd32d9f88d30e2f4f6831ef24b98362f1456 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Tue, 21 Apr 2015 23:52:31 -0700 Subject: [PATCH] docs(devguide): Dart displaying-data chapter --- .../latest/guide/displaying-data-example1.png | Bin 0 -> 12259 bytes .../dart/latest/guide/displaying-data.jade | 600 +++++++++--------- public/docs/dart/latest/guide/setup.jade | 2 +- 3 files changed, 286 insertions(+), 316 deletions(-) create mode 100644 public/docs/dart/latest/guide/displaying-data-example1.png 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 0000000000000000000000000000000000000000..d0f02a6464e49f711ae5d36c7993ba1bf7e945a5 GIT binary patch literal 12259 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 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.