From 9133173babb9056a5d851a6467d7594b687c815f Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Sun, 19 Apr 2015 15:12:29 -0700 Subject: [PATCH] docs(user-input): First 2 sections of this chapter. Alex to comment on my use of aside. --- public/docs/js/latest/guide/user-input.jade | 74 +++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index e69de29bb2..45bb5e9e77 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -0,0 +1,74 @@ +.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: + + 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> + + 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. + + 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-typescript + code. + //TypeScript + class TodoList { + todos: Array; + constructor() { + this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; + } + addTodo(todo: string) { + this.todos.push(todo); + } + } + +