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>pubspec.yaml</code> file:
.code-box
pre.prettyprint.lang-dart(data-name="dart")
code.
// web/main.dart
library displaying_data;
code-tabs
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
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 'show_properties.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
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;
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
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;
&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;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;
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.
All of this code should look familiar from the previous page,
except for the <code>library</code> and <code>part</code> statements
@ -78,30 +74,28 @@
named <code>show_properties.dart</code>,
and add the following:
pre.prettyprint.lang-dart
code.
// web/show_properties.dart
part of displaying_data;
code-example(language="dart" format="linenums").
// web/show_properties.dart
part of displaying_data;
@Component(
selector: 'display'
)
@View(
template: '''
&lt;p>My name: {{ myName }}&lt/p>
'''
)
class DisplayComponent {
String myName = 'Alice';
}
@Component(
selector: 'display'
)
@View(
template: '''
&lt;p>My name: {{ myName }}&lt/p>
'''
)
class DisplayComponent {
String myName = 'Alice';
}
p.
You've just defined a component that encompasses 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;
code-example(language="html").
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p.
Angular will automatically pull the value of <code>myName</code> and
@ -134,17 +128,15 @@
Add a second line to the template,
so you can see Angular dynamically update content:
pre.prettyprint.lang-html
code.
&lt;p&gt;Current time: {{ time }}&lt;/p&gt;
code-example(language="html").
&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.
code-example(language="dart" format="linenums").
class DisplayComponent {
String myName = 'Alice';
String time;
@ -166,44 +158,41 @@
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.
pre.prettyprint.lang-dart
code.
class DisplayComponent {
String myName = 'Alice';
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
code-example(language="dart" format="linenums").
class DisplayComponent {
String myName = 'Alice';
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
p.
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.
pre.prettyprint.lang-dart
code.
@View(
template: '''
&lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p>
&lt;ul>
&lt;li *for="#name of friendNames">
{{ name }}
&lt;/li>
&lt;/ul>
'''
)
code-example(language="dart" format="linenums").
@View(
template: '''
&lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p>
&lt;ul>
&lt;li *for="#name of friendNames">
{{ name }}
&lt;/li>
&lt;/ul>
'''
)
p.
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.
Add <code>For</code> using the optional <code>directives</code> parameter,
which contains a list of directives:
pre.prettyprint.lang-dart
code.
@View(
template: '''
// ...HTML...
''',
directives: const[For]
)
code-example(language="dart" format="linenums").
@View(
template: '''
// ...HTML...
''',
directives: const[For]
)
p Reload and you've got your list of friends!
p.
@ -213,11 +202,10 @@
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;
code-example(language="html" format="linenums").
&lt;li *for=&quot;#name of friendNames&quot;&gt;
{{ name }}
&lt;/li&gt;
p The way to read this is:
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
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
pre.prettyprint.lang-dart
code.
// web/friends_service.dart
part of displaying_data;
code-example(language="dart" format="linenums").
// web/friends_service.dart
part of displaying_data;
class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
.callout.is-helpful
header Note
@ -260,29 +247,27 @@
First add a FriendsService parameter to the constructor.
Then set <code>friendNames</code> to the names provided by the service.
pre.prettyprint.lang-dart
code.
// In web/show_properties.dart
class DisplayComponent {
String myName = 'Alice';
List<String> friendNames;
code-example(language="dart" format="linenums").
// In web/show_properties.dart
class DisplayComponent {
String myName = 'Alice';
List<String> friendNames;
DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names;
}
DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names;
}
}
p.
Next, make FriendsService available to dependency injection
by adding an <code>injectables</code> parameter to DisplayComponent's
<code>@Component</code> annotation:
pre.prettyprint.lang-dart
code.
@Component(
selector: 'display',
injectables: const[FriendsService]
)
code-example(language="dart" format="linenums").
@Component(
selector: 'display',
injectables: const[FriendsService]
)
.l-main-section
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:
pre.prettyprint.lang-html
code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
code-example(language="html").
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p.
Also add <code>If</code> to the list of directives,
so Angular knows to include it:
pre.prettyprint.lang-dart
code.
directives: const[For, If]
code-example(language="dart").
directives: const[For, If]
p.
The list current has 5 items, so if you run the app you'll see the message
congratulating you on your many friends.
@ -313,131 +296,124 @@
p Here's the final code.
.code-box
pre.prettyprint.lang-dart(data-name="show_properties.dart")
code.
// web/show_properties.dart
part of displaying_data;
code-tabs
code-pane(language="dart" name="show_properties.dart" format="linenums").
// web/show_properties.dart
part of displaying_data;
@Component(
selector: 'display',
injectables: const[FriendsService]
)
@View(
template: '''
&lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p>
&lt;ul>
&lt;li *for="#name of friendNames">
{{ name }}
&lt;/li>
&lt;/ul>
''',
directives: const[For]
)
class DisplayComponent {
String myName = 'Alice';
List&lt;String> friendNames;
@Component(
selector: 'display',
injectables: const[FriendsService]
)
@View(
template: '''
&lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p>
&lt;ul>
&lt;li *for="#name of friendNames">
{{ name }}
&lt;/li>
&lt;/ul>
''',
directives: const[For]
)
class DisplayComponent {
String myName = 'Alice';
List&lt;String> friendNames;
DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names;
}
DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names;
}
pre.prettyprint.lang-dart(data-name="friends_service.dart")
code.
// web/friends_service.dart
part of displaying_data;
}
code-pane(language="dart" name="friends_service.dart" format="linenums").
// web/friends_service.dart
part of displaying_data;
class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
// web/main.dart
library displaying_data;
class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
import 'dart:async';
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;
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';
part 'show_properties.dart';
part 'friends_service.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
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;
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
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;
&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
.l-main-section
h2#section-explanations Explanations
.l-sub-section
h3 Using multiple Dart files in an Angular app
p.
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;
each Dart file under <code>web</code> is part of that library.
p.
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;
each Dart file under <code>web</code> is part of that library.
p.
To let the code in <code>main.dart</code>
use the code in <code>show_properties.dart</code>,
declare a library in <code>main.dart</code>.
Then make <code>show_properties.dart</code> part of that library.
p.
To let the code in <code>main.dart</code>
use the code in <code>show_properties.dart</code>,
declare a library in <code>main.dart</code>.
Then make <code>show_properties.dart</code> part of that library.
.code-box
pre.prettyprint.lang-dart(data-name="main library file")
code.
// web/main.dart
library displaying_data;
// imports...
part 'show_properties.dart';
// Code goes here...
pre.prettyprint.lang-dart(data-name="additional library file")
code.
// web/show_properties.dart
part of displaying_data;
// Code goes here...
code-tabs
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
// imports...
part 'show_properties.dart';
// Code goes here...
code-pane(language="dart" name="show_properties.dar" format="linenums").
// web/show_properties.dart
part of displaying_data;
// Code goes here...
p.
Another way to split Dart code is to
define multiple libraries in a single package.
The additional libraries go under a <code>lib</code> directory
parallel to <code>web</code>.
<!-- PENDING: show or point to an example -->
p.
Another way to split Dart code is to
define multiple libraries in a single package.
The additional libraries go under a <code>lib</code> directory
parallel to <code>web</code>.
<!-- PENDING: show or point to an example -->
p.
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.
p.
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.
p.
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>
in the
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.
p.
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>
in the
<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
component that uses a <code>&lt;child&gt;</code> component like so:
pre.prettyprint.linenums.lang-dart
code.
part of making_components;
code-example(language="dart" format="linenums").
part of making_components;
@Component(
selector: 'parent'
)
@View(
template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
''',
directives: const[<span class="pnk">ChildComponent</span>]
)
class ParentComponent {
String message = "I'm the parent";
}
@Component(
selector: 'parent'
)
@View(
template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
''',
directives: const[<span class="pnk">ChildComponent</span>]
)
class ParentComponent {
String message = "I'm the parent";
}
p You then just need to write the <code>ChildComponent</code> class to make it work:
pre.prettyprint.linenums.lang-dart
code.
part of making_components;
code-example(language="dart" format="linenums").
part of making_components;
@Component(
selector: 'child'
)
@View(
template: '''
&lt;p&gt; {{ message }} &lt;/p&gt;
'''
)
class ChildComponent {
String message = "I'm the child";
}
@Component(
selector: 'child'
)
@View(
template: '''
&lt;p&gt; {{ message }} &lt;/p&gt;
'''
)
class ChildComponent {
String message = "I'm the child";
}
//p.
[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
your app's <b>pubspec.yaml</b> file. For example:
pre.prettyprint.lang-yaml
code.
# pubspec.yaml
name: getting_started
description: Dart version of Angular 2 example, Getting Started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
code-example(language="yaml").
# pubspec.yaml
name: getting_started
description: Dart version of Angular 2 example, Getting Started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
p.
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>
@ -51,26 +50,25 @@
and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function.
pre.prettyprint.lang-dart
code.
// web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
code-example(language="javascript").
// web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
)
class AppComponent {
}
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
)
class AppComponent {
}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}
.l-main-section
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
and call <code>main.dart</code>.
pre.prettyprint.lang-html
code.
&lt;!-- web/index.html -->
&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;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 src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt
code-example(language="html").
&lt;!-- web/index.html -->
&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;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 src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt
.l-main-section
h2#section-run-it Run the app!

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

