diff --git a/public/docs/dart/latest/guide/user-input-example1.png b/public/docs/dart/latest/guide/user-input-example1.png
index 91e2dcfed1..822abea3c9 100644
Binary files a/public/docs/dart/latest/guide/user-input-example1.png and b/public/docs/dart/latest/guide/user-input-example1.png differ
diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade
index a32b6b8b9a..7936af57f2 100644
--- a/public/docs/dart/latest/guide/user-input.jade
+++ b/public/docs/dart/latest/guide/user-input.jade
@@ -1,40 +1,52 @@
.l-main-section
p.
- You can make your application respond to user input by associating events with functions in your controller
- using the event syntax using () to surround the name of an event.
+ Use the event syntax (eventName) to
+ make your application respond to user input.
p.
- For a particular control like an input you can have it call methods on your controller on keyup event like so:
+ You can specify the event handler—a method in the component controller—like this:
pre.prettyprint.lang-html
code.
<input (keyup)="myControllerMethod()">
p.
- As in previous examples, you can make element references available to other parts of the template as a local
- variable using the # syntax. With this and events, we can do the old "update text as you type" example:
+ As in previous examples, you can make element references available to
+ other parts of the template as a local
+ variable using the # syntax.
+ Using # and events,
+ you can write the old "update text as you type" example:
+
pre.prettyprint.lang-html
code.
- <input #my-name (keyup)>
- <p>{{my-name.value}}</p>
+ <input #myname (keyup)>
+ <p>{{myname.value}}</p>
p.text-body(ng-non-bindable).
- The #my-name creates a local variable in the template that we'll refer to below in the
- <p> element. The (keyup) tells Angular to trigger updates when it gets a keyup
- event. And the {{my-name.value}} binds the text node of the <p> element to the
+ In that example, #myname creates a local variable in the template that
+ the <p> element can refer to.
+ The (keyup) tells Angular to trigger updates when it gets a keyup
+ event. And {{myname.value}} binds the text node of the
+ <p> element to the
input's value property.
- p Let's do something a little more complex where users enter items and add them to a list like this:
+
+ p.
+ Let's do something a little more complex, where the user enters items
+ that the app adds to a list:
figure.image-display
img(src='user-input-example1.png')
.l-main-section
- h2#section-create-an-array-property Create an array property
+ h2#section-create-an-array-property Create a list property
p.
- With the default bootstrapping in place, create a TodoController class that will manage interactions with the
- list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items
- on the array when called.
+ With the default files in place,
+ create a TodoController class to manage interactions with the
+ list. Inside TodoController, add a list with some initial items.
+ Then add a method that adds new items
+ to the list.
- pre.prettyprint.linenums.lang-dart
+ pre.prettyprint.lang-dart
code.
class TodoList {
List<String> todos =
@@ -42,21 +54,26 @@
addTodo(String todo) {
todos.add(todo);
- }
+ }
+ }
.callout.is-helpful
header Production Best Practice
p.
- As with the previous example, in a production application you will separate your model out into another class
- and inject it into TodoController. We've omitted it here for brevity.
+ As shown in the previous example, a production application you would
+ separate the model out into another class
+ and inject it into TodoController.
+ We've omitted that here for brevity.
+
+
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
- Using the *for iterator, create an <li> for each item in the todos array and set
+ Using the *for iterator, create an <li> for each item in the todos list and set
its text to the value.
- pre.prettyprint.linenums.lang-html
+ pre.prettyprint.lang-html
code.
<ul>
<li *for="#todo of todos">
@@ -74,64 +91,124 @@
code.
<input #todotext>
p.
- Lastly, specify the target of the click event binding as your controller's addTodo() method and pass
- it the value. Since you created a reference called todotext, you can get the value with
- todotext.value.
+ Specify the target of the click event binding as your controller's
+ addTodo() method and pass
+ it the value. Since you created a reference called todotext,
+ you can get the value with todotext.value.
pre.prettyprint.lang-html
code.
<button (click)="addTodo(todotext.value)">Add Todo</button>
- p And then create the doneTyping() method on TodoList and handle adding the todo text.
+ p.
+ To make pressing Enter do something useful,
+ you can add a keyup event handler to the input field.
+ This event handler needs to use APIs defined in
+ dart:html,
+ so be sure to import that library.
+
+ .code-box
+ pre.prettyprint.lang-dart(data-name="todo_list.dart")
+ code.
+ <input #todotext (keyup)="doneTyping($event)">
+ ...
+ 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.
+ library user_input;
+
+ import 'dart:html';
+ ...
- pre.prettyprint.lang-dart
- code.
- doneTyping(KeyboardEvent event) {
- if (event.which == 13) {
- InputElement e = event.target;
- addTodo(e.value);
- e.value = null;
- }
- }
.l-main-section
- h2#section-final-code Final Code
- p Here's the final todo_list.dart
- pre.prettyprint.lang-dart
- code.
- part of user_input;
-
- @Component(
- selector: 'todo-list'
- )
- @View(
- // Without r before ''' (a raw string), $event breaks Angular!
- // An alternative is to use \$event instead.
- template: '''
- <ul>
- <li *for="#todo of todos">
- {{ todo }}
- </li>
- </ul>
-
- <input #todotext (keyup)="doneTyping($event)">
- <button (click)="addTodo(todotext.value)">Add Todo</button>
- ''',
- directives: const[For]
- )
- class TodoList {
- List<String> todos =
- ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
-
- addTodo(String todo) {
- todos.add(todo);
- }
-
- doneTyping(KeyboardEvent event) {
- if (event.which == 13) {
- InputElement e = event.target;
- addTodo(e.value);
- e.value = null;
- }
- }
- }
\ No newline at end of file
+ h2#section-final-code Final code
+
+ .code-box
+ pre.prettyprint.lang-dart(data-name="todo_list.dart")
+ code.
+ // 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: '''
+ <ul>
+ <li *for="#todo of todos">
+ {{ todo }}
+ </li>
+ </ul>
+
+ <input #todotext (keyup)="doneTyping($event)">
+ <button (click)="addTodo(todotext.value)">Add Todo</button>
+ ''',
+ directives: const[For]
+ )
+ class TodoList {
+ List<String> 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.
+ <!-- web/index.html -->
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+
+ <todo-list></todo-list>
+
+ <script type="application/dart" src="main.dart"></script>
+ <script src="packages/browser/dart.js"></script>
+ </body>
+ </html>
+ 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.20
+ browser: any