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

Docs changes.

This commit is contained in:
David East 2015-04-22 05:25:15 -07:00
parent 6fe86825b5
commit 7ebb9173b0
3 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,20 @@
.l-main-section
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.
p.
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')
.callout.is-helpful
header Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview> ES5 Example</a>.
.l-sub-section
h3#section-examples Live Examples
p.
If you want to skip the working examples you can check out these links on Plunker.
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
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.
p.
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')
.l-main-section
h2#section-create-an-entry-point Create an entry point

12
public/docs/js/latest/guide/setup.jade
View File

@ -1,4 +1,10 @@
.l-main-section
.callout.is-helpful
header Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
h2#section-install-or-plunker Install Angular or Use Plunker
p There are four steps to create any Angular app:
ol
@ -22,10 +28,6 @@
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
p.
If you want to skip the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or
<a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
@ -195,4 +197,4 @@
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
});

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

@ -1,7 +1,13 @@
.l-main-section
.callout.is-helpful
header Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
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.
using the event syntax using <code>(event)</code> 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:
@ -10,7 +16,7 @@
&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:
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html
code.
@ -18,20 +24,20 @@
&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
The <code>#myname</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
event. And the <code>{{myname.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
.l-ain-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
With the default bootstrapping in place, create a controller class that will manage interactions with the
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called.
pre.prettyprint.linenums.lang-javascript
@ -39,7 +45,7 @@
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
@ -48,11 +54,11 @@
code.
//TypeScript
class TodoList {
todos: Array<string>;
constructor() {
todos: Array&lt;string&gt;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
addTodo(todo: string) {
this.todos.push(todo);
}
}
@ -61,7 +67,7 @@
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 <code>TodoController</code>. We've omitted it here for brevity.
and inject it into <code>TodoList</code>. We've omitted it here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
@ -95,7 +101,7 @@
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.
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript
code.
@ -188,7 +194,3 @@
}
bootstrap(TodoList);