@ -5,9 +5,8 @@
p.
You can specify the event handler—a method in the component controller—like this:
pre.prettyprint.lang-html
code.
&lt;input (keyup)="myControllerMethod()"&gt;
code-example(language="html").
&lt;input (keyup)="myControllerMethod()"&gt;
p.
As in previous examples, you can make element references available to
other parts of the template as a local
@ -17,10 +16,9 @@
<!-- PENDING: make sure we use recommended word separation scheme.
my-name doesn't work, but my_name does. Would myName work? -->
pre.prettyprint.lang-html
code.
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
code-example(language="html").
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable).
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
to the list.
pre.prettyprint.lang-dart
code.
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
code-example(language="dart" format="linenums").
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
addTodo(String todo) {
todos.add(todo);
}
addTodo(String todo) {
todos.add(todo);
}
}
.callout.is-helpful
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
its text to the value.
pre.prettyprint.lang-html
code.
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
code-example(language="html" format="linenums").
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
.l-main-section
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
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html
code.
&lt;input #todotext&gt;
code-example(language="html").
&lt;input #todotext&gt;
p.
Specify the target of the click event binding as your controller's
<code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>,
you can get the value with <code>todotext.value.</code>
pre.prettyprint.lang-html
code.
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
code-example(language="html").
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p.
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>,
so be sure to import that library.
.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
// In the template:
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// In the template:
&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) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
@ -121,96 +161,43 @@
e.value = null;
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
library user_input;
}
code-pane(language="dart" name="main.dart" format="linenums").
// 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
h2#section-final-code Final code
part 'todo_list.dart';
.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
// web/todo_list.dart
part of user_input;
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
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(
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;todo-list&gt;&lt;/todo-list&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);
}
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
&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: 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