iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(devguide): Dart displaying-data chapter

This commit is contained in:
Naomi Black 2015-04-21 23:52:31 -07:00
parent 8b730d23b3
commit 7a87fd32d9
3 changed files with 286 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/docs/dart/latest/guide/displaying-data-example1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

332
public/docs/dart/latest/guide/displaying-data.jade
View File

@ -13,17 +13,11 @@
.l-main-section .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: p Open your favorite editor and create a <code>show-properties.html</code> file with the content:
pre.prettyprint.linenums.lang-html pre.prettyprint.lang-html
code. code.
//ES5 //show-properties.html
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
pre.prettyprint.linenums.lang-html
code.
//TypeScript
&lt;display&gt;&lt;/display&gt;
p p
| The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application. | 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 | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
@ -35,47 +29,26 @@
| The simple method for binding text into templates is through interpolation where you put the name of a property | The simple method for binding text into templates is through interpolation where you put the name of a property
| inside <strong>{{ }}</strong>. | inside <strong>{{ }}</strong>.
p To see this working, create another file, <code>show-properties.js</code>, and add the following: p To see this working, create another file, <code>show-properties.dart</code>, and add the following:
pre.prettyprint.linenums.lang-javascript pre.prettyprint.linenums.lang-javascript
code. code.
// ES5 // Dart
function DisplayComponent() { part of displaying_data;
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.Component({
selector: "display"
}),
new angular.View({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];
pre.prettyprint.linenums.lang-typescript @Component(
code.
// TypeScript
import {Component, View, bootstrap, For} from 'angular2/angular2';
@Component({
selector: 'display' selector: 'display'
}) )
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For]
})
class DisplayComponent {
myName: string;
todos: Array&lt;string&gt;;
constructor() { @View(
this.myName = "Alice"; template: '''
} &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
'''
)
class DisplayComponent {
String myName = 'Alice';
} }
p. p.
You've just defined a component that encompases a view and controller for the app. The view You've just defined a component that encompases a view and controller for the app. The view
defines a template: defines a template:
@ -117,80 +90,75 @@
Then give the <code>DisplayComponent</code> a starting value for time and a call to update time Then give the <code>DisplayComponent</code> a starting value for time and a call to update time
via <code>setInterval</code>. via <code>setInterval</code>.
pre.prettyprint.lang-javascript pre.prettyprint.lang-dart
code. code.
setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000); 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. p Reload the page in your browser and you'll now see the seconds updating automatically.
.l-main-section .l-main-section
h2#Create-an-array Create an array property and use For on the view 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. p Moving up from a single property, create an array to display as a list.
pre.prettyprint.lang-javascript
pre.prettyprint.lang-dart
code. code.
//ES5 class DisplayComponent {
function DisplayComponent() { String myName = 'Alice';
this.myName = "Alice"; List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
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. p.
You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements 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. with one for each item in the array.
pre.prettyprint.lang-javascript pre.prettyprint.lang-dart
code. code.
//ES5 //Dart
template: template: &#39;&#39;&#39;
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
pre.prettyprint.lang-typescript
code.
//Typescript
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt; &lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt; &lt;li *for=&quot;#name of friendNames&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&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 so
that Angular knows to include it:
pre.prettyprint.lang-javascript 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. code.
//ES5 directives: const[For]
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 Reload and you've got your list of friends!
p. p.
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your 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 list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of
the DOM list. the DOM list.
p Let's look at the few lines that do the work again: p Let's look at the few lines that do the work again:
pre.prettyprint.lang-html pre.prettyprint.lang-html
code. code.
//HTML &lt;li *for=&quot;#name of friendNames&quot;&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
p The way to read this is: p The way to read this is:
ul ul
li. li.
@ -198,137 +166,139 @@
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
like an array like an array
li <code>#name</code> : refer to individual values of the iterable as 'name' li <code>#name</code> : refer to individual values of the iterable as 'name'
li <code>of names</code> : the iterable to use is called 'names' in the current controller 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. p Using this syntax, you can build UI lists from any iterable object.
.l-main-section .l-main-section
h2#Create-a-class Create a class for the array property and inject into component h2#Create-a-class Create a class for the array property and inject into component
p. p.
Before we get too much further, we should mention that putting our model (array) directly in our controller isn't 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 proper form. We should separate the concerns by having another class serve the role of model and inject it into
the controller. the controller.
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
pre.prettyprint.lang-javascript 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. code.
function FriendsService() { part of displaying_data;
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
p. p.
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of 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. names in DisplayComponent to the names provided by the service you passed in.
pre.prettyprint.lang-javascript
pre.prettyprint.lang-dart
code. code.
function DisplayComponent(friends) { DisplayComponent(FriendsService friendsService) {
this.myName = "Alice"; friendNames = friendsService.names;
this.names = friends.names;
} }
p And then make FriendsService available to dependency injection p And then make FriendsService available to dependency injection
pre.prettyprint.lang-javascript
pre.prettyprint.lang-dart
code. code.
DisplayComponent.annotations = [ part of displaying_data;
new angular.Component({
selector: "display", @Component(
injectables: [FriendsService] selector: 'display',
}), injectables: const[FriendsService]
... )
DisplayComponent.parameters = [[FriendsService]]; @View(
.callout.is-helpful template: &#39;&#39;&#39;
header ES5 Note &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p. &lt;p&gt;Friends:&lt;/p&gt;
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're &lt;ul&gt;
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon. &lt;li *for=&quot;#name of friendNames&quot;&gt;
pre.prettyprint.lang-javascript {{ name }}
code. &lt;/li&gt;
//ES5 &lt;/ul&gt;
function FriendsService() { ''',
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; directives: const[For]
)
class DisplayComponent {
String myName = 'Alice';
List&lt;String&gt; friendNames;
DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names;
} }
function DisplayComponent(friends) {
this.myName = "Alice";
this.names = friends.names;
} }
DisplayComponent.annotations = [
new angular.Component({
selector: "display",
injectables: [FriendsService]
}),
new angular.View({
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;',
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]
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
p. p.
Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>If</code>. The 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. <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 p See it in action by adding a paragraph at the end of your template
pre.prettyprint.lang-html pre.prettyprint.lang-html
code. code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &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. p You'll also need to add the If directive so Angular knows to include it.
p [TODO: CODE]
pre.prettyprint.lang-dart
code.
directives: const[For, If]
p. p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. 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. Remove two items from the list, reload your browser, and see that the message no longer displays.
pre.prettyprint.lang-javascript
p Here's our final <code>show_properties.dart</code>
pre.prettyprint.lang-dart
code. code.
//ES5 part of displaying_data;
function DisplayComponent() {
this.myName = "Alice"; @Component(
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; selector: 'display',
} injectables: const[FriendsService]
DisplayComponent.annotations = [ )
new angular.Component({ @View(
selector: "display" template: '''
}),
new angular.View({
template:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39; +
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
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: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt; &lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt; &lt;li *for=&quot;#name of friendNames&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &lt;p *if=&quot;friendNames.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`, ''',
directives: [For, If] directives: const[For, If]
}) )
class DisplayComponent { class DisplayComponent {
myName: string; String myName = 'Alice';
todos: Array<string>; List&lt;String&gt; friendNames;
constructor() { DisplayComponent(FriendsService friendsService) {
this.myName = "Alice"; friendNames = friendsService.names;
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
} }
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);
}

2
public/docs/dart/latest/guide/setup.jade
View File

@ -30,7 +30,7 @@
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
p. p.
In the <code>web/</code> directory for you app, create an <code>index.html</code> file and add the Angular library In the <code>web/</code> directory for your app, create an <code>index.html</code> file and add the Angular library
tags and a <code>main.dart</code> file where you'll build your first component. tags and a <code>main.dart</code> file where you'll build your first component.
p. p.