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}}!
<div template="if: isAdministrator">
<div template="ng-if: isAdministrator">
...administrator menu here...
</div>
```
In the above example the `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.
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 `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
identical.
```
Hello {{user}}!
<template [if]="isAdministrator">
<template [ng-if]="isAdministrator">
<div>
...administrator menu here...
</div>
@ -406,22 +406,22 @@ Hello {{user}}!
### Template Microsyntax
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>
<ul>
<template for #person [in]="people" #i="index">
<template [ng-for] #person [ng-for-of]="people" #i="index">
<li>{{i}}. {{person}}<li>
</template>
</ul>
```
Where:
* `for` triggers the for directive.
* `[in]="people"` binds an iterable object to the `for` controller.
* `#person` exports the implicit `for` item.
* `[ng-for]` triggers the for directive.
* `#person` exports the implicit `ng-for` item.
* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
* `#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
@ -429,7 +429,7 @@ syntax is preferable.
```
<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>
```
@ -439,20 +439,20 @@ which allows us to further shorten the text.
```
<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>
```
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>
<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>
```
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>
@ -569,7 +569,7 @@ Angular are:
<div title="{{expression}}">{{expression}}</div>
<div [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.

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

@ -21,6 +21,7 @@ Angular supports these CSS selector constructs:
* Class: `.class`
* AND operation: `name[attribute]`
* OR operation: `name,.class`
* NOT operation: `:not(.class)`
Angular does not support these (and any CSS selector which crosses element boundaries):
* Descendant: `body div`
@ -29,7 +30,7 @@ Angular does not support these (and any CSS selector which crosses element bound
* Sibling: `div ~ table`
* Wildcard: `*`
* 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({
selector: '[tooltip]', // CSS Selector which triggers the decorator
properties: { // List which properties need to be bound
text: 'tooltip' // - DOM element tooltip property should be
}, // mapped to the directive text property.
hostListeners: { // List which events need to be mapped.
mouseover: 'show' // - Invoke the show() method every time
} // the mouseover event is fired.
})
class Form { // Directive controller class, instantiated
// when CSS matches.
text:string; // text property on the Directive Controller.
show(event) { // Show method which implements the show action.
console.log(this.text);
selector: '[tooltip]', | CSS Selector which triggers the decorator
properties: { | List which properties need to be bound
text: 'tooltip' | - DOM element tooltip property should be
}, | mapped to the directive text property.
hostListeners: { | List which events need to be mapped.
mouseover: 'show' | - Invoke the show() method every time
} | the mouseover event is fired.
}) |
class Form { | Directive controller class, instantiated
| when CSS matches.
text:string; | text property on the Directive Controller.
|
show(event) { | Show method which implements the show action.
console.log(this.text); |
}
}
```
@ -113,7 +114,7 @@ Example of a component:
}, |
}) |
@View({ | View annotation
templateUrl: 'pane.html' | - URL of template HTML
templateUrl: 'pane.html' | - URL of template HTML
}) |
class Pane { | Component controller class
title:string; | - title property
@ -160,7 +161,7 @@ Example of usage:
## 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.
* 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] |
}) |
@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] |
}) |
class MyApp {} |
@ -358,7 +359,6 @@ class Dad {
constructor(@Parent() dad:Grandpa) {
this.name = 'Joe Jr';
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>
<li template="foreach: person in people">{{person}}</li>
<li template="ng-for: #person of people">{{person}}</li>
</ul>
```
@ -119,33 +119,33 @@ The next step is to compose these two ProtoViews into an actual view which is re
```
<ul> | viewA(someContext)
<template></template> | viewA(someContext): new Foreach(new ViewContainer(protoViewB))
<template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
</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`).
*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
```
<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> | viewB1(locals0(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.
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.
```
<ul> | viewA
<template></template> | viewA: new Foreach(new ViewContainer(protoViewB))
<template></template> | viewA: new NgFor(new ViewContainer(protoViewB))
<li>Alice</li> | viewB0
<li>Bob</li> | viewB1
</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
```
zone['inTheZone'] = false;
zone.run(function () {
zone['inTheZone'] = true;
zone.inTheZone = false;
zone.fork().run(function () {
zone.inTheZone = true;
setTimeout(function () {
console.log('async in the zone: ' + zone['inTheZone']);
console.log('async in the zone: ' + zone.inTheZone);
}, 0);
});
console.log('sync in the zone: ' + zone['inTheZone']);
console.log('sync in the zone: ' + zone.inTheZone);
```
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
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
document.addEventListener('mousemove', function () {