cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lifecycle): prefix lifecycle methods with "ng"

Browse Source 
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.

To fix, just rename these methods:
 * onInit
 * onDestroy
 * doCheck
 * onChanges
 * afterContentInit
 * afterContentChecked
 * afterViewInit
 * afterViewChecked
 * _Router Hooks_
 * onActivate
 * onReuse
 * onDeactivate
 * canReuse
 * canDeactivate

To:
 * ngOnInit,
 * ngOnDestroy,
 * ngDoCheck,
 * ngOnChanges,
 * ngAfterContentInit,
 * ngAfterContentChecked,
 * ngAfterViewInit,
 * ngAfterViewChecked
 * _Router Hooks_
 * routerOnActivate
 * routerOnReuse
 * routerOnDeactivate
 * routerCanReuse
 * routerCanDeactivate

The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.

Closes #5036
This commit is contained in:
Jeff Cross
2015-11-16 17:04:36 -08:00
committed by vsavkin
parent 4215afc639
commit 604c8bbad5
63 changed files with 618 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
modules/angular2/src/router/interfaces.ts
View File

@ -8,34 +8,37 @@ var __ignore_me = global;
/**
* Defines route lifecycle method `onActivate`, which is called by the router at the end of a
* Defines route lifecycle method `routerOnActivate`, which is called by the router at the end of a
* successful route navigation.
*
* For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
* will be called depending on the result of {@link CanReuse}.
*
* The `onActivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
* The `routerOnActivate` hook is called with two {@link ComponentInstruction}s as parameters, the
* first
* representing the current route being navigated to, and the second parameter representing the
* previous route or `null`.
*
* If `onActivate` returns a promise, the route change will wait until the promise settles to
* If `routerOnActivate` returns a promise, the route change will wait until the promise settles to
* instantiate and activate child components.
*
* ### Example
* {@example router/ts/on_activate/on_activate_example.ts region='onActivate'}
* {@example router/ts/on_activate/on_activate_example.ts region='routerOnActivate'}
*/
export interface OnActivate {
onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
routerOnActivate(nextInstruction: ComponentInstruction,
prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method `onReuse`, which is called by the router at the end of a
* Defines route lifecycle method `routerOnReuse`, which is called by the router at the end of a
* successful route navigation when {@link CanReuse} is implemented and returns or resolves to true.
*
* For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
* will be called, depending on the result of {@link CanReuse}.
*
* The `onReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
* The `routerOnReuse` hook is called with two {@link ComponentInstruction}s as parameters, the
* first
* representing the current route being navigated to, and the second parameter representing the
* previous route or `null`.
*
@ -43,65 +46,73 @@ export interface OnActivate {
* {@example router/ts/reuse/reuse_example.ts region='reuseCmp'}
*/
export interface OnReuse {
onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method `onDeactivate`, which is called by the router before destroying
* Defines route lifecycle method `routerOnDeactivate`, which is called by the router before
* destroying
* a component as part of a route change.
*
* The `onDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
* The `routerOnDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
* first
* representing the current route being navigated to, and the second parameter representing the
* previous route.
*
* If `onDeactivate` returns a promise, the route change will wait until the promise settles.
* If `routerOnDeactivate` returns a promise, the route change will wait until the promise settles.
*
* ### Example
* {@example router/ts/on_deactivate/on_deactivate_example.ts region='onDeactivate'}
* {@example router/ts/on_deactivate/on_deactivate_example.ts region='routerOnDeactivate'}
*/
export interface OnDeactivate {
onDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
routerOnDeactivate(nextInstruction: ComponentInstruction,
prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method `canReuse`, which is called by the router to determine whether a
* Defines route lifecycle method `routerCanReuse`, which is called by the router to determine
* whether a
* component should be reused across routes, or whether to destroy and instantiate a new component.
*
* The `canReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
* The `routerCanReuse` hook is called with two {@link ComponentInstruction}s as parameters, the
* first
* representing the current route being navigated to, and the second parameter representing the
* previous route.
*
* If `canReuse` returns or resolves to `true`, the component instance will be reused and the
* {@link OnDeactivate} hook will be run. If `canReuse` returns or resolves to `false`, a new
* If `routerCanReuse` returns or resolves to `true`, the component instance will be reused and the
* {@link OnDeactivate} hook will be run. If `routerCanReuse` returns or resolves to `false`, a new
* component will be instantiated, and the existing component will be deactivated and removed as
* part of the navigation.
*
* If `canReuse` throws or rejects, the navigation will be cancelled.
* If `routerCanReuse` throws or rejects, the navigation will be cancelled.
*
* ### Example
* {@example router/ts/reuse/reuse_example.ts region='reuseCmp'}
*/
export interface CanReuse {
canReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method `canDeactivate`, which is called by the router to determine
* Defines route lifecycle method `routerCanDeactivate`, which is called by the router to determine
* if a component can be removed as part of a navigation.
*
* The `canDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
* The `routerCanDeactivate` hook is called with two {@link ComponentInstruction}s as parameters,
* the
* first representing the current route being navigated to, and the second parameter
* representing the previous route.
*
* If `canDeactivate` returns or resolves to `false`, the navigation is cancelled. If it returns or
* If `routerCanDeactivate` returns or resolves to `false`, the navigation is cancelled. If it
* returns or
* resolves to `true`, then the navigation continues, and the component will be deactivated
* (the {@link OnDeactivate} hook will be run) and removed.
*
* If `canDeactivate` throws or rejects, the navigation is also cancelled.
* If `routerCanDeactivate` throws or rejects, the navigation is also cancelled.
*
* ### Example
* {@example router/ts/can_deactivate/can_deactivate_example.ts region='canDeactivate'}
* {@example router/ts/can_deactivate/can_deactivate_example.ts region='routerCanDeactivate'}
*/
export interface CanDeactivate {
canDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
routerCanDeactivate(nextInstruction: ComponentInstruction,
prevInstruction: ComponentInstruction): any;
}

10
modules/angular2/src/router/lifecycle_annotations.ts
View File

@ -9,11 +9,11 @@ import {Promise} from 'angular2/src/facade/async';
import {ComponentInstruction} from './instruction';
export {
canReuse,
canDeactivate,
onActivate,
onReuse,
onDeactivate
routerCanReuse,
routerCanDeactivate,
routerOnActivate,
routerOnReuse,
routerOnDeactivate
} from './lifecycle_annotations_impl';
/**

16
modules/angular2/src/router/lifecycle_annotations_impl.ts
View File

@ -10,9 +10,13 @@ export class CanActivate {
constructor(public fn: Function) {}
}
export const canReuse: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("canReuse"));
export const canDeactivate: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("canDeactivate"));
export const onActivate: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onActivate"));
export const onReuse: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onReuse"));
export const onDeactivate: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onDeactivate"));
export const routerCanReuse: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("routerCanReuse"));
export const routerCanDeactivate: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("routerCanDeactivate"));
export const routerOnActivate: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("routerOnActivate"));
export const routerOnReuse: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("routerOnReuse"));
export const routerOnDeactivate: RouteLifecycleHook =
CONST_EXPR(new RouteLifecycleHook("routerOnDeactivate"));

10
modules/angular2/src/router/route_lifecycle_reflector.dart
View File

@ -10,15 +10,15 @@ bool hasLifecycleHook(RouteLifecycleHook e, type) {
final List interfaces = reflector.interfaces(type);
var interface;
if (e == onActivate) {
if (e == routerOnActivate) {
interface = OnActivate;
} else if (e == onDeactivate) {
} else if (e == routerOnDeactivate) {
interface = OnDeactivate;
} else if (e == onReuse) {
} else if (e == routerOnReuse) {
interface = OnReuse;
} else if (e == canDeactivate) {
} else if (e == routerCanDeactivate) {
interface = CanDeactivate;
} else if (e == canReuse) {
} else if (e == routerCanReuse) {
interface = CanReuse;
}

16
modules/angular2/src/router/router.ts
View File

@ -202,13 +202,13 @@ export class Router {
/** @internal */
_navigate(instruction: Instruction, _skipLocationChange: boolean): Promise<any> {
return this._settleInstruction(instruction)
.then((_) => this._canReuse(instruction))
.then((_) => this._routerCanReuse(instruction))
.then((_) => this._canActivate(instruction))
.then((result) => {
if (!result) {
return false;
}
return this._canDeactivate(instruction)
return this._routerCanDeactivate(instruction)
.then((result) => {
if (result) {
return this.commit(instruction, _skipLocationChange)
@ -252,15 +252,15 @@ export class Router {
* Recursively set reuse flags
*/
/** @internal */
_canReuse(instruction: Instruction): Promise<any> {
_routerCanReuse(instruction: Instruction): Promise<any> {
if (isBlank(this._outlet)) {
return _resolveToFalse;
}
return this._outlet.canReuse(instruction.component)
return this._outlet.routerCanReuse(instruction.component)
.then((result) => {
instruction.component.reuse = result;
if (result && isPresent(this._childRouter) && isPresent(instruction.child)) {
return this._childRouter._canReuse(instruction.child);
return this._childRouter._routerCanReuse(instruction.child);
}
});
}
@ -269,7 +269,7 @@ export class Router {
return canActivateOne(nextInstruction, this._currentInstruction);
}
private _canDeactivate(instruction: Instruction): Promise<boolean> {
private _routerCanDeactivate(instruction: Instruction): Promise<boolean> {
if (isBlank(this._outlet)) {
return _resolveToTrue;
}
@ -285,7 +285,7 @@ export class Router {
if (reuse) {
next = _resolveToTrue;
} else {
next = this._outlet.canDeactivate(componentInstruction);
next = this._outlet.routerCanDeactivate(componentInstruction);
}
// TODO: aux route lifecycle hooks
return next.then((result) => {
@ -293,7 +293,7 @@ export class Router {
return false;
}
if (isPresent(this._childRouter)) {
return this._childRouter._canDeactivate(childInstruction);
return this._childRouter._routerCanDeactivate(childInstruction);
}
return true;
});

40
modules/angular2/src/router/router_outlet.ts
View File

@ -18,6 +18,7 @@ import * as routerMod from './router';
import {ComponentInstruction, RouteParams, RouteData} from './instruction';
import * as hookMod from './lifecycle_annotations';
import {hasLifecycleHook} from './route_lifecycle_reflector';
import {OnActivate, CanReuse, OnReuse, OnDeactivate, CanDeactivate} from './interfaces';
let _resolveToTrue = PromiseWrapper.resolve(true);
@ -48,7 +49,7 @@ export class RouterOutlet {
/**
* Called by the Router to instantiate a new component during the commit phase of a navigation.
* This method in turn is responsible for calling the `onActivate` hook of its child.
* This method in turn is responsible for calling the `routerOnActivate` hook of its child.
*/
activate(nextInstruction: ComponentInstruction): Promise<any> {
var previousInstruction = this._currentInstruction;
@ -64,8 +65,9 @@ export class RouterOutlet {
return this._loader.loadNextToLocation(componentType, this._elementRef, providers)
.then((componentRef) => {
this._componentRef = componentRef;
if (hasLifecycleHook(hookMod.onActivate, componentType)) {
return this._componentRef.instance.onActivate(nextInstruction, previousInstruction);
if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
return (<OnActivate>this._componentRef.instance)
.routerOnActivate(nextInstruction, previousInstruction);
}
});
}
@ -73,7 +75,7 @@ export class RouterOutlet {
/**
* Called by the {@link Router} during the commit phase of a navigation when an outlet
* reuses a component between different routes.
* This method in turn is responsible for calling the `onReuse` hook of its child.
* This method in turn is responsible for calling the `routerOnReuse` hook of its child.
*/
reuse(nextInstruction: ComponentInstruction): Promise<any> {
var previousInstruction = this._currentInstruction;
@ -83,21 +85,23 @@ export class RouterOutlet {
throw new BaseException(`Cannot reuse an outlet that does not contain a component.`);
}
return PromiseWrapper.resolve(
hasLifecycleHook(hookMod.onReuse, this._currentInstruction.componentType) ?
this._componentRef.instance.onReuse(nextInstruction, previousInstruction) :
hasLifecycleHook(hookMod.routerOnReuse, this._currentInstruction.componentType) ?
(<OnReuse>this._componentRef.instance)
.routerOnReuse(nextInstruction, previousInstruction) :
true);
}
/**
* Called by the {@link Router} when an outlet disposes of a component's contents.
* This method in turn is responsible for calling the `onDeactivate` hook of its child.
* This method in turn is responsible for calling the `routerOnDeactivate` hook of its child.
*/
deactivate(nextInstruction: ComponentInstruction): Promise<any> {
var next = _resolveToTrue;
if (isPresent(this._componentRef) && isPresent(this._currentInstruction) &&
hasLifecycleHook(hookMod.onDeactivate, this._currentInstruction.componentType)) {
hasLifecycleHook(hookMod.routerOnDeactivate, this._currentInstruction.componentType)) {
next = PromiseWrapper.resolve(
this._componentRef.instance.onDeactivate(nextInstruction, this._currentInstruction));
(<OnDeactivate>this._componentRef.instance)
.routerOnDeactivate(nextInstruction, this._currentInstruction));
}
return next.then((_) => {
if (isPresent(this._componentRef)) {
@ -112,16 +116,17 @@ export class RouterOutlet {
*
* If this resolves to `false`, the given navigation is cancelled.
*
* This method delegates to the child component's `canDeactivate` hook if it exists,
* This method delegates to the child component's `routerCanDeactivate` hook if it exists,
* and otherwise resolves to true.
*/
canDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
if (isBlank(this._currentInstruction)) {
return _resolveToTrue;
}
if (hasLifecycleHook(hookMod.canDeactivate, this._currentInstruction.componentType)) {
if (hasLifecycleHook(hookMod.routerCanDeactivate, this._currentInstruction.componentType)) {
return PromiseWrapper.resolve(
this._componentRef.instance.canDeactivate(nextInstruction, this._currentInstruction));
(<CanDeactivate>this._componentRef.instance)
.routerCanDeactivate(nextInstruction, this._currentInstruction));
}
return _resolveToTrue;
}
@ -133,17 +138,18 @@ export class RouterOutlet {
* this will resolve to `false`. You can't reuse an old component when the new component
* is of a different Type.
*
* Otherwise, this method delegates to the child component's `canReuse` hook if it exists,
* Otherwise, this method delegates to the child component's `routerCanReuse` hook if it exists,
* or resolves to true if the hook is not present.
*/
canReuse(nextInstruction: ComponentInstruction): Promise<boolean> {
routerCanReuse(nextInstruction: ComponentInstruction): Promise<boolean> {
var result;
if (isBlank(this._currentInstruction) ||
this._currentInstruction.componentType != nextInstruction.componentType) {
result = false;
} else if (hasLifecycleHook(hookMod.canReuse, this._currentInstruction.componentType)) {
result = this._componentRef.instance.canReuse(nextInstruction, this._currentInstruction);
} else if (hasLifecycleHook(hookMod.routerCanReuse, this._currentInstruction.componentType)) {
result = (<CanReuse>this._componentRef.instance)
.routerCanReuse(nextInstruction, this._currentInstruction);
} else {
result = nextInstruction == this._currentInstruction ||
(isPresent(nextInstruction.params) && isPresent(this._currentInstruction.params) &&