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

doc(di): minor fixes 

Closes #3614
This commit is contained in:
Victor Berchet 2015-08-12 16:34:13 -07:00
parent 26d2ea8afc
commit 89a0f2457d
2 changed files with 64 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/angular2/docs/di/di.md
View File

@ -43,7 +43,7 @@ var inj = Injector.resolveAndCreate([
var car = inj.get(Car);
```
In this example we create two bindings: one for Car and one for Engine. `@Inject(Engine)` declares a dependency on Engine.
In this example we create two bindings: one for `Car` and one for `Engine`. `@Inject(Engine)` declares a dependency on Engine.
## Injector
@ -156,7 +156,7 @@ Dependency resolution only walks up the tree. The following will throw because D
```
var parent = Injector.resolveAndCreate([Car]);
var child = injector.resolveAndCreateChild([
var child = parent.resolveAndCreateChild([
bind(Engine).toClass(TurboEngine)
]);

63
modules/angular2/docs/di/di_advanced.md
View File

@ -33,8 +33,8 @@ Often there is a need to create multiple instances of essentially the same injec
Doing the following would be very inefficient.
```
function createComponetInjector(parent, bindings:Binding[]) {
return parentresolveAndCreateChild(bindings);
function createComponetInjector(parent, bindings: Binding[]) {
return parent.resolveAndCreateChild(bindings);
}
```
@ -74,7 +74,7 @@ Imagine the following scenario:
Child1 Child2
```
Here both Child1 and Child2 are children of ParentInjector. Child2 marks this relationship as host. ParentInjector might want to expose two different sets of bindings for its "regular" children and its "host" children. Bindings visible to "regular" children are called PUBLIC, and bindings visible to "host" children are called PRIVATE. This is an advanced use case used by Angular, where components can provide different sets of bindings for their children and their view.
Here both Child1 and Child2 are children of ParentInjector. Child2 marks this relationship as host. ParentInjector might want to expose two different sets of bindings for its "regular" children and its "host" children. Bindings visible to "regular" children are called "public" and bindings visible to "host" children are called "private". This is an advanced use case used by Angular, where components can provide different sets of bindings for their children and their view.
Let's look at this example.
@ -82,43 +82,41 @@ Let's look at this example.
class Car {
constructor(@Host() e: Engine) {}
}
var resolvedBindings = Injector.resolve([Car, Engine]);
var parentProto = new ProtoInjector([
new BindingWithVisibility(Engine, PUBLIC),
new BindingWithVisibility(Car, PUBLIC)
new BindingWithVisibility(Engine, Visibility.Public),
new BindingWithVisibility(Car, Visibility.Public)
]);
var parent = new Injector(parentProto);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var hostChild = new Injector(hostChildProto, parent, true);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var regularChild = new Injector(regularChildProto, parent, false);
hostChild.get(Car); // will throw because PUBLIC dependencies declared at the host cannot be seen by child injectors
hostChild.get(Car); // will throw because public dependencies declared at the host cannot be seen by child injectors
parent.get(Car); // this works
regularChild.get(Car); // this works
```
Now, let's mark Engine as PRIVATE.
Now, let's mark `Engine` as private:
```
class Car {
constructor(@Host() e: Engine) {}
}
var resolvedBindings = Injector.resolve([Car, Engine]);
var parentProto = new ProtoInjector([
new BindingWithVisibility(Engine, PRIVATE),
new BindingWithVisibility(Car, PUBLIC)
new BindingWithVisibility(Engine, Visibility.Private),
new BindingWithVisibility(Car, Visibility.Public)
]);
var parent = new Injector(parentProto);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var hostChild = new Injector(hostChildProto, parent, true);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var regularChild = new Injector(regularChildProto, parent, false);
hostChild.get(Car); // this works
@ -126,24 +124,23 @@ parent.get(Car); // this throws
regularChild.get(Car); // this throws
```
Now, let's mark Engine as both PUBLIC and PRIVATE.
Now, let's mark `Engine` as both public and private:
```
class Car {
constructor(@Host() e: Engine) {}
}
var resolvedBindings = Injector.resolve([Car, Engine]);
var parentProto = new ProtoInjector([
new BindingWithVisibility(Engine, PUBLIC_AND_PRIVATE),
new BindingWithVisibility(Car, PUBLIC)
new BindingWithVisibility(Engine, Visibility.PublicAndPrivate),
new BindingWithVisibility(Car, Visibility.Public)
]);
var parent = new Injector(parentProto);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var hostChild = new Injector(hostChildProto, parent, true);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
var regularChild = new Injector(regularChildProto, parent, false);
hostChild.get(Car); // this works
@ -172,16 +169,16 @@ Let's look at a complex example that shows how the injector tree gets created.
</my-component>
```
Both MyComponent and MyDirective are created on the same element.
Both `MyComponent` and `MyDirective` are created on the same element.
```
@Component({
selector: 'my-component,
selector: 'my-component',
bindings: [
bind("componentService").toValue("Host_MyComponentService")
bind('componentService').toValue('Host_MyComponentService')
],
viewBindings: [
bind("viewService").toValue("View_MyComponentService")
bind('viewService').toValue('View_MyComponentService')
]
})
@View({
@ -193,14 +190,14 @@ class MyComponent {}
@Directive({
selector: '[my-directive]',
bindings: [
bind("directiveService").toValue("MyDirectiveService")
bind('directiveService').toValue('MyDirectiveService')
]
})
class MyDirective {
}
```
NeedsService and NeedsViewService look like this:
`NeedsService` and `NeedsViewService` look like this:
```
@Directive({
@ -223,16 +220,16 @@ This will create the following injector tree.
```
Injector1 [
{binding: MyComponent, visibility: PUBLIC_AND_PRIVATE},
{binding: "componentService", visibility: PUBLIC_AND_PRIVATE},
{binding: "viewService", visibility: PRIVATE},
{binding: MyDirective visibility: PUBLIC},
{binding: "directiveService", visibility: PUBLIC}
{binding: MyComponent, visibility: Visibility.PublicAndPrivate},
{binding: 'componentService', visibility: Visibility.PublicAndPrivate},
{binding: 'viewService', visibility: Visibility.Private},
{binding: MyDirective visibility: Visibility.Public},
{binding: 'directiveService', visibility: Visibility.Public}
]
/ \
| \ host
Injector2 [ Injector3 [
{binding: NeedsService, visibility: PUBLIC} {binding: NeedsViewService, visibility: PUBLIC}
{binding: NeedsService, visibility: Visibility.Public} {binding: NeedsViewService, visibility: Visibility.Public}
] ]
```