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

Merge branch 'api-branch' of https://github.com/angular/angular.io into api-branch

This commit is contained in:
Alex Wolfe 2015-04-19 15:22:46 -07:00
parent 95e60ce204 9133173bab
commit 3c9d095670
2 changed files with 91 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/docs/js/latest/guide/displaying-data.jade
View File

@ -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.
<strong>Mission:</strong> 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

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

@ -0,0 +1,74 @@
.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:
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;
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.
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<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}