parent
f4e0f51f5a
commit
dd3e6271c2
|
@ -220,7 +220,7 @@ To better understand the kinds of injections which are supported in Angular we h
|
|||
|
||||
### Injecting Services
|
||||
|
||||
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `componentServices` and then letting the directive ask for the configured service.
|
||||
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `services` and then letting the directive ask for the configured service.
|
||||
|
||||
This example illustrates how to inject `MyService` into `House` directive.
|
||||
|
||||
|
@ -231,7 +231,7 @@ class MyService {} | Assume a service which needs to be inject
|
|||
|
|
||||
@Component({ | Assume a top level application component which
|
||||
selector: 'my-app', | configures the services to be injected.
|
||||
componentServices: [MyService] |
|
||||
services: [MyService] |
|
||||
}) |
|
||||
@Template({ | Assume we have a template that needs to be
|
||||
url: 'my_app.html', | configured with directives to be injected.
|
||||
|
|
|
@ -5,7 +5,6 @@ import {ListWrapper, List} from 'angular2/src/facade/collection';
|
|||
export class Directive {
|
||||
selector:any; //string;
|
||||
bind:any;
|
||||
lightDomServices:any; //List;
|
||||
implementsTypes:any; //List;
|
||||
lifecycle:any; //List
|
||||
events:any; //List
|
||||
|
@ -14,20 +13,17 @@ export class Directive {
|
|||
selector,
|
||||
bind,
|
||||
events,
|
||||
lightDomServices,
|
||||
implementsTypes,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
bind:any,
|
||||
events: any,
|
||||
lightDomServices:List,
|
||||
implementsTypes:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
{
|
||||
this.selector = selector;
|
||||
this.lightDomServices = lightDomServices;
|
||||
this.implementsTypes = implementsTypes;
|
||||
this.bind = bind;
|
||||
this.events = events;
|
||||
|
@ -41,26 +37,21 @@ export class Directive {
|
|||
|
||||
export class Component extends Directive {
|
||||
//TODO: vsavkin: uncomment it once the issue with defining fields in a sublass works
|
||||
shadowDomServices:any; //List;
|
||||
componentServices:any; //List;
|
||||
services:any; //List;
|
||||
|
||||
@CONST()
|
||||
constructor({
|
||||
selector,
|
||||
bind,
|
||||
events,
|
||||
lightDomServices,
|
||||
shadowDomServices,
|
||||
componentServices,
|
||||
services,
|
||||
implementsTypes,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:String,
|
||||
bind:Object,
|
||||
events:Object,
|
||||
lightDomServices:List,
|
||||
shadowDomServices:List,
|
||||
componentServices:List,
|
||||
services:List,
|
||||
implementsTypes:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
@ -69,13 +60,11 @@ export class Component extends Directive {
|
|||
selector: selector,
|
||||
bind: bind,
|
||||
events: events,
|
||||
lightDomServices: lightDomServices,
|
||||
implementsTypes: implementsTypes,
|
||||
lifecycle: lifecycle
|
||||
});
|
||||
|
||||
this.shadowDomServices = shadowDomServices;
|
||||
this.componentServices = componentServices;
|
||||
this.services = services;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -86,7 +75,6 @@ export class Decorator extends Directive {
|
|||
selector,
|
||||
bind,
|
||||
events,
|
||||
lightDomServices,
|
||||
implementsTypes,
|
||||
lifecycle,
|
||||
compileChildren = true,
|
||||
|
@ -94,7 +82,6 @@ export class Decorator extends Directive {
|
|||
selector:string,
|
||||
bind:any,
|
||||
events:any,
|
||||
lightDomServices:List,
|
||||
implementsTypes:List,
|
||||
lifecycle:List,
|
||||
compileChildren:boolean
|
||||
|
@ -105,7 +92,6 @@ export class Decorator extends Directive {
|
|||
selector: selector,
|
||||
bind: bind,
|
||||
events: events,
|
||||
lightDomServices: lightDomServices,
|
||||
implementsTypes: implementsTypes,
|
||||
lifecycle: lifecycle
|
||||
});
|
||||
|
@ -118,13 +104,11 @@ export class Viewport extends Directive {
|
|||
selector,
|
||||
bind,
|
||||
events,
|
||||
lightDomServices,
|
||||
implementsTypes,
|
||||
lifecycle
|
||||
}:{
|
||||
selector:string,
|
||||
bind:any,
|
||||
lightDomServices:List,
|
||||
implementsTypes:List,
|
||||
lifecycle:List
|
||||
}={})
|
||||
|
@ -133,7 +117,6 @@ export class Viewport extends Directive {
|
|||
selector: selector,
|
||||
bind: bind,
|
||||
events: events,
|
||||
lightDomServices: lightDomServices,
|
||||
implementsTypes: implementsTypes,
|
||||
lifecycle: lifecycle
|
||||
});
|
||||
|
|
|
@ -43,9 +43,7 @@ function _injectorBindings(appComponentType): List<Binding> {
|
|||
return [
|
||||
bind(appDocumentToken).toValue(DOM.defaultDoc()),
|
||||
bind(appComponentAnnotatedTypeToken).toFactory((reader) => {
|
||||
// TODO(rado): inspect annotation here and warn if there are bindings,
|
||||
// lightDomServices, and other component annotations that are skipped
|
||||
// for bootstrapping components.
|
||||
// TODO(rado): investigate whether to support bindings on root component.
|
||||
return reader.read(appComponentType);
|
||||
}, [DirectiveMetadataReader]),
|
||||
|
||||
|
|
|
@ -34,9 +34,6 @@ export class ProtoElementInjectorBuilder extends CompileStep {
|
|||
var distanceToParentInjector = this._getDistanceToParentInjector(parent, current);
|
||||
var parentProtoElementInjector = this._getParentProtoElementInjector(parent, current);
|
||||
var injectorBindings = ListWrapper.map(current.getAllDirectives(), this._createBinding);
|
||||
// TODO: add lightDomServices as well,
|
||||
// but after the directives as we rely on that order
|
||||
// in the element_binder_builder.
|
||||
|
||||
// Create a protoElementInjector for any element that either has bindings *or* has one
|
||||
// or more var- defined. Elements with a var- defined need a their own element injector
|
||||
|
|
|
@ -144,7 +144,7 @@ export class View {
|
|||
|
||||
// shadowDomAppInjector
|
||||
if (isPresent(componentDirective)) {
|
||||
var services = componentDirective.annotation.componentServices;
|
||||
var services = componentDirective.annotation.services;
|
||||
if (isPresent(services))
|
||||
shadowDomAppInjector = appInjector.createChild(services);
|
||||
else {
|
||||
|
|
|
@ -585,7 +585,7 @@ class ComponentWithPipes {
|
|||
|
||||
@Component({
|
||||
selector: 'child-cmp',
|
||||
componentServices: [MyService]
|
||||
services: [MyService]
|
||||
})
|
||||
@Template({
|
||||
directives: [MyDir],
|
||||
|
@ -635,7 +635,7 @@ class CompWithAncestor {
|
|||
|
||||
@Component({
|
||||
selector: '[child-cmp2]',
|
||||
componentServices: [MyService]
|
||||
services: [MyService]
|
||||
})
|
||||
class ChildComp2 {
|
||||
ctxProp:string;
|
||||
|
|
|
@ -209,7 +209,7 @@ class SomeComponentService {}
|
|||
class SomeViewportDirective {}
|
||||
|
||||
@Component({
|
||||
componentServices: [SomeComponentService]
|
||||
services: [SomeComponentService]
|
||||
})
|
||||
class SomeComponentDirective {}
|
||||
|
||||
|
|
|
@ -676,7 +676,7 @@ class DirectiveImplementingOnChange {
|
|||
|
||||
class SomeService {}
|
||||
|
||||
@Component({componentServices: [SomeService]})
|
||||
@Component({services: [SomeService]})
|
||||
class SomeComponent {
|
||||
service: SomeService;
|
||||
constructor(service: SomeService) {
|
||||
|
|
|
@ -2,7 +2,7 @@ library bar;
|
|||
|
||||
import 'package:angular2/src/core/annotations/annotations.dart';
|
||||
|
||||
@Component(selector: 'soup', componentServices: const [ToolTip])
|
||||
@Component(selector: 'soup', services: const [ToolTip])
|
||||
class MyComponent {}
|
||||
|
||||
@Decorator(selector: '[tool-tip]', bind: const {'text': 'tool-tip'})
|
||||
|
|
|
@ -12,7 +12,7 @@ void setupReflection(reflector) {
|
|||
"factory": () => new MyComponent(),
|
||||
"parameters": const [],
|
||||
"annotations": const [
|
||||
const Component(selector: 'soup', componentServices: const [ToolTip])
|
||||
const Component(selector: 'soup', services: const [ToolTip])
|
||||
]
|
||||
})
|
||||
..registerType(ToolTip, {
|
||||
|
|
|
@ -4,7 +4,7 @@ import 'package:angular2/src/core/annotations/annotations.dart';
|
|||
import 'foo.dart' as dep;
|
||||
|
||||
@Component(
|
||||
selector: '[soup]', componentServices: const [dep.DependencyComponent])
|
||||
selector: '[soup]', services: const [dep.DependencyComponent])
|
||||
class MyComponent {
|
||||
MyComponent();
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@ void setupReflection(reflector) {
|
|||
"annotations": const [
|
||||
const Component(
|
||||
selector: '[soup]',
|
||||
componentServices: const [dep.DependencyComponent])
|
||||
services: const [dep.DependencyComponent])
|
||||
]
|
||||
});
|
||||
i0.setupReflection(reflector);
|
||||
|
|
|
@ -3,7 +3,7 @@ library bar;
|
|||
import 'package:angular2/src/core/annotations/annotations.dart';
|
||||
import 'foo.dart';
|
||||
|
||||
@Component(componentServices: const [MyContext])
|
||||
@Component(services: const [MyContext])
|
||||
class MyComponent {
|
||||
final MyContext c;
|
||||
MyComponent(this.c);
|
||||
|
|
|
@ -13,7 +13,7 @@ void setupReflection(reflector) {
|
|||
"factory": (MyContext c) => new MyComponent(c),
|
||||
"parameters": const [const [MyContext]],
|
||||
"annotations": const [
|
||||
const Component(componentServices: const [MyContext])
|
||||
const Component(services: const [MyContext])
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -15,7 +15,7 @@ import {bootstrap, Component, Decorator, Template, NgElement} from 'angular2/ang
|
|||
selector: 'hello-app',
|
||||
// These are services that would be created if a class in the component's
|
||||
// template tries to inject them.
|
||||
componentServices: [GreetingService]
|
||||
services: [GreetingService]
|
||||
})
|
||||
// The template for the component.
|
||||
@Template({
|
||||
|
|
|
@ -29,7 +29,7 @@ function setup() {
|
|||
"annotations" : [
|
||||
new Component({
|
||||
selector: 'hello-app',
|
||||
componentServices: [app.GreetingService]
|
||||
services: [app.GreetingService]
|
||||
}),
|
||||
new Template({
|
||||
directives: [app.RedDec],
|
||||
|
|
|
@ -22,7 +22,6 @@ function namedObjectType({a,b}:{a:A,b:B<C>}) {
|
|||
class Bar {
|
||||
constructor({
|
||||
selector,
|
||||
lightDomServices,
|
||||
implementsTypes
|
||||
})
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue