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

doc: fix & sync with latest updates

This commit is contained in:
Victor Berchet 2015-05-14 17:21:43 +02:00
parent b033416a45
commit 842459aa46
4 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
modules/angular2/docs/core/01_templates.md
View File

@ -382,20 +382,20 @@ Example of conditionally included template:
``` ```
Hello {{user}}! Hello {{user}}!
<div template="if: isAdministrator"> <div template="ng-if: isAdministrator">
...administrator menu here... ...administrator menu here...
</div> </div>
``` ```
In the above example the `if` directive determines whether the child view (an instance of the child template) should be In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be
inserted into the root view. The `if` makes this decision based on if the `isAdministrator` binding is true. inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true.
The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
identical. identical.
``` ```
Hello {{user}}! Hello {{user}}!
<template [if]="isAdministrator"> <template [ng-if]="isAdministrator">
<div> <div>
...administrator menu here... ...administrator menu here...
</div> </div>
@ -406,22 +406,22 @@ Hello {{user}}!
### Template Microsyntax ### Template Microsyntax
Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
of the templates occurs. One such example is `for`. of the templates occurs. One such example is `ng-for`.
``` ```
<form #foo=form> <form #foo=form>
</form> </form>
<ul> <ul>
<template for #person [in]="people" #i="index"> <template [ng-for] #person [ng-for-of]="people" #i="index">
<li>{{i}}. {{person}}<li> <li>{{i}}. {{person}}<li>
</template> </template>
</ul> </ul>
``` ```
Where: Where:
* `for` triggers the for directive. * `[ng-for]` triggers the for directive.
* `[in]="people"` binds an iterable object to the `for` controller. * `#person` exports the implicit `ng-for` item.
* `#person` exports the implicit `for` item. * `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
* `#i=index` exports item index as `i`. * `#i=index` exports item index as `i`.
The above example is explicit but quite wordy. For this reason in most situations a short hand version of the The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
@ -429,7 +429,7 @@ syntax is preferable.
``` ```
<ul> <ul>
<li template="for; #person; of=people; #i=index;">{{i}}. {{person}}<li> <li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
@ -439,20 +439,20 @@ which allows us to further shorten the text.
``` ```
<ul> <ul>
<li template="for #person of people #i=index">{{i}}. {{person}}<li> <li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
microsyntax for `for`. microsyntax for `ng-for`.
``` ```
<ul> <ul>
<li template="for: var person of people; var i=index">{{i}}. {{person}}<li> <li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
</ul> </ul>
``` ```
Finally, we can move the `for` keyword to the left hand side and prefix it with `*` as so: Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
``` ```
<ul> <ul>
@ -569,7 +569,7 @@ Angular are:
<div title="{{expression}}">{{expression}}</div> <div title="{{expression}}">{{expression}}</div>
<div [title]="expression">...</div> <div [title]="expression">...</div>
<div bind-title="expression">...</div> <div bind-title="expression">...</div>
<div template="if: expression">...</div> <div template="ng-if: expression">...</div>
``` ```
Expressions are simplified version of expression in the language in which you are writing your application. (i.e. Expressions are simplified version of expression in the language in which you are writing your application. (i.e.

38
modules/angular2/docs/core/02_directives.md
View File

@ -21,6 +21,7 @@ Angular supports these CSS selector constructs:
* Class: `.class` * Class: `.class`
* AND operation: `name[attribute]` * AND operation: `name[attribute]`
* OR operation: `name,.class` * OR operation: `name,.class`
* NOT operation: `:not(.class)`
Angular does not support these (and any CSS selector which crosses element boundaries): Angular does not support these (and any CSS selector which crosses element boundaries):
* Descendant: `body div` * Descendant: `body div`
@ -29,7 +30,7 @@ Angular does not support these (and any CSS selector which crosses element bound
* Sibling: `div ~ table` * Sibling: `div ~ table`
* Wildcard: `*` * Wildcard: `*`
* ID: `#id` * ID: `#id`
* Pseudo selectors: `:pseudo` * Pseudo selectors: `:pseudo` other than `:not`
@ -61,20 +62,20 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
``` ```
@Directive({ @Directive({
selector: '[tooltip]', // CSS Selector which triggers the decorator selector: '[tooltip]', | CSS Selector which triggers the decorator
properties: { // List which properties need to be bound properties: { | List which properties need to be bound
text: 'tooltip' // - DOM element tooltip property should be text: 'tooltip' | - DOM element tooltip property should be
}, // mapped to the directive text property. }, | mapped to the directive text property.
hostListeners: { // List which events need to be mapped. hostListeners: { | List which events need to be mapped.
mouseover: 'show' // - Invoke the show() method every time mouseover: 'show' | - Invoke the show() method every time
} // the mouseover event is fired. } | the mouseover event is fired.
}) }) |
class Form { // Directive controller class, instantiated class Form { | Directive controller class, instantiated
// when CSS matches. | when CSS matches.
text:string; // text property on the Directive Controller. text:string; | text property on the Directive Controller.
|
show(event) { // Show method which implements the show action. show(event) { | Show method which implements the show action.
console.log(this.text); console.log(this.text); |
} }
} }
``` ```
@ -113,7 +114,7 @@ Example of a component:
}, | }, |
}) | }) |
@View({ | View annotation @View({ | View annotation
templateUrl: 'pane.html' | - URL of template HTML templateUrl: 'pane.html' | - URL of template HTML
}) | }) |
class Pane { | Component controller class class Pane { | Component controller class
title:string; | - title property title:string; | - title property
@ -160,7 +161,7 @@ Example of usage:
## Directives that use a ViewContainer ## Directives that use a ViewContainer
Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `if` and `for`.) Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer. * Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
* The child views show up as siblings of the directive in the DOM. * The child views show up as siblings of the directive in the DOM.
@ -229,7 +230,7 @@ class MyService {} | Assume a service which needs to be inject
injectables: [MyService] | injectables: [MyService] |
}) | }) |
@View({ | Assume we have a template that needs to be @View({ | Assume we have a template that needs to be
templateUrl: 'my_app.html', | configured with directives to be injected. templateUrl: 'my_app.html', | configured with directives to be injected.
directives: [House] | directives: [House] |
}) | }) |
class MyApp {} | class MyApp {} |
@ -358,7 +359,6 @@ class Dad {
constructor(@Parent() dad:Grandpa) { constructor(@Parent() dad:Grandpa) {
this.name = 'Joe Jr'; this.name = 'Joe Jr';
this.dad = dad.name; this.dad = dad.name;
console.log(dad)
} }
} }

