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

docs(user-input): finished first pass chapter 3

This commit is contained in:
Naomi Black 2015-04-19 16:04:22 -07:00
parent 3c9d095670
commit c8408a1f7f
1 changed files with 188 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
public/docs/js/latest/guide/user-input.jade
View File

@ -1,74 +1,204 @@
.l-main-section
p.
<strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a
button is clicked and update the text displayed when the user types into a textbox.
.l-sub-section
h3#section-examples Examples:
ul
li
a(href='') TypeScript
li
a(href='') ES5
p.
You can make your application respond to user input by associating events with functions in your controller
using the event syntax using <strong>()</strong> to surround the name of an event.
p.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
p.
<strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a
button is clicked and update the text displayed when the user types into a textbox.
.l-sub-section
h3#section-examples Examples:
ul
li
a(href='') TypeScript
li
a(href='') ES5
p.
You can make your application respond to user input by associating events with functions in your controller
using the event syntax using <strong>()</strong> to surround the name of an event.
p.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
pre.prettyprint.lang-html
code.
&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
variable using the # syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html
code.
&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
variable using the # syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html
code.
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
pre.prettyprint.lang-html
code.
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable).
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
<code>&lt;p&gt;</code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
event. And the <code>{{my-name.value}}</code> binds the text node of the <code>&lt;p&gt;</code> 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:
div(align='center')
img(src='user-input-example1.png')
p.text-body(ng-non-bindable).
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
<code>&lt;p&gt;</code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
event. And the <code>{{my-name.value}}</code> binds the text node of the <code>&lt;p&gt;</code> 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:
div(align='center')
img(src='user-input-example1.png')
.l-main-section
h2#section-create-an-array-property Create an array 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.
h2#section-create-an-array-property Create an array 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.
aside.is-right.
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.
pre.prettyprint.linenums.lang-javascript
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
pre.prettyprint.linenums.lang-javascript
code.
//ES5
function TodoList() {
pre.prettyprint.linenums.lang-typescript
code.
//TypeScript
class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
pre.prettyprint.linenums.lang-typescript
code.
//TypeScript
class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(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 <code>TodoController</code>. We've omitted it here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
its text to the value.
pre.prettyprint.linenums.lang-html
code.
&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
p.
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;
p.
Lastly, 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.domElement.value.</code>
pre.prettyprint.lang-html
code.
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
p And then create the doneTyping() method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript
code.
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
.l-main-section
h2#section-final-code Final Code
pre.prettyprint.lang-javascript
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.Component({
selector: "todo-list"
}),
new angular.View({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.domElement.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);