iSharkFly-Docs
/
angular-docs-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": { "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": { "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": { "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": { "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/_main-nav")
!= partial("../../../../_includes/_docs-nav") != partial("../../../../_includes/_docs-nav")
!= partial("../../../../_includes/_hero") != partial("../../../../_includes/_hero")
if intro
!= partial("../../../../_includes/_intro")
if banner if banner
!= partial("../../../../_includes/_banner") != partial("../../../../_includes/_banner")
@ -16,4 +18,4 @@ html(lang="en" ng-app="angularIOApp")
!= partial("../../../../_includes/_next-item") != partial("../../../../_includes/_next-item")
!= partial("../../../../_includes/_footer") != 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 .statement
p. h4 Live Examples
Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML p.
templates and Angular automatically updates the UI as data changes. 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>.
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-sub-section .l-main-section
h3#section-examples Live Examples
p. h2#section-displaying-controller-properties Displaying controller properties
If you want to skip the working examples you can check out these links on Plunker.
ul p.
li Let's walk through how we'd display a property, a list of properties, and then conditionally show content
a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript based on state.
li p.
a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5 We'll end up with a UI that looks like this:
div(align='center')
img(src='displaying-data-example1.png')
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
@ -260,7 +255,7 @@
new angular.Component({ new angular.Component({
selector: "display", selector: "display",
injectables: [FriendsService] injectables: [FriendsService]
}), }),
new angular.View({ new angular.View({
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;', template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;',
directives: [angular.For, angular.If] directives: [angular.For, angular.If]
@ -286,7 +281,17 @@
code. code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &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 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. p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. 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. 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 .l-main-section
h2#section-its-all-a-tree It's all a tree
p. p.
As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create 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 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. p.
Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to 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 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]

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 .l-main-section
h2#section-install-or-plunker Install Angular or Use Plunker h2#section-install-or-plunker Install Angular or Use Plunker
p There are four steps to create any Angular app: p There are four steps to create any Angular app:
ol ol
@ -22,10 +28,6 @@
pre.prettyprint.lang-bash pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000 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 .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
p. p.
@ -178,7 +180,6 @@
p. 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. 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 .code-box
pre.prettyprint.lang-typescript(data-name="es5") pre.prettyprint.lang-typescript(data-name="es5")
code. code.

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

@ -1,16 +1,24 @@
.l-main-section .statement
h4 Live Examples
p. p.
You can make your application respond to user input by associating events with functions in your controller 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>.
using the event syntax using <strong>()</strong> to surround the name of an event.
.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. p.
For a particular control like an input you can have it call methods on your controller on keyup event like so: 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 pre.prettyprint.lang-html
code. code.
&lt;input (keyup)="myControllerMethod()"&gt; &lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables
p. p.
As in previous examples, you can make element references available to other parts of the template as a local 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 pre.prettyprint.lang-html
code. code.
@ -18,20 +26,20 @@
&lt;p&gt;{{myname.value}}&lt;/p&gt; &lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable). 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 <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. 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: p Let's do something a little more complex where users enter items and add them to a list like this:
div(align='center') div(align='center')
img(src='user-input-example1.png') img(src='user-input-example1.png')
.l-main-section .l-ain-section
h2#section-create-an-array-property Create an array property h2#section-create-an-array-property Create an array property
p. p.
With the default bootstrapping in place, create a TodoController class that will manage interactions with the With the default bootstrapping in place, create a controller 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 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. on the array when called.
pre.prettyprint.linenums.lang-javascript pre.prettyprint.linenums.lang-javascript
@ -39,7 +47,7 @@
//ES5 //ES5
function TodoList() { function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) { this.addTodo = function(todo) {
this.todos.push(todo); this.todos.push(todo);
}; };
} }
@ -48,11 +56,11 @@
code. code.
//TypeScript //TypeScript
class TodoList { class TodoList {
todos: Array<string>; todos: Array&lt;string&gt;
constructor() { constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
} }
addTodo(todo: string) { addTodo(todo: string) {
this.todos.push(todo); this.todos.push(todo);
} }
} }
@ -61,7 +69,7 @@
header Production Best Practice header Production Best Practice
p. p.
As with the previous example, in a production application you will separate your model out into another class 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 .l-main-section
h2#section-display-the-list-of-todos Display the list of todos h2#section-display-the-list-of-todos Display the list of todos
@ -89,13 +97,13 @@
p. p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass 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 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 pre.prettyprint.lang-html
code. 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 pre.prettyprint.lang-javascript
code. code.
@ -138,7 +146,7 @@
'&lt;/li&gt;' + '&lt;/li&gt;' +
'&lt;/ul&gt;' + '&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' + '&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] directives: [angular.For, angular.If]
}) })
]; ];
@ -164,7 +172,7 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&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] directives: [For, If]
}) })
@ -188,7 +196,3 @@
} }
bootstrap(TodoList); bootstrap(TodoList);

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

@ -38,7 +38,7 @@
@import 'module/modal'; @import 'module/modal';
@import 'module/shadow'; @import 'module/shadow';
@import 'module/showcase'; @import 'module/showcase';
@import 'module/statement';
/* /*
* PRINT STYLES * 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;
}