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

update dart guide

This commit is contained in:
Alex Wolfe 2015-05-19 09:21:11 -07:00
parent 363373d405
commit ed597245ee
4 changed files with 377 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,48 +16,44 @@
a <code>web/index.html</code> file, and a <code>web/index.html</code> file, and
a <code>pubspec.yaml</code> file: a <code>pubspec.yaml</code> file:
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="dart") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data;
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
part 'show_properties.dart'; part 'show_properties.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
pre.prettyprint.lang-html(data-name="html") code-pane(language="html" name="index.html" format="linenums").
code. &lt;!-- web/index.html --&gt;
&lt;!-- web/index.html --&gt; &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt;
&lt;display&gt;&lt;/display&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.22
browser: any
&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;
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data
description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
p. p.
All of this code should look familiar from the previous page, All of this code should look familiar from the previous page,
except for the <code>library</code> and <code>part</code> statements except for the <code>library</code> and <code>part</code> statements
@ -78,30 +74,28 @@
named <code>show_properties.dart</code>, named <code>show_properties.dart</code>,
and add the following: and add the following:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // web/show_properties.dart
// web/show_properties.dart part of displaying_data;
part of displaying_data;
@Component( @Component(
selector: 'display' selector: 'display'
) )
@View( @View(
template: ''' template: '''
&lt;p>My name: {{ myName }}&lt/p> &lt;p>My name: {{ myName }}&lt/p>
''' '''
) )
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
} }
p. p.
You've just defined a component that encompasses a view and controller for the app. The view You've just defined a component that encompasses a view and controller for the app. The view
defines a template: defines a template:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p. p.
Angular will automatically pull the value of <code>myName</code> and Angular will automatically pull the value of <code>myName</code> and
@ -134,17 +128,15 @@
Add a second line to the template, Add a second line to the template,
so you can see Angular dynamically update content: so you can see Angular dynamically update content:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
&lt;p&gt;Current time: {{ time }}&lt;/p&gt;
p. p.
Then give the <code>DisplayComponent</code> a starting value for time and Then give the <code>DisplayComponent</code> a starting value for time and
a call to update time a call to update time
via <code>setInterval</code>: via <code>setInterval</code>:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code.
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
String time; String time;
@ -166,44 +158,41 @@
h2#Create-an-array Display an iterable using *for h2#Create-an-array Display an iterable using *for
p Moving up from a single value, create a property that's a list of values. p Moving up from a single value, create a property that's a list of values.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. class DisplayComponent {
class DisplayComponent { String myName = 'Alice';
String myName = 'Alice'; List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; }
}
p. p.
You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
with one for each item in the list. with one for each item in the list.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @View(
@View( template: '''
template: ''' &lt;p>My name: {{ myName }}&lt;/p>
&lt;p>My name: {{ myName }}&lt;/p> &lt;p>Friends:&lt;/p>
&lt;p>Friends:&lt;/p> &lt;ul>
&lt;ul> &lt;li *for="#name of friendNames">
&lt;li *for="#name of friendNames"> {{ name }}
{{ name }} &lt;/li>
&lt;/li> &lt;/ul>
&lt;/ul> '''
''' )
)
p. p.
To make this work, you'll also need to add the Angular <code>For</code> directive used by To make this work, you'll also need to add the Angular <code>For</code> directive used by
the template to <code>show_properties.dart</code>, so that Angular knows to include it. the template to <code>show_properties.dart</code>, so that Angular knows to include it.
Add <code>For</code> using the optional <code>directives</code> parameter, Add <code>For</code> using the optional <code>directives</code> parameter,
which contains a list of directives: which contains a list of directives:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @View(
@View( template: '''
template: ''' // ...HTML...
// ...HTML... ''',
''', directives: const[For]
directives: const[For] )
)
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
@ -213,11 +202,10 @@
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 code-example(language="html" format="linenums").
code. &lt;li *for=&quot;#name of friendNames&quot;&gt;
&lt;li *for=&quot;#name of friendNames&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
@ -241,14 +229,13 @@
Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like: <code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // web/friends_service.dart
// web/friends_service.dart part of displaying_data;
part of displaying_data;
class FriendsService { class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
.callout.is-helpful .callout.is-helpful
header Note header Note
@ -260,29 +247,27 @@
First add a FriendsService parameter to the constructor. First add a FriendsService parameter to the constructor.
Then set <code>friendNames</code> to the names provided by the service. Then set <code>friendNames</code> to the names provided by the service.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // In web/show_properties.dart
// In web/show_properties.dart class DisplayComponent {
class DisplayComponent { String myName = 'Alice';
String myName = 'Alice'; List<String> friendNames;
List<String> friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names; friendNames = friendsService.names;
}
} }
}
p. p.
Next, make FriendsService available to dependency injection Next, make FriendsService available to dependency injection
by adding an <code>injectables</code> parameter to DisplayComponent's by adding an <code>injectables</code> parameter to DisplayComponent's
<code>@Component</code> annotation: <code>@Component</code> annotation:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @Component(
@Component( selector: 'display',
selector: 'display', injectables: const[FriendsService]
injectables: const[FriendsService] )
)
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally display data using *if h2#Conditionally-displaying-data-with-If Conditionally display data using *if
@ -292,17 +277,15 @@
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 code-example(language="html").
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. p.
Also add <code>If</code> to the list of directives, Also add <code>If</code> to the list of directives,
so Angular knows to include it: so Angular knows to include it:
pre.prettyprint.lang-dart code-example(language="dart").
code. directives: const[For, If]
directives: const[For, If]
p. p.
The list current has 5 items, so if you run the app you'll see the message The list current has 5 items, so if you run the app you'll see the message
congratulating you on your many friends. congratulating you on your many friends.
@ -313,131 +296,124 @@
p Here's the final code. p Here's the final code.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="show_properties.dart") code-pane(language="dart" name="show_properties.dart" format="linenums").
code. // web/show_properties.dart
// web/show_properties.dart part of displaying_data;
part of displaying_data;
@Component( @Component(
selector: 'display', selector: 'display',
injectables: const[FriendsService] injectables: const[FriendsService]
) )
@View( @View(
template: ''' template: '''
&lt;p>My name: {{ myName }}&lt;/p> &lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p> &lt;p>Friends:&lt;/p>
&lt;ul> &lt;ul>
&lt;li *for="#name of friendNames"> &lt;li *for="#name of friendNames">
{{ name }} {{ name }}
&lt;/li> &lt;/li>
&lt;/ul> &lt;/ul>
''', ''',
directives: const[For] directives: const[For]
) )
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
List&lt;String> friendNames; List&lt;String> friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names; friendNames = friendsService.names;
}
} }
pre.prettyprint.lang-dart(data-name="friends_service.dart") }
code. code-pane(language="dart" name="friends_service.dart" format="linenums").
// web/friends_service.dart // web/friends_service.dart
part of displaying_data; part of displaying_data;
class FriendsService { class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
pre.prettyprint.lang-dart(data-name="main.dart") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data;
import 'dart:async'; import 'dart:async';
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
part 'show_properties.dart'; part 'show_properties.dart';
part 'friends_service.dart'; part 'friends_service.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
pre.prettyprint.lang-html(data-name="html") code-pane(language="html" name="index.html" format="linenums").
code. &lt;!-- web/index.html --&gt;
&lt;!-- web/index.html --&gt; &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt;
&lt;display&gt;&lt;/display&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 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;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml") code-pane(language="yaml" name="pubspec.yaml" format="linenums").
code. # pubspec.yaml
# pubspec.yaml name: displaying_data
name: displaying_data description: Dart version of Angular 2 example, Displaying Data
description: Dart version of Angular 2 example, Displaying Data version: 0.0.1
version: 0.0.1 dependencies:
dependencies: angular2: 2.0.0-alpha.22
angular2: 2.0.0-alpha.22 browser: any
browser: any
.l-main-section .l-main-section
h2#section-explanations Explanations h2#section-explanations Explanations
.l-sub-section .l-sub-section
h3 Using multiple Dart files in an Angular app h3 Using multiple Dart files in an Angular app
p. p.
Dart offers a few ways to implement an app in multiple files. 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; 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. each Dart file under <code>web</code> is part of that library.
p. p.
To let the code in <code>main.dart</code> To let the code in <code>main.dart</code>
use the code in <code>show_properties.dart</code>, use the code in <code>show_properties.dart</code>,
declare a library in <code>main.dart</code>. declare a library in <code>main.dart</code>.
Then make <code>show_properties.dart</code> part of that library. Then make <code>show_properties.dart</code> part of that library.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="main library file") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data; // imports...
// imports... part 'show_properties.dart';
part 'show_properties.dart'; // Code goes here...
// Code goes here... code-pane(language="dart" name="show_properties.dar" format="linenums").
pre.prettyprint.lang-dart(data-name="additional library file") // web/show_properties.dart
code. part of displaying_data;
// web/show_properties.dart // Code goes here...
part of displaying_data;
// Code goes here...
p. p.
Another way to split Dart code is to Another way to split Dart code is to
define multiple libraries in a single package. define multiple libraries in a single package.
The additional libraries go under a <code>lib</code> directory The additional libraries go under a <code>lib</code> directory
parallel to <code>web</code>. parallel to <code>web</code>.
<!-- PENDING: show or point to an example --> <!-- PENDING: show or point to an example -->
p. p.
Yet another approach, often used when some of the code is highly reusable, 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. is to split the code into libraries in two or more packages.
p. p.
For more information on implementing Dart libraries, see 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> <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
in the in the
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>. <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.

58
public/docs/dart/latest/guide/making-components.jade
View File

@ -10,41 +10,39 @@
you can create a parent you can create a parent
component that uses a <code>&lt;child&gt;</code> component like so: component that uses a <code>&lt;child&gt;</code> component like so:
pre.prettyprint.linenums.lang-dart code-example(language="dart" format="linenums").
code. part of making_components;
part of making_components;
@Component( @Component(
selector: 'parent' selector: 'parent'
) )
@View( @View(
template: ''' template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span> <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
''', ''',
directives: const[<span class="pnk">ChildComponent</span>] directives: const[<span class="pnk">ChildComponent</span>]
) )
class ParentComponent { class ParentComponent {
String message = "I'm the parent"; String message = "I'm the parent";
} }
p You then just need to write the <code>ChildComponent</code> class to make it work: p You then just need to write the <code>ChildComponent</code> class to make it work:
pre.prettyprint.linenums.lang-dart code-example(language="dart" format="linenums").
code. part of making_components;
part of making_components;
@Component( @Component(
selector: 'child' selector: 'child'
) )
@View( @View(
template: ''' template: '''
&lt;p&gt; {{ message }} &lt;/p&gt; &lt;p&gt; {{ message }} &lt;/p&gt;
''' '''
) )
class ChildComponent { class ChildComponent {
String message = "I'm the child"; String message = "I'm the child";
} }
//p. //p.
[TODO: Motivate communication between components with iterator example that passes index to the child] [TODO: Motivate communication between components with iterator example that passes index to the child]

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

@ -24,15 +24,14 @@
To use Angular2 in your app, include angular2 as a dependency in To use Angular2 in your app, include angular2 as a dependency in
your app's <b>pubspec.yaml</b> file. For example: your app's <b>pubspec.yaml</b> file. For example:
pre.prettyprint.lang-yaml code-example(language="yaml").
code. # pubspec.yaml
# pubspec.yaml name: getting_started
name: getting_started description: Dart version of Angular 2 example, Getting Started
description: Dart version of Angular 2 example, Getting Started version: 0.0.1
version: 0.0.1 dependencies:
dependencies: angular2: 2.0.0-alpha.22
angular2: 2.0.0-alpha.22 browser: any
browser: any
p. p.
Run <b>pub get</b> to download the packages your app depends on. Run <b>pub get</b> to download the packages your app depends on.
(<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a> (<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
@ -51,26 +50,25 @@
and creating a top-level <code>main()</code> function that calls and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function. Angular's <code>bootstrap()</code> function.
pre.prettyprint.lang-dart code-example(language="javascript").
code. // web/main.dart
// web/main.dart import 'package:angular2/angular2.dart';
import 'package:angular2/angular2.dart'; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@View( @View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;' template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
) )
class AppComponent { class AppComponent {
} }
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent); bootstrap(AppComponent);
} }
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an HTML file h2#section-create-an-entry-point Create an HTML file
@ -79,20 +77,19 @@
Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
and call <code>main.dart</code>. and call <code>main.dart</code>.
pre.prettyprint.lang-html code-example(language="html").
code. &lt;!-- web/index.html -->
&lt;!-- web/index.html --> &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&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;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt; &lt;/body&gt;
&lt;/body&gt; &lt;/html&gt
&lt;/html&gt
.l-main-section .l-main-section
h2#section-run-it Run the app! h2#section-run-it Run the app!

229
public/docs/dart/latest/guide/user-input.jade
View File

@ -5,9 +5,8 @@
p. p.
You can specify the event handler—a method in the component controller—like this: You can specify the event handler—a method in the component controller—like this:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input (keyup)="myControllerMethod()"&gt;
&lt;input (keyup)="myControllerMethod()"&gt;
p. p.
As in previous examples, you can make element references available to As in previous examples, you can make element references available to
other parts of the template as a local other parts of the template as a local
@ -17,10 +16,9 @@
<!-- PENDING: make sure we use recommended word separation scheme. <!-- PENDING: make sure we use recommended word separation scheme.
my-name doesn't work, but my_name does. Would myName work? --> my-name doesn't work, but my_name does. Would myName work? -->
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #myname (keyup)&gt;
&lt;input #myname (keyup)&gt; &lt;p&gt;{{myname.value}}&lt;/p&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable). p.text-body(ng-non-bindable).
In that example, <code>#myname</code> creates a local variable in the template that In that example, <code>#myname</code> creates a local variable in the template that
@ -46,16 +44,15 @@
Then add a method that adds new items Then add a method that adds new items
to the list. to the list.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. class TodoList {
class TodoList { List&lt;String&gt; todos =
List&lt;String&gt; todos = ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
addTodo(String todo) { addTodo(String todo) {
todos.add(todo); todos.add(todo);
}
} }
}
.callout.is-helpful .callout.is-helpful
header Production Best Practice header Production Best Practice
@ -73,13 +70,12 @@
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
its text to the value. its text to the value.
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;ul&gt;
&lt;ul&gt; &lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; {{ todo }}
{{ todo }} &lt;/li&gt;
&lt;/li&gt; &lt;/ul&gt;
&lt;/ul&gt;
.l-main-section .l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click h2#section-add-todos-to-the-list Add todos to the list via button click
@ -87,18 +83,16 @@
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here. variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #todotext&gt;
&lt;input #todotext&gt;
p. p.
Specify the target of the click event binding as your controller's Specify the target of the click event binding as your controller's
<code>addTodo()</code> method and pass <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, it the value. Since you created a reference called <code>todotext</code>,
you can get the value with <code>todotext.value.</code> you can get the value with <code>todotext.value.</code>
pre.prettyprint.lang-html code-example(language="html").
code. &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p. p.
To make pressing Enter do something useful, To make pressing Enter do something useful,
@ -107,13 +101,59 @@
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>, <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library. so be sure to import that library.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="todo_list.dart") code-pane(language="dart" name="todo_list.dart" format="linenums").
code. // In the template:
// In the template: &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
// In the component controller class:
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
code-pane(language="dart" name="main.dart" format="linenums").
library user_input;
import 'dart:html';
...
.l-main-section
h2#section-final-code Final code
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// web/todo_list.dart
part of user_input;
@Component(
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: r'''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''',
directives: const[For]
)
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
addTodo(String todo) {
todos.add(todo);
}
// In the component controller class:
doneTyping(KeyboardEvent event) { doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) { if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target; InputElement e = event.target;
@ -121,96 +161,43 @@
e.value = null; e.value = null;
} }
} }
pre.prettyprint.lang-dart(data-name="main.dart") }
code. code-pane(language="dart" name="main.dart" format="linenums").
library user_input; // web/main.dart
library user_input;
import 'dart:html'; import 'dart:html';
...
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
.l-main-section part 'todo_list.dart';
h2#section-final-code Final code
.code-box main() {
pre.prettyprint.lang-dart(data-name="todo_list.dart") reflector.reflectionCapabilities = new ReflectionCapabilities();
code. bootstrap(TodoList);
// web/todo_list.dart }
part of user_input; code-pane(language="html" name="index.html" format="linenums").
&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;
@Component( &lt;todo-list&gt;&lt;/todo-list&gt;
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: r'''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt; &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt; &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
''', &lt;/body&gt;
directives: const[For] &lt;/html&gt;
) code-pane(language="yaml" name="pubspec.yaml" format="linenums").
class TodoList { # pubspec.yaml
List&lt;String&gt; todos = name: user_input
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1
addTodo(String todo) { dependencies:
todos.add(todo); angular2: 2.0.0-alpha.22
} browser: any
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
// web/main.dart
library user_input;
import 'dart:html';
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 'todo_list.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
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;todo-list&gt;&lt;/todo-list&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: user_input
description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any