14
modules/angular2/docs/core/10_view.md
View File

@ -94,7 +94,7 @@ Let's start with a View such as:
``` ```
<ul> <ul>
<li template="foreach: person in people">{{person}}</li> <li template="ng-for: #person of people">{{person}}</li>
</ul> </ul>
``` ```
@ -119,33 +119,33 @@ The next step is to compose these two ProtoViews into an actual view which is re
``` ```
<ul> | viewA(someContext) <ul> | viewA(someContext)
<template></template> | viewA(someContext): new Foreach(new ViewContainer(protoViewB)) <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
</ul> | viewA(someContext) </ul> | viewA(someContext)
``` ```
*Step2:* Instantiate `Foreach` directive which will receive the `ViewContainerRef`. (The ViewContainerRef *Step2:* Instantiate `NgFor` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
has a reference to `protoViewA`). has a reference to `protoViewA`).
*Step3:* As the `Foreach` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert *Step3:* As the `NgFor` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
it after the `ViewContainer` anchor. This is repeated for each `person` in `people`. Notice that it after the `ViewContainer` anchor. This is repeated for each `person` in `people`. Notice that
``` ```
<ul> | viewA(someContext) <ul> | viewA(someContext)
<template></template> | viewA(someContext): new Foreach(new ViewContainer(protoViewB)) <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
<li>{{person}}</li> | viewB0(locals0(someContext)) <li>{{person}}</li> | viewB0(locals0(someContext))
<li>{{person}}</li> | viewB1(locals0(someContext)) <li>{{person}}</li> | viewB1(locals0(someContext))
</ul> | viewA(someContext) </ul> | viewA(someContext)
``` ```
*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach` *Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgFor`
the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively. the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively.
Locals allow the introduction of new local variables visible only within the scope of the View, and Locals allow the introduction of new local variables visible only within the scope of the View, and
delegate any unknown references to the parent context. delegate any unknown references to the parent context.
``` ```
<ul> | viewA <ul> | viewA
<template></template> | viewA: new Foreach(new ViewContainer(protoViewB)) <template></template> | viewA: new NgFor(new ViewContainer(protoViewB))
<li>Alice</li> | viewB0 <li>Alice</li> | viewB0
<li>Bob</li> | viewB1 <li>Bob</li> | viewB1
</ul> | viewA </ul> | viewA

13
modules/angular2/docs/core/12_zones.md
View File

@ -8,16 +8,17 @@ UI bindings. Zones means that in Angular v2 you don't have to remember to call `
## Execution Context ## Execution Context
``` ```
zone['inTheZone'] = false; zone.inTheZone = false;
zone.run(function () {
zone['inTheZone'] = true; zone.fork().run(function () {
zone.inTheZone = true;
setTimeout(function () { setTimeout(function () {
console.log('async in the zone: ' + zone['inTheZone']); console.log('async in the zone: ' + zone.inTheZone);
}, 0); }, 0);
}); });
console.log('sync in the zone: ' + zone['inTheZone']); console.log('sync in the zone: ' + zone.inTheZone);
``` ```
The above will log: The above will log:
@ -58,6 +59,8 @@ execution which was registered in the `run` block.
In Angular2 it is not necessary to notify Angular of changes manually after async callback, because a relevant In Angular2 it is not necessary to notify Angular of changes manually after async callback, because a relevant
async callbacks are intercepted. The question is how do we know which callbacks are Angular relevant? async callbacks are intercepted. The question is how do we know which callbacks are Angular relevant?
// TODO(vicb): outdated, rework.
``` ```
/// Some other code running on page can do async operation /// Some other code running on page can do async operation
document.addEventListener('mousemove', function () { document.addEventListener('mousemove', function () {