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
|
||||
|
||||
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.
|
||||
|
||||
|
@ -227,7 +227,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.
|
||||
injectables: [MyService] |
|
||||
appInjector: [MyService] |
|
||||
}) |
|
||||
@View({ | Assume we have a template that needs to be
|
||||
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({
|
||||
selector: '[kid]',
|
||||
injectables: []
|
||||
appInjector: []
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'kid.html',
|
||||
|
@ -349,7 +349,7 @@ class Kid {
|
|||
|
||||
@Component({
|
||||
selector: '[dad]',
|
||||
injectables: [Grandpa]
|
||||
appInjector: [Grandpa]
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'dad.html',
|
||||
|
@ -364,7 +364,7 @@ class Dad {
|
|||
|
||||
@Component({
|
||||
selector: '[grandpa]',
|
||||
injectables: []
|
||||
appInjector: []
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'grandpa.html',
|
||||
|
|
|
@ -714,7 +714,7 @@ export class Directive extends Injectable {
|
|||
* When a component is instantiated, Angular
|
||||
* - creates a shadow DOM for the component.
|
||||
* - 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.
|
||||
*
|
||||
|
@ -800,16 +800,16 @@ export class Component extends Directive {
|
|||
/**
|
||||
* 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.
|
||||
*
|
||||
* 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
|
||||
* 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.
|
||||
*
|
||||
*
|
||||
|
@ -826,7 +826,7 @@ export class Component extends Directive {
|
|||
*
|
||||
* @Component({
|
||||
* selector: 'greet',
|
||||
* injectables: [
|
||||
* appInjector: [
|
||||
* Greeter
|
||||
* ]
|
||||
* })
|
||||
|
@ -843,7 +843,7 @@ export class Component extends Directive {
|
|||
* }
|
||||
* ```
|
||||
*/
|
||||
injectables:List;
|
||||
appInjector:List;
|
||||
|
||||
@CONST()
|
||||
constructor({
|
||||
|
@ -854,7 +854,7 @@ export class Component extends Directive {
|
|||
hostProperties,
|
||||
hostAttributes,
|
||||
hostActions,
|
||||
injectables,
|
||||
appInjector,
|
||||
lifecycle,
|
||||
changeDetection = DEFAULT,
|
||||
compileChildren = true
|
||||
|
@ -866,7 +866,7 @@ export class Component extends Directive {
|
|||
hostProperties:any,
|
||||
hostAttributes:any,
|
||||
hostActions:any,
|
||||
injectables:List,
|
||||
appInjector:List,
|
||||
lifecycle:List,
|
||||
changeDetection:string,
|
||||
compileChildren:boolean
|
||||
|
@ -885,7 +885,7 @@ export class Component extends Directive {
|
|||
});
|
||||
|
||||
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
|
||||
* the angular component.
|
||||
* 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.
|
||||
* 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.
|
||||
|
@ -227,7 +227,7 @@ function _createNgZone(givenReporter:Function): NgZone {
|
|||
* # API
|
||||
* - `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
|
||||
* 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.
|
||||
* - `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;
|
||||
if (ann instanceof Component) {
|
||||
renderType = DirectiveMetadata.COMPONENT_TYPE;
|
||||
if (isPresent(ann.injectables)) {
|
||||
resolvedInjectables = Injector.resolve(ann.injectables);
|
||||
if (isPresent(ann.appInjector)) {
|
||||
resolvedInjectables = Injector.resolve(ann.appInjector);
|
||||
}
|
||||
changeDetection = ann.changeDetection;
|
||||
} else {
|
||||
|
|
|
@ -14,7 +14,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
|
|||
* ```javascript
|
||||
* @Component({
|
||||
* selector: 'my-app',
|
||||
* injectables: [
|
||||
* appInjector: [
|
||||
* bind(ExceptionHandler).toClass(MyExceptionHandler)
|
||||
* ]
|
||||
* })
|
||||
|
|
|
@ -14,7 +14,7 @@ import * as modelModule from './model';
|
|||
*
|
||||
* @Component({
|
||||
* selector: 'login-comp',
|
||||
* injectables: [
|
||||
* appInjector: [
|
||||
* FormBuilder
|
||||
* ]
|
||||
* })
|
||||
|
|
|
@ -279,7 +279,7 @@ class DynamicComp {
|
|||
|
||||
@Component({
|
||||
selector: 'hello-cmp',
|
||||
injectables: [DynamicallyCreatedComponentService]
|
||||
appInjector: [DynamicallyCreatedComponentService]
|
||||
})
|
||||
@View({
|
||||
template: "{{greeting}}"
|
||||
|
|
|
@ -516,7 +516,7 @@ export function main() {
|
|||
|
||||
it("should instantiate component directives that depend on app services in the shadow app injector", () => {
|
||||
var directiveAnnotation = new Component({
|
||||
injectables: [
|
||||
appInjector: [
|
||||
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", () => {
|
||||
var directiveAnnotation = new Component({
|
||||
injectables: [
|
||||
appInjector: [
|
||||
bind("service").toValue("service")
|
||||
]
|
||||
});
|
||||
|
|
|
@ -21,7 +21,7 @@ void functionThatThrows() {
|
|||
|
||||
main() {
|
||||
describe('TypeLiteral', () {
|
||||
it('should publish via injectables',
|
||||
it('should publish via appInjector',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) {
|
||||
tb.overrideView(Dummy, new View(
|
||||
template: '<type-literal-component></type-literal-component>',
|
||||
|
@ -57,7 +57,7 @@ class Dummy {}
|
|||
|
||||
@Component(
|
||||
selector: 'type-literal-component',
|
||||
injectables: const [
|
||||
appInjector: const [
|
||||
const Binding(
|
||||
const TypeLiteral<List<String>>(),
|
||||
toValue: const <String>['Hello', 'World'])
|
||||
|
|
|
@ -27,7 +27,6 @@ import {PipeRegistry, defaultPipeRegistry,
|
|||
ChangeDetection, DynamicChangeDetection, Pipe, ChangeDetectorRef, ON_PUSH} from 'angular2/change_detection';
|
||||
|
||||
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 {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||
|
@ -1112,7 +1111,7 @@ class ComponentWithPipes {
|
|||
|
||||
@Component({
|
||||
selector: 'child-cmp',
|
||||
injectables: [MyService],
|
||||
appInjector: [MyService],
|
||||
})
|
||||
@View({
|
||||
directives: [MyDir],
|
||||
|
@ -1177,7 +1176,7 @@ class CompWithAncestor {
|
|||
|
||||
@Component({
|
||||
selector: '[child-cmp2]',
|
||||
injectables: [MyService]
|
||||
appInjector: [MyService]
|
||||
})
|
||||
class ChildComp2 {
|
||||
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({
|
||||
selector: '[toolbar-vc]',
|
||||
properties: {
|
||||
|
|
|
@ -14,7 +14,7 @@ void initReflector(reflector) {
|
|||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Component(
|
||||
selector: '[soup]', injectables: const [dep.DependencyComponent])
|
||||
selector: '[soup]', appInjector: const [dep.DependencyComponent])
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -15,7 +15,7 @@ void initReflector(reflector) {
|
|||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Component(
|
||||
selector: '[soup]', injectables: const [dep.DependencyComponent])
|
||||
selector: '[soup]', appInjector: const [dep.DependencyComponent])
|
||||
]
|
||||
});
|
||||
i0.initReflector(reflector);
|
||||
|
|
|
@ -124,7 +124,7 @@ class SurveyQuestion {
|
|||
// SurveyBuilder is a form that allows you to create a survey.
|
||||
@Component({
|
||||
selector: 'survey-builder-app',
|
||||
injectables: [FormBuilder]
|
||||
appInjector: [FormBuilder]
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
|
|
|
@ -21,7 +21,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
selector: 'hello-app',
|
||||
// These are services that would be created if a class in the component's
|
||||
// template tries to inject them.
|
||||
injectables: [GreetingService]
|
||||
appInjector: [GreetingService]
|
||||
})
|
||||
// The template for the component.
|
||||
@View({
|
||||
|
|
|
@ -13,7 +13,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
|
||||
@Component({
|
||||
selector: 'demo-app',
|
||||
injectables: [MdDialog]
|
||||
appInjector: [MdDialog]
|
||||
})
|
||||
@View({
|
||||
templateUrl: './demo_app.html',
|
||||
|
|
|
@ -12,7 +12,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
|
||||
@Component({
|
||||
selector: 'demo-app',
|
||||
injectables: [MdRadioDispatcher]
|
||||
appInjector: [MdRadioDispatcher]
|
||||
})
|
||||
@View({
|
||||
templateUrl: './demo_app.html',
|
||||
|
|
|
@ -10,7 +10,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
|||
|
||||
@Component({
|
||||
selector: 'todo-app',
|
||||
injectables: [
|
||||
appInjector: [
|
||||
Store,
|
||||
TodoFactory
|
||||
]
|
||||
|
|
Loading…
Reference in New Issue