refactor(upgrade/upgrade_adapter): use `Deferred` helper

Making Angular 1's `$compile` asynchronous by chaining injector promises
in linking functions can cause flickering views in applications.
This commit is contained in:
Peter Bacon Darwin 2016-11-03 14:48:11 +00:00 committed by Victor Berchet
parent eab7e490c9
commit d6e5e9283c
2 changed files with 59 additions and 48 deletions

View File

@ -14,7 +14,7 @@ import {NG1_COMPILE, NG1_INJECTOR, NG1_PARSE, NG1_ROOT_SCOPE, NG1_TESTABILITY, N
import {DowngradeNg2ComponentAdapter} from './downgrade_ng2_adapter';
import {ComponentInfo, getComponentInfo} from './metadata';
import {UpgradeNg1ComponentAdapterBuilder} from './upgrade_ng1_adapter';
import {controllerKey, onError} from './util';
import {controllerKey, onError, Deferred} from './util';
let upgradeCount: number = 0;
@ -326,7 +326,7 @@ export class UpgradeAdapter {
const componentFactoryRefMap: ComponentFactoryRefMap = {};
const ng1Module = angular.module(this.idPrefix, modules);
let ng1BootstrapPromise: Promise<any>;
let ng1compilePromise: Promise<any>;
const ng2BootstrapDeferred = new Deferred();
ng1Module.factory(NG2_INJECTOR, () => moduleRef.injector.get(Injector))
.value(NG2_ZONE, ngZone)
.factory(NG2_COMPILER, () => moduleRef.injector.get(Compiler))
@ -375,7 +375,6 @@ export class UpgradeAdapter {
}
]);
ng1compilePromise = new Promise((resolve, reject) => {
ng1Module.run([
'$injector', '$rootScope',
(injector: angular.IInjectorService, rootScope: angular.IRootScopeService) => {
@ -417,12 +416,11 @@ export class UpgradeAdapter {
next: (_: any) => ngZone.runOutsideAngular(() => rootScope.$evalAsync())
});
})
.then(resolve, reject);
.then(ng2BootstrapDeferred.resolve, ng2BootstrapDeferred.reject);
})
.catch(reject);
.catch(ng2BootstrapDeferred.reject);
}
]);
});
// Make sure resumeBootstrap() only exists if the current bootstrap is deferred
const windowAngular = (window as any /** TODO #???? */)['angular'];
@ -443,7 +441,7 @@ export class UpgradeAdapter {
}
});
Promise.all([ng1BootstrapPromise, ng1compilePromise]).then(() => {
Promise.all([ng1BootstrapPromise, ng2BootstrapDeferred.promise]).then(() => {
moduleRef.injector.get(NgZone).run(() => {
if (rootScopePrototype) {
rootScopePrototype.$apply = original$applyFn; // restore original $apply

View File

@ -22,3 +22,16 @@ export function onError(e: any) {
export function controllerKey(name: string): string {
return '$' + name + 'Controller';
}
export class Deferred<R> {
promise: Promise<R>;
resolve: (value?: R|PromiseLike<R>) => void;
reject: (error?: any) => void;
constructor() {
this.promise = new Promise((res, rej) => {
this.resolve = res;
this.reject = rej;
});
}
}