refactor(core): Move LifeCycle functionality into ApplicationRef.

BREAKING CHANGE:

Before: constructor(@Inject(LifeCycle) lifecycle) { lifecycle.tick(); }
After: constructor(@Inject(ApplicationRef) appRef) { appRef.tick(); }

Closes #5008
This commit is contained in:
Alex Rickabaugh 2015-10-28 10:34:13 -07:00
parent ef23fe66a0
commit 72e65d6797
19 changed files with 144 additions and 182 deletions

View File

@ -12,7 +12,6 @@ export 'package:angular2/src/core/application_ref.dart'
hide ApplicationRef_, PlatformRef_;
export 'package:angular2/src/core/services.dart';
export 'package:angular2/src/core/linker.dart';
export 'package:angular2/src/core/lifecycle.dart';
export 'package:angular2/src/core/zone.dart';
export 'package:angular2/src/core/render.dart';
export 'package:angular2/src/core/directives.dart';

View File

@ -12,7 +12,7 @@ export * from './src/core/application';
export * from './src/core/bootstrap';
export * from './src/core/services';
export * from './src/core/linker';
export * from './src/core/lifecycle';
export {ApplicationRef} from './src/core/application_ref';
export * from './src/core/zone';
export * from './src/core/render';
export * from './src/core/directives';

View File

@ -22,7 +22,6 @@ import {
} from 'angular2/src/core/facade/exceptions';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {internalView} from 'angular2/src/core/linker/view_ref';
import {LifeCycle, LifeCycle_} from 'angular2/src/core/life_cycle/life_cycle';
import {
IterableDiffers,
defaultIterableDiffers,
@ -42,6 +41,8 @@ import {Compiler} from 'angular2/src/core/linker/compiler';
import {DynamicComponentLoader_} from "./linker/dynamic_component_loader";
import {AppViewManager_} from "./linker/view_manager";
import {Compiler_} from "./linker/compiler";
import {wtfLeave, wtfCreateScope, WtfScopeFn} from './profile/profile';
import {ChangeDetectorRef} from 'angular2/src/core/change_detection/change_detector_ref';
/**
* Constructs the set of providers meant for use at the platform level.
@ -103,12 +104,7 @@ export function applicationCommonProviders(): Array<Type | Provider | any[]> {
provide(KeyValueDiffers, {useValue: defaultKeyValueDiffers}),
DirectiveResolver,
PipeResolver,
provide(DynamicComponentLoader, {useClass: DynamicComponentLoader_}),
provide(LifeCycle,
{
useFactory: (exceptionHandler) => new LifeCycle_(null, assertionsEnabled()),
deps: [ExceptionHandler]
})
provide(DynamicComponentLoader, {useClass: DynamicComponentLoader_})
];
}
@ -333,6 +329,18 @@ export abstract class ApplicationRef {
*/
abstract dispose(): void;
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further changes are detected. If additional changes are picked up during this second cycle,
* bindings in the app have side-effects that cannot be resolved in a single change detection
* pass.
* In this case, Angular throws an error, since an Angular application can only have one change
* detection pass during which all change detection must complete.
*/
abstract tick(): void;
/**
* Get a list of component types registered to this application.
*/
@ -340,13 +348,30 @@ export abstract class ApplicationRef {
}
export class ApplicationRef_ extends ApplicationRef {
/** @internal */
static _tickScope: WtfScopeFn = wtfCreateScope('ApplicationRef#tick()');
/** @internal */
private _bootstrapListeners: Function[] = [];
/** @internal */
private _disposeListeners: Function[] = [];
/** @internal */
private _rootComponents: ComponentRef[] = [];
/** @internal */
private _rootComponentTypes: Type[] = [];
/** @internal */
private _changeDetectorRefs: ChangeDetectorRef[] = [];
/** @internal */
private _runningTick: boolean = false;
/** @internal */
private _enforceNoNewChanges: boolean = false;
constructor(private _platform: PlatformRef_, private _zone: NgZone, private _injector: Injector) {
super();
if (isPresent(this._zone)) {
this._zone.overrideOnTurnDone(() => this.tick());
}
this._enforceNoNewChanges = assertionsEnabled();
}
registerBootstrapListener(listener: (ref: ComponentRef) => void): void {
@ -355,6 +380,10 @@ export class ApplicationRef_ extends ApplicationRef {
registerDisposeListener(dispose: () => void): void { this._disposeListeners.push(dispose); }
registerChangeDetector(changeDetector: ChangeDetectorRef): void {
this._changeDetectorRefs.push(changeDetector);
}
bootstrap(componentType: Type,
providers?: Array<Type | Provider | any[]>): Promise<ComponentRef> {
var completer = PromiseWrapper.completer();
@ -370,9 +399,8 @@ export class ApplicationRef_ extends ApplicationRef {
var compRefToken: Promise<ComponentRef> = injector.get(APP_COMPONENT_REF_PROMISE);
var tick = (componentRef) => {
var appChangeDetector = internalView(componentRef.hostView).changeDetector;
var lc = injector.get(LifeCycle);
lc.registerWith(this._zone, appChangeDetector);
lc.tick();
this._changeDetectorRefs.push(appChangeDetector.ref);
this.tick();
completer.resolve(componentRef);
this._rootComponents.push(componentRef);
this._bootstrapListeners.forEach((listener) => listener(componentRef));
@ -395,6 +423,24 @@ export class ApplicationRef_ extends ApplicationRef {
get zone(): NgZone { return this._zone; }
tick(): void {
if (this._runningTick) {
throw new BaseException("ApplicationRef.tick is called recursively");
}
var s = ApplicationRef_._tickScope();
try {
this._runningTick = true;
this._changeDetectorRefs.forEach((detector) => detector.detectChanges());
if (this._enforceNoNewChanges) {
this._changeDetectorRefs.forEach((detector) => detector.checkNoChanges());
}
} finally {
this._runningTick = false;
wtfLeave(s);
}
}
dispose(): void {
// TODO(alxhub): Dispose of the NgZone.
this._rootComponents.forEach((ref) => ref.dispose());

View File

@ -126,6 +126,14 @@ export abstract class ChangeDetectorRef {
*/
abstract detectChanges(): void;
/**
* Checks the change detector and its children, and throws if any changes are detected.
*
* This is used in development mode to verify that running change detection doesn't introduce
* other changes.
*/
abstract checkNoChanges(): void;
/**
* Reattach the change detector to the change detector tree.
*
@ -192,6 +200,7 @@ export class ChangeDetectorRef_ extends ChangeDetectorRef {
markForCheck(): void { this._cd.markPathToRootAsCheckOnce(); }
detach(): void { this._cd.mode = ChangeDetectionStrategy.Detached; }
detectChanges(): void { this._cd.detectChanges(); }
checkNoChanges(): void { this._cd.checkNoChanges(); }
reattach(): void {
this._cd.mode = ChangeDetectionStrategy.CheckAlways;
this.markForCheck();

View File

@ -1,97 +0,0 @@
import {Injectable} from 'angular2/src/core/di';
import {ChangeDetector} from 'angular2/src/core/change_detection/change_detection';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {isPresent} from 'angular2/src/core/facade/lang';
import {BaseException, WrappedException} from 'angular2/src/core/facade/exceptions';
import {wtfLeave, wtfCreateScope, WtfScopeFn} from '../profile/profile';
/**
* Provides access to explicitly trigger change detection in an application.
*
* By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
* testing, or in some
* limited application use cases, a developer can also trigger change detection with the
* `lifecycle.tick()` method.
*
* Each Angular application has a single `LifeCycle` instance.
*
* ### Example
*
* This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
* invokes
* `lifecycle.tick()` on your behalf.
*
* ```javascript
* bootstrap(MyApp).then((ref:ComponentRef) => {
* var lifeCycle = ref.injector.get(LifeCycle);
* var myApp = ref.instance;
*
* ref.doSomething();
* lifecycle.tick();
* });
* ```
*/
export abstract class LifeCycle {
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further
* changes are detected. If additional changes are picked up during this second cycle, bindings
* in
* the app have
* side-effects that cannot be resolved in a single change detection pass. In this case, Angular
* throws an error,
* since an Angular application can only have one change detection pass during which all change
* detection must
* complete.
*
*/
abstract tick();
}
@Injectable()
export class LifeCycle_ extends LifeCycle {
/** @internal */
static _tickScope: WtfScopeFn = wtfCreateScope('LifeCycle#tick()');
/** @internal */
_changeDetectors: ChangeDetector[];
/** @internal */
_enforceNoNewChanges: boolean;
/** @internal */
_runningTick: boolean = false;
constructor(changeDetector: ChangeDetector = null, enforceNoNewChanges: boolean = false) {
super();
this._changeDetectors = [];
if (isPresent(changeDetector)) {
this._changeDetectors.push(changeDetector);
}
this._enforceNoNewChanges = enforceNoNewChanges;
}
registerWith(zone: NgZone, changeDetector: ChangeDetector = null) {
if (isPresent(changeDetector)) {
this._changeDetectors.push(changeDetector);
}
zone.overrideOnTurnDone(() => this.tick());
}
tick() {
if (this._runningTick) {
throw new BaseException("LifeCycle.tick is called recursively");
}
var s = LifeCycle_._tickScope();
try {
this._runningTick = true;
this._changeDetectors.forEach((detector) => detector.detectChanges());
if (this._enforceNoNewChanges) {
this._changeDetectors.forEach((detector) => detector.checkNoChanges());
}
} finally {
this._runningTick = false;
wtfLeave(s);
}
}
}

View File

@ -1,2 +0,0 @@
// Public API for LifeCycle
export {LifeCycle} from './life_cycle/life_cycle';

View File

@ -20,5 +20,7 @@ export class MockApplicationRef extends ApplicationRef {
dispose(): void {}
tick(): void {}
get componentTypes(): Type[] { return null; };
}

View File

@ -1,4 +1,4 @@
import {LifeCycle} from 'angular2/angular2';
import {ApplicationRef} from 'angular2/src/core/application_ref';
import {ComponentRef, ComponentRef_} from 'angular2/src/core/linker/dynamic_component_loader';
import {isPresent, NumberWrapper} from 'angular2/src/core/facade/lang';
import {performance, window} from 'angular2/src/core/facade/browser';
@ -19,9 +19,11 @@ export class AngularTools {
* corresponds to the `ng.profiler` in the dev console.
*/
export class AngularProfiler {
lifeCycle: LifeCycle;
appRef: ApplicationRef;
constructor(ref: ComponentRef) { this.lifeCycle = (<ComponentRef_>ref).injector.get(LifeCycle); }
constructor(ref: ComponentRef) {
this.appRef = (<ComponentRef_>ref).injector.get(ApplicationRef);
}
/**
* Exercises change detection in a loop and then prints the average amount of
@ -50,7 +52,7 @@ export class AngularProfiler {
var start = DOM.performanceNow();
var numTicks = 0;
while (numTicks < 5 || (DOM.performanceNow() - start) < 500) {
this.lifeCycle.tick();
this.appRef.tick();
numTicks++;
}
var end = DOM.performanceNow();

View File

@ -0,0 +1,30 @@
import {
ddescribe,
describe,
it,
iit,
xit,
expect,
beforeEach,
afterEach,
el,
AsyncTestCompleter,
fakeAsync,
tick,
inject
} from 'angular2/testing_internal';
import {SpyChangeDetector} from './spies';
import {ApplicationRef_} from "angular2/src/core/application_ref";
import {ChangeDetectorRef_} from "angular2/src/core/change_detection/change_detector_ref";
export function main() {
describe("ApplicationRef", () => {
it("should throw when reentering tick", () => {
var cd = <any>new SpyChangeDetector();
var ref = new ApplicationRef_(null, null, null);
ref.registerChangeDetector(new ChangeDetectorRef_(cd));
cd.spy("detectChanges").andCallFake(() => ref.tick());
expect(() => ref.tick()).toThrowError("ApplicationRef.tick is called recursively");
});
});
}

View File

@ -17,7 +17,7 @@ import {Component, Directive, View} from 'angular2/core';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {DOCUMENT} from 'angular2/render';
import {PromiseWrapper} from 'angular2/src/core/facade/async';
import {provide, Inject, Injector, LifeCycle} from 'angular2/core';
import {provide, Inject, Injector} from 'angular2/core';
import {ExceptionHandler} from 'angular2/src/core/facade/exceptions';
import {Testability, TestabilityRegistry} from 'angular2/src/core/testability/testability';
import {IS_DART} from '../platform';
@ -54,9 +54,9 @@ class HelloRootCmp3 {
@Component({selector: 'hello-app'})
@View({template: ''})
class HelloRootCmp4 {
lc;
appRef;
constructor(@Inject(LifeCycle) lc) { this.lc = lc; }
constructor(@Inject(ApplicationRef) appRef) { this.appRef = appRef; }
}
@Component({selector: 'hello-app'})
@ -179,7 +179,7 @@ export function main() {
var refPromise = bootstrap(HelloRootCmp4, testProviders);
refPromise.then((ref) => {
expect(ref.hostComponent.lc).toBe((<ComponentRef_>ref).injector.get(LifeCycle));
expect(ref.hostComponent.appRef).toBe((<ComponentRef_>ref).injector.get(ApplicationRef));
async.done();
});
}));

View File

@ -1,29 +0,0 @@
import {
ddescribe,
describe,
it,
iit,
xit,
expect,
beforeEach,
afterEach,
el,
AsyncTestCompleter,
fakeAsync,
tick,
inject
} from 'angular2/testing_internal';
import {SpyChangeDetector} from '../spies';
import {LifeCycle_} from "angular2/src/core/life_cycle/life_cycle";
export function main() {
describe("LifeCycle", () => {
it("should throw when reentering tick", () => {
var cd = <any>new SpyChangeDetector();
var lc = new LifeCycle_(cd, false);
cd.spy("detectChanges").andCallFake(() => lc.tick());
expect(() => lc.tick()).toThrowError("LifeCycle.tick is called recursively");
});
});
}

View File

@ -102,6 +102,7 @@ var NG_API = [
'ApplicationRef.dispose()',
'ApplicationRef.registerBootstrapListener()',
'ApplicationRef.registerDisposeListener()',
'ApplicationRef.tick()',
*/
'AsyncPipe',
'AsyncPipe.onDestroy()',
@ -610,12 +611,6 @@ var NG_API = [
'KeyValueDiffers',
'KeyValueDiffers.factories',
'KeyValueDiffers.find()',
'LifeCycle', // TODO: replace with ApplicationRef
/*
Abstract methods
'LifeCycle.registerWith()',
'LifeCycle.tick()',
*/
'LowerCasePipe',
'LowerCasePipe.transform()',
'NG_VALIDATORS',

View File

@ -1,11 +1,13 @@
import 'package:angular2/testing_internal.dart' show SpyObject;
import 'package:angular2/core.dart' show LifeCycle, Injector, bind;
import 'package:angular2/core.dart' show Injector, bind;
import 'package:angular2/src/core/application_ref.dart' show ApplicationRef;
import 'package:angular2/src/core/linker/dynamic_component_loader.dart'
show ComponentRef_;
import 'dart:js';
@proxy
class SpyLifeCycle extends SpyObject implements LifeCycle {
class SpyApplicationRef extends SpyObject implements ApplicationRef {
tick() {}
noSuchMethod(m) => super.noSuchMethod(m);
}
@ -15,7 +17,7 @@ class SpyComponentRef extends SpyObject implements ComponentRef_ {
SpyComponentRef() {
this.injector =
Injector.resolveAndCreate([bind(LifeCycle).toClass(SpyLifeCycle)]);
Injector.resolveAndCreate([bind(ApplicationRef).toClass(SpyApplicationRef)]);
}
noSuchMethod(m) => super.noSuchMethod(m);

View File

@ -1,13 +1,19 @@
import {SpyObject} from 'angular2/testing_internal';
import {LifeCycle, Injector, provide} from 'angular2/angular2';
import {Injector, provide} from 'angular2/angular2';
import {ComponentRef} from 'angular2/src/core/linker/dynamic_component_loader';
import {global} from 'angular2/src/core/facade/lang';
import {ApplicationRef, ApplicationRef_} from 'angular2/src/core/application_ref';
export class SpyApplicationRef extends SpyObject {
constructor() { super(ApplicationRef_); }
}
export class SpyComponentRef extends SpyObject {
injector;
constructor() {
super();
this.injector = Injector.resolveAndCreate([provide(LifeCycle, {useValue: {tick: () => {}}})]);
this.injector =
Injector.resolveAndCreate([provide(ApplicationRef, {useClass: SpyApplicationRef})]);
}
}

View File

@ -10,7 +10,6 @@ export * from '../src/core/facade';
export * from '../src/core/application_ref';
export * from '../src/core/services';
export * from '../src/core/linker';
export * from '../src/core/lifecycle';
export * from '../src/core/zone';
// Do not export render in web_worker
// export * from '../src/core/render';

View File

@ -8,7 +8,7 @@ import {
NgIf,
NgFor
} from 'angular2/core';
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {ApplicationRef} from 'angular2/src/core/application_ref';
import {ListWrapper} from 'angular2/src/core/facade/collection';
import {getIntParameter, bindAction} from 'angular2/src/testing/benchmark_util';
@ -22,29 +22,29 @@ export function main() {
.then((ref) => {
var injector = ref.injector;
var app: AppComponent = ref.hostComponent;
var lifeCycle = injector.get(LifeCycle);
var appRef = injector.get(ApplicationRef);
bindAction('#reset', function() {
app.reset();
lifeCycle.tick();
appRef.tick();
});
// Baseline (plain components)
bindAction('#createPlainComponents', function() {
app.createPlainComponents();
lifeCycle.tick();
appRef.tick();
});
// Components with decorators
bindAction('#createComponentsWithDirectives', function() {
app.createComponentsWithDirectives();
lifeCycle.tick();
appRef.tick();
});
// Components with decorators
bindAction('#createDynamicComponents', function() {
app.createDynamicComponents();
lifeCycle.tick();
appRef.tick();
});
});
}

View File

@ -17,9 +17,9 @@ import {
NgFor,
NgSwitch,
NgSwitchWhen,
NgSwitchDefault,
LifeCycle
NgSwitchDefault
} from 'angular2/core';
import {ApplicationRef} from 'angular2/src/core/application_ref';
import {BrowserDomAdapter} from 'angular2/src/core/dom/browser_adapter';
import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/linker/view_pool';
@ -65,7 +65,7 @@ export function main() {
BASELINE_LARGETABLE_TEMPLATE = DOM.createTemplate('<table></table>');
var app;
var lifecycle;
var appRef;
var baselineRootLargetableComponent;
function ng2DestroyDom() {
@ -73,7 +73,7 @@ export function main() {
// --> this should be already caught in change detection!
app.data = null;
app.benchmarkType = 'none';
lifecycle.tick();
appRef.tick();
}
function profile(create, destroy, name) {
@ -116,7 +116,7 @@ export function main() {
}
app.data = data;
app.benchmarkType = getStringParameter('benchmarkType');
lifecycle.tick();
appRef.tick();
}
function noop() {}
@ -126,7 +126,7 @@ export function main() {
.then((ref) => {
var injector = ref.injector;
app = ref.hostComponent;
lifecycle = injector.get(LifeCycle);
appRef = injector.get(ApplicationRef);
bindAction('#ng2DestroyDom', ng2DestroyDom);
bindAction('#ng2CreateDom', ng2CreateDom);
bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update'));

View File

@ -11,7 +11,7 @@ import {
NgIf
} from 'angular2/core';
import {ComponentRef_} from 'angular2/src/core/linker/dynamic_component_loader';
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {ApplicationRef} from 'angular2/src/core/application_ref';
import {reflector} from 'angular2/src/core/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
@ -43,7 +43,7 @@ export function main() {
setupReflector();
var app;
var lifeCycle;
var appRef;
var baselineRootTreeComponent;
var count = 0;
@ -86,19 +86,19 @@ export function main() {
function ng2DestroyDom() {
app.initData = null;
lifeCycle.tick();
appRef.tick();
}
function ng2CreateDom() {
app.initData = createData();
lifeCycle.tick();
appRef.tick();
}
function initNg2() {
bootstrap(AppComponentWithStaticTree, createBindings())
.then((ref) => {
var injector = (<ComponentRef_>ref).injector;
lifeCycle = injector.get(LifeCycle);
appRef = injector.get(ApplicationRef);
app = (<ComponentRef_>ref).hostComponent;
bindAction('#ng2DestroyDom', ng2DestroyDom);

View File

@ -11,7 +11,7 @@ import {
NgIf
} from 'angular2/core';
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {ApplicationRef} from 'angular2/src/core/application_ref';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {isPresent} from 'angular2/src/core/facade/lang';
import {window, document, gc} from 'angular2/src/core/facade/browser';
@ -42,7 +42,7 @@ export function main() {
BASELINE_IF_TEMPLATE = DOM.createTemplate('<span template="if"><tree></tree></span>');
var app;
var lifeCycle;
var appRef;
var baselineRootTreeComponent;
var count = 0;
@ -50,7 +50,7 @@ export function main() {
// TODO: We need an initial value as otherwise the getter for data.value will fail
// --> this should be already caught in change detection!
app.initData = new TreeNode('', null, null);
lifeCycle.tick();
appRef.tick();
}
function profile(create, destroy, name) {
@ -86,7 +86,7 @@ export function main() {
var values = count++ % 2 == 0 ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
app.initData = buildTree(maxDepth, values, 0);
lifeCycle.tick();
appRef.tick();
}
function noop() {}
@ -95,7 +95,7 @@ export function main() {
bootstrap(AppComponent, createProviders())
.then((ref) => {
var injector = ref.injector;
lifeCycle = injector.get(LifeCycle);
appRef = injector.get(ApplicationRef);
app = ref.hostComponent;
bindAction('#ng2DestroyDom', ng2DestroyDom);