refactor(core): renamed injectables into appInjector
BREAKING CHANGES Before: @Component({injectables: [Type]} class MyCmp{} After: @Component({appInjector: [Type]} class MyCmp{}
This commit is contained in:
parent
3a53f67911
commit
7b511462af
|
@ -216,7 +216,7 @@ To better understand the kinds of injections which are supported in Angular we h
|
||||||
|
|
||||||
### Injecting Services
|
### Injecting Services
|
||||||
|
|
||||||
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `injectables` 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 `appInjector` and then letting the directive ask for the configured service.
|
||||||
|
|
||||||
This example illustrates how to inject `MyService` into `House` directive.
|
This example illustrates how to inject `MyService` into `House` directive.
|
||||||
|
|
||||||
|
@ -227,7 +227,7 @@ class MyService {} | Assume a service which needs to be inject
|
||||||
|
|
|
|
||||||
@Component({ | Assume a top level application component which
|
@Component({ | Assume a top level application component which
|
||||||
selector: 'my-app', | configures the services to be injected.
|
selector: 'my-app', | configures the services to be injected.
|
||||||
injectables: [MyService] |
|
appInjector: [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.
|
||||||
|
@ -330,7 +330,7 @@ Shadow DOM provides an encapsulation for components, so as a general rule it doe
|
||||||
```
|
```
|
||||||
@Component({
|
@Component({
|
||||||
selector: '[kid]',
|
selector: '[kid]',
|
||||||
injectables: []
|
appInjector: []
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: 'kid.html',
|
templateUrl: 'kid.html',
|
||||||
|
@ -349,7 +349,7 @@ class Kid {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: '[dad]',
|
selector: '[dad]',
|
||||||
injectables: [Grandpa]
|
appInjector: [Grandpa]
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: 'dad.html',
|
templateUrl: 'dad.html',
|
||||||
|
@ -364,7 +364,7 @@ class Dad {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: '[grandpa]',
|
selector: '[grandpa]',
|
||||||
injectables: []
|
appInjector: []
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: 'grandpa.html',
|
templateUrl: 'grandpa.html',
|
||||||
|
|
|
@ -714,7 +714,7 @@ export class Directive extends Injectable {
|
||||||
* When a component is instantiated, Angular
|
* When a component is instantiated, Angular
|
||||||
* - creates a shadow DOM for the component.
|
* - creates a shadow DOM for the component.
|
||||||
* - loads the selected template into the shadow DOM.
|
* - loads the selected template into the shadow DOM.
|
||||||
* - creates a child {@link Injector} which is configured with the `injectables` for the {@link Component}.
|
* - creates a child {@link Injector} which is configured with the `appInjector` for the {@link Component}.
|
||||||
*
|
*
|
||||||
* All template expressions and statements are then evaluated against the component instance.
|
* All template expressions and statements are then evaluated against the component instance.
|
||||||
*
|
*
|
||||||
|
@ -800,16 +800,16 @@ export class Component extends Directive {
|
||||||
/**
|
/**
|
||||||
* Defines the set of injectable objects that are visible to a Component and its children.
|
* Defines the set of injectable objects that are visible to a Component and its children.
|
||||||
*
|
*
|
||||||
* The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's
|
* The `appInjector` defined in the Component annotation allow you to configure a set of bindings for the component's
|
||||||
* injector.
|
* injector.
|
||||||
*
|
*
|
||||||
* When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
|
* When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
|
||||||
* the Component `injectables` annotation. The injectable objects then become available for injection to the component
|
* the Component `appInjector` annotation. The injectable objects then become available for injection to the component
|
||||||
* itself and any of the directives in the component's template, i.e. they are not available to the directives which
|
* itself and any of the directives in the component's template, i.e. they are not available to the directives which
|
||||||
* are children in the component's light DOM.
|
* are children in the component's light DOM.
|
||||||
*
|
*
|
||||||
*
|
*
|
||||||
* The syntax for configuring the `injectables` injectable is identical to {@link Injector} injectable configuration.
|
* The syntax for configuring the `appInjector` injectable is identical to {@link Injector} injectable configuration.
|
||||||
* See {@link Injector} for additional detail.
|
* See {@link Injector} for additional detail.
|
||||||
*
|
*
|
||||||
*
|
*
|
||||||
|
@ -826,7 +826,7 @@ export class Component extends Directive {
|
||||||
*
|
*
|
||||||
* @Component({
|
* @Component({
|
||||||
* selector: 'greet',
|
* selector: 'greet',
|
||||||
* injectables: [
|
* appInjector: [
|
||||||
* Greeter
|
* Greeter
|
||||||
* ]
|
* ]
|
||||||
* })
|
* })
|
||||||
|
@ -843,7 +843,7 @@ export class Component extends Directive {
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*/
|
*/
|
||||||
injectables:List;
|
appInjector:List;
|
||||||
|
|
||||||
@CONST()
|
@CONST()
|
||||||
constructor({
|
constructor({
|
||||||
|
@ -854,7 +854,7 @@ export class Component extends Directive {
|
||||||
hostProperties,
|
hostProperties,
|
||||||
hostAttributes,
|
hostAttributes,
|
||||||
hostActions,
|
hostActions,
|
||||||
injectables,
|
appInjector,
|
||||||
lifecycle,
|
lifecycle,
|
||||||
changeDetection = DEFAULT,
|
changeDetection = DEFAULT,
|
||||||
compileChildren = true
|
compileChildren = true
|
||||||
|
@ -866,7 +866,7 @@ export class Component extends Directive {
|
||||||
hostProperties:any,
|
hostProperties:any,
|
||||||
hostAttributes:any,
|
hostAttributes:any,
|
||||||
hostActions:any,
|
hostActions:any,
|
||||||
injectables:List,
|
appInjector:List,
|
||||||
lifecycle:List,
|
lifecycle:List,
|
||||||
changeDetection:string,
|
changeDetection:string,
|
||||||
compileChildren:boolean
|
compileChildren:boolean
|
||||||
|
@ -885,7 +885,7 @@ export class Component extends Directive {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.changeDetection = changeDetection;
|
this.changeDetection = changeDetection;
|
||||||
this.injectables = injectables;
|
this.appInjector = appInjector;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -184,7 +184,7 @@ function _createNgZone(givenReporter:Function): NgZone {
|
||||||
* 1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
|
* 1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
|
||||||
* the angular component.
|
* the angular component.
|
||||||
* 2. It creates a new child injector (from the platform injector) and configures the injector with the component's
|
* 2. It creates a new child injector (from the platform injector) and configures the injector with the component's
|
||||||
* `injectables`. Optionally, you can also override the injector configuration for an app by invoking
|
* `appInjector`. Optionally, you can also override the injector configuration for an app by invoking
|
||||||
* `bootstrap` with the `componentInjectableBindings` argument.
|
* `bootstrap` with the `componentInjectableBindings` argument.
|
||||||
* 3. It creates a new `Zone` and connects it to the angular application's change detection domain instance.
|
* 3. It creates a new `Zone` and connects it to the angular application's change detection domain instance.
|
||||||
* 4. It creates a shadow DOM on the selected component's host element and loads the template into it.
|
* 4. It creates a shadow DOM on the selected component's host element and loads the template into it.
|
||||||
|
@ -227,7 +227,7 @@ function _createNgZone(givenReporter:Function): NgZone {
|
||||||
* # API
|
* # API
|
||||||
* - `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
|
* - `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
|
||||||
* which is annotated with `@Component(...)`.
|
* which is annotated with `@Component(...)`.
|
||||||
* - `componentInjectableBindings`: An additional set of bindings that can be added to `injectables` for the
|
* - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector` for the
|
||||||
* {@link Component} to override default injection behavior.
|
* {@link Component} to override default injection behavior.
|
||||||
* - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
|
* - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
|
||||||
*
|
*
|
||||||
|
|
|
@ -279,8 +279,8 @@ export class DirectiveBinding extends ResolvedBinding {
|
||||||
var changeDetection = null;
|
var changeDetection = null;
|
||||||
if (ann instanceof Component) {
|
if (ann instanceof Component) {
|
||||||
renderType = DirectiveMetadata.COMPONENT_TYPE;
|
renderType = DirectiveMetadata.COMPONENT_TYPE;
|
||||||
if (isPresent(ann.injectables)) {
|
if (isPresent(ann.appInjector)) {
|
||||||
resolvedInjectables = Injector.resolve(ann.injectables);
|
resolvedInjectables = Injector.resolve(ann.appInjector);
|
||||||
}
|
}
|
||||||
changeDetection = ann.changeDetection;
|
changeDetection = ann.changeDetection;
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -14,7 +14,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||||
* ```javascript
|
* ```javascript
|
||||||
* @Component({
|
* @Component({
|
||||||
* selector: 'my-app',
|
* selector: 'my-app',
|
||||||
* injectables: [
|
* appInjector: [
|
||||||
* bind(ExceptionHandler).toClass(MyExceptionHandler)
|
* bind(ExceptionHandler).toClass(MyExceptionHandler)
|
||||||
* ]
|
* ]
|
||||||
* })
|
* })
|
||||||
|
|
|
@ -14,7 +14,7 @@ import * as modelModule from './model';
|
||||||
*
|
*
|
||||||
* @Component({
|
* @Component({
|
||||||
* selector: 'login-comp',
|
* selector: 'login-comp',
|
||||||
* injectables: [
|
* appInjector: [
|
||||||
* FormBuilder
|
* FormBuilder
|
||||||
* ]
|
* ]
|
||||||
* })
|
* })
|
||||||
|
|
|
@ -279,7 +279,7 @@ class DynamicComp {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'hello-cmp',
|
selector: 'hello-cmp',
|
||||||
injectables: [DynamicallyCreatedComponentService]
|
appInjector: [DynamicallyCreatedComponentService]
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
template: "{{greeting}}"
|
template: "{{greeting}}"
|
||||||
|
|
|
@ -516,7 +516,7 @@ export function main() {
|
||||||
|
|
||||||
it("should instantiate component directives that depend on app services in the shadow app injector", () => {
|
it("should instantiate component directives that depend on app services in the shadow app injector", () => {
|
||||||
var directiveAnnotation = new Component({
|
var directiveAnnotation = new Component({
|
||||||
injectables: [
|
appInjector: [
|
||||||
bind("service").toValue("service")
|
bind("service").toValue("service")
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
@ -531,7 +531,7 @@ export function main() {
|
||||||
|
|
||||||
it("should not instantiate other directives that depend on app services in the shadow app injector", () => {
|
it("should not instantiate other directives that depend on app services in the shadow app injector", () => {
|
||||||
var directiveAnnotation = new Component({
|
var directiveAnnotation = new Component({
|
||||||
injectables: [
|
appInjector: [
|
||||||
bind("service").toValue("service")
|
bind("service").toValue("service")
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,7 +21,7 @@ void functionThatThrows() {
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
describe('TypeLiteral', () {
|
describe('TypeLiteral', () {
|
||||||
it('should publish via injectables',
|
it('should publish via appInjector',
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) {
|
inject([TestBed, AsyncTestCompleter], (tb, async) {
|
||||||
tb.overrideView(Dummy, new View(
|
tb.overrideView(Dummy, new View(
|
||||||
template: '<type-literal-component></type-literal-component>',
|
template: '<type-literal-component></type-literal-component>',
|
||||||
|
@ -57,7 +57,7 @@ class Dummy {}
|
||||||
|
|
||||||
@Component(
|
@Component(
|
||||||
selector: 'type-literal-component',
|
selector: 'type-literal-component',
|
||||||
injectables: const [
|
appInjector: const [
|
||||||
const Binding(
|
const Binding(
|
||||||
const TypeLiteral<List<String>>(),
|
const TypeLiteral<List<String>>(),
|
||||||
toValue: const <String>['Hello', 'World'])
|
toValue: const <String>['Hello', 'World'])
|
||||||
|
|
|
@ -27,7 +27,6 @@ import {PipeRegistry, defaultPipeRegistry,
|
||||||
ChangeDetection, DynamicChangeDetection, Pipe, ChangeDetectorRef, ON_PUSH} from 'angular2/change_detection';
|
ChangeDetection, DynamicChangeDetection, Pipe, ChangeDetectorRef, ON_PUSH} from 'angular2/change_detection';
|
||||||
|
|
||||||
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
|
||||||
import {QueryList} from 'angular2/src/core/compiler/query_list';
|
import {QueryList} from 'angular2/src/core/compiler/query_list';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||||
|
@ -1112,7 +1111,7 @@ class ComponentWithPipes {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'child-cmp',
|
selector: 'child-cmp',
|
||||||
injectables: [MyService],
|
appInjector: [MyService],
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
directives: [MyDir],
|
directives: [MyDir],
|
||||||
|
@ -1177,7 +1176,7 @@ class CompWithAncestor {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: '[child-cmp2]',
|
selector: '[child-cmp2]',
|
||||||
injectables: [MyService]
|
appInjector: [MyService]
|
||||||
})
|
})
|
||||||
class ChildComp2 {
|
class ChildComp2 {
|
||||||
ctxProp:string;
|
ctxProp:string;
|
||||||
|
@ -1414,23 +1413,6 @@ class NeedsPublicApi {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'child',
|
|
||||||
injectables: [AppDependency]
|
|
||||||
})
|
|
||||||
@View({
|
|
||||||
template: `<div>{{parent.message}}</div>,<div>{{appDependency.parent.message}}</div>`
|
|
||||||
})
|
|
||||||
class ChildComponent {
|
|
||||||
parent:ParentInterface;
|
|
||||||
appDependency:AppDependency;
|
|
||||||
|
|
||||||
constructor(p:ParentInterface, a:AppDependency) {
|
|
||||||
this.parent = p;
|
|
||||||
this.appDependency = a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[toolbar-vc]',
|
selector: '[toolbar-vc]',
|
||||||
properties: {
|
properties: {
|
||||||
|
|
|
@ -14,7 +14,7 @@ void initReflector(reflector) {
|
||||||
'parameters': const [],
|
'parameters': const [],
|
||||||
'annotations': const [
|
'annotations': const [
|
||||||
const Component(
|
const Component(
|
||||||
selector: '[soup]', injectables: const [dep.DependencyComponent])
|
selector: '[soup]', appInjector: const [dep.DependencyComponent])
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ void initReflector(reflector) {
|
||||||
'parameters': const [],
|
'parameters': const [],
|
||||||
'annotations': const [
|
'annotations': const [
|
||||||
const Component(
|
const Component(
|
||||||
selector: '[soup]', injectables: const [dep.DependencyComponent])
|
selector: '[soup]', appInjector: const [dep.DependencyComponent])
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
i0.initReflector(reflector);
|
i0.initReflector(reflector);
|
||||||
|
|
|
@ -124,7 +124,7 @@ class SurveyQuestion {
|
||||||
// SurveyBuilder is a form that allows you to create a survey.
|
// SurveyBuilder is a form that allows you to create a survey.
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'survey-builder-app',
|
selector: 'survey-builder-app',
|
||||||
injectables: [FormBuilder]
|
appInjector: [FormBuilder]
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
template: `
|
template: `
|
||||||
|
|
|
@ -21,7 +21,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
selector: 'hello-app',
|
selector: 'hello-app',
|
||||||
// These are services that would be created if a class in the component's
|
// These are services that would be created if a class in the component's
|
||||||
// template tries to inject them.
|
// template tries to inject them.
|
||||||
injectables: [GreetingService]
|
appInjector: [GreetingService]
|
||||||
})
|
})
|
||||||
// The template for the component.
|
// The template for the component.
|
||||||
@View({
|
@View({
|
||||||
|
|
|
@ -13,7 +13,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'demo-app',
|
selector: 'demo-app',
|
||||||
injectables: [MdDialog]
|
appInjector: [MdDialog]
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: './demo_app.html',
|
templateUrl: './demo_app.html',
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'demo-app',
|
selector: 'demo-app',
|
||||||
injectables: [MdRadioDispatcher]
|
appInjector: [MdRadioDispatcher]
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: './demo_app.html',
|
templateUrl: './demo_app.html',
|
||||||
|
|
|
@ -10,7 +10,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'todo-app',
|
selector: 'todo-app',
|
||||||
injectables: [
|
appInjector: [
|
||||||
Store,
|
Store,
|
||||||
TodoFactory
|
TodoFactory
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue