diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index 45bb5e9e77..dbd5378d96 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -1,74 +1,204 @@ .l-main-section - p. - Mission: 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 () 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. + Mission: 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 () 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. - <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: + 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: - pre.prettyprint.lang-html - code. - <input #myname (keyup)> - <p>{{myname.value}}</p> + pre.prettyprint.lang-html + code. + <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 - 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 #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 + 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; + 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; - 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 TodoController. 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 *for iterator, create an <li> for each item in the todos array and set + its text to the value. + + pre.prettyprint.linenums.lang-html + code. + <ul> + <li *for="#todo of todos"> + {{ todo }} + </li> + </ul> + +.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 #varname. Call it #todotext here. + + pre.prettyprint.lang-html + 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.domElement.value. + + pre.prettyprint.lang-html + code. + <button (click)="addTodo(todotext.domElement.value)">Add Todo</button> + + 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: + '<ul>' + + '<li *for="#todo of todos">' + + '{{ todo }}' + + '</li>' + + '</ul>' + + '<input #textbox (keyup)="doneTyping($event)">' + + '<button (click)="addTodo(textbox.domElement.value)">Add Todo</button>', + 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: ` + <ul> + <li *for="#todo of todos"> + {{ todo }} + </li> + </ul> + + <input #todotext (keyup)="doneTyping($event)"> + <button (click)="addTodo(todotext.domElement.value)">Add Todo</button> + `, + directives: [For, If] + }) + class TodoList { + todos: Array; + + 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); + +