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

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

Browse Source
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 .l-main-section
p. p.
<strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a <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. button is clicked and update the text displayed when the user types into a textbox.
.l-sub-section .l-sub-section
h3#section-examples Examples: h3#section-examples Examples:
ul ul
li li
a(href='') TypeScript a(href='') TypeScript
li li
a(href='') ES5 a(href='') ES5
p. p.
You can make your application respond to user input by associating events with functions in your controller 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. using the event syntax using <strong>()</strong> to surround the name of an event.
p. p.
For a particular control like an input you can have it call methods on your controller on keyup event like so: 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 pre.prettyprint.lang-html
code. code.
&lt;input (keyup)="myControllerMethod()"&gt; &lt;input (keyup)="myControllerMethod()"&gt;
p. p.
As in previous examples, you can make element references available to other parts of the template as a local 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: variable using the # syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html pre.prettyprint.lang-html
code. 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).
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the 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 <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 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. 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 users enter items and add them to a list like this:
div(align='center') div(align='center')
img(src='user-input-example1.png') img(src='user-input-example1.png')
.l-main-section .l-main-section
h2#section-create-an-array-property Create an array property h2#section-create-an-array-property Create an array property
p. p.
With the default bootstrapping in place, create a TodoController class that will manage interactions with the 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 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. on the array when called.
aside.is-right. pre.prettyprint.linenums.lang-javascript
As with the previous example, in a production application you will separate your model out into another class code.
and inject it into TodoController. We've omitted it here for brevity. //ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
pre.prettyprint.linenums.lang-javascript pre.prettyprint.linenums.lang-typescript
code. code.
//ES5 //TypeScript
function TodoList() { class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; 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 .callout.is-helpful
code. header Production Best Practice
//TypeScript p.
class TodoList { As with the previous example, in a production application you will separate your model out into another class
todos: Array<string>; and inject it into <code>TodoController</code>. We've omitted it here for brevity.
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; .l-main-section
} h2#section-display-the-list-of-todos Display the list of todos
addTodo(todo: string) { p.
this.todos.push(todo); 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);