From ff146ceaa21d39cfd6a125e3380bd501148d5edc Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Sun, 19 Apr 2015 14:35:53 -0700 Subject: [PATCH 1/2] docs(displaying-data): Reworked the intro para styles. --- .../docs/js/latest/guide/displaying-data.jade | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 7c566547be..0537276d19 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,23 +1,25 @@ -p. - Mission: You should be able to display data from both properties and lists from a component’s controller to the - view. .l-main-section - h2#section-examples Examples: - ul - li - a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript - li - a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5 p. - Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML - templates and Angular automatically updates the UI as data changes. + Mission: By the end of this chapter, you should be able to display data from both properties and + lists from a component’s controller to the view. p. - Let's walk through how we'd display a property, a list of properties, and then conditionally show content - based on state. + Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML + templates and Angular automatically updates the UI as data changes. p. - We'll end up with a UI that looks like this: + Let's walk through how we'd display a property, a list of properties, and then conditionally show content + based on state. + p. + We'll end up with a UI that looks like this: div(align='center') - img(src='displaying-data-example1.png') + img(src='displaying-data-example1.png') + + .l-sub-section + h3#section-examples Examples: + ul + li + a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript + li + a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5 .l-main-section h2#section-create-an-entry-point Create an entry point From 9133173babb9056a5d851a6467d7594b687c815f Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Sun, 19 Apr 2015 15:12:29 -0700 Subject: [PATCH 2/2] 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); + } + } + +