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

merge fix

This commit is contained in:
Alex Wolfe 2015-04-22 07:00:53 -07:00
parent 9b074c0aed 65868abf87
commit 45587fa0a9
9 changed files with 92 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/_includes/_intro.jade Normal file
View File

@ -0,0 +1,7 @@
.intro(style='\
background: #E6E7EC;\
padding: 40px;\
font-size: 22px;\
line-height: 32px;\
')
| #{ intro }

9
public/docs/js/latest/guide/_data.json
View File

@ -10,15 +10,18 @@
},
"displaying-data": {
"title": "Displaying Data"
"title": "Displaying Data",
"intro": "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."
},
"user-input": {
"title": "User Input"
"title": "User Input",
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
},
"making-components": {
"title": "Making Components"
"title": "Making Components",
"intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template."
},
"talking-to-components": {

4
public/docs/js/latest/guide/_layout.jade
View File

@ -7,6 +7,8 @@ html(lang="en" ng-app="angularIOApp")
!= partial("../../../../_includes/_main-nav")
!= partial("../../../../_includes/_docs-nav")
!= partial("../../../../_includes/_hero")
if intro
!= partial("../../../../_includes/_intro")
if banner
!= partial("../../../../_includes/_banner")
@ -16,4 +18,4 @@ html(lang="en" ng-app="angularIOApp")
!= partial("../../../../_includes/_next-item")
!= partial("../../../../_includes/_footer")
!= partial("../../../../_includes/_scripts-include")
!= partial("../../../../_includes/_scripts-include")

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

@ -1,24 +1,19 @@
.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')
.statement
h4 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
h2#section-displaying-controller-properties Displaying controller properties
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
@ -260,7 +255,7 @@
new angular.Component({
selector: "display",
injectables: [FriendsService]
}),
}),
new angular.View({
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;',
directives: [angular.For, angular.If]
@ -286,7 +281,17 @@
code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the If directive so Angular knows to include it.
p [TODO: CODE]
pre.prettyprint.lang-javascript
code.
//ES5
directives: [angular.For, angular.If]
pre.prettyprint.lang-typescript
code.
//Typescript
import {Component, View, bootstrap, For, If} from
...
directives: [For, If]
p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
Remove two items from the list, reload your browser, and see that the message no longer displays.

12
public/docs/js/latest/guide/making-components.jade
View File

@ -1,4 +1,12 @@
.statement
h4 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/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-its-all-a-tree It's all a tree
p.
As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create
a top-level component. You add child components to a parent component by using them in the parent component's
@ -82,6 +90,4 @@
p.
Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to
add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives
p.
[TODO: Motivate communication between components with iterator example that passes index to the child]
add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives.

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

@ -1,4 +1,10 @@
.statement
h4 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>.
.l-main-section
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.
@ -178,7 +180,6 @@
p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
.code-box
pre.prettyprint.lang-typescript(data-name="es5")
code.

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

@ -1,16 +1,24 @@
.l-main-section
.statement
h4 Live Examples
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.
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>.
.l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax
p.
You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
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;
h3#local-variables Local variables
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 +26,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 +47,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 +56,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 +69,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
@ -89,13 +97,13 @@
p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.domElement.value.</code>
<code>todotext.value.</code>
pre.prettyprint.lang-html
code.
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.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.
@ -138,7 +146,7 @@
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.domElement.value)"&gt;Add Todo&lt;/button&gt;',
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
@ -164,7 +172,7 @@
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
@ -188,7 +196,3 @@
}
bootstrap(TodoList);

2
public/resources/css/main.scss
View File

@ -38,7 +38,7 @@
@import 'module/modal';
@import 'module/shadow';
@import 'module/showcase';
@import 'module/statement';
/*
* PRINT STYLES

6
public/resources/css/module/_statement.scss Normal file
View File

@ -0,0 +1,6 @@
.statement {
background: $mist;
padding: 20px 20px 10px 20px;
margin-bottom: 40px;
border-radius: 6px;
}