cargdev/angular
1
0
Fork 0
Code Issues 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

222
modules/angular2/test/router/integration/lifecycle_hook_spec.ts
View File

@ -69,7 +69,7 @@ export function main() {
eventBus = new EventEmitter();
}));
it('should call the onActivate hook', inject([AsyncTestCompleter], (async) => {
it('should call the routerOnActivate hook', inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
@ -82,7 +82,7 @@ export function main() {
});
}));
it('should wait for a parent component\'s onActivate hook to resolve before calling its child\'s',
it('should wait for a parent component\'s routerOnActivate hook to resolve before calling its child\'s',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -106,7 +106,7 @@ export function main() {
});
}));
it('should call the onDeactivate hook', inject([AsyncTestCompleter], (async) => {
it('should call the routerOnDeactivate hook', inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
@ -120,7 +120,7 @@ export function main() {
});
}));
it('should wait for a child component\'s onDeactivate hook to resolve before calling its parent\'s',
it('should wait for a child component\'s routerOnDeactivate hook to resolve before calling its parent\'s',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -146,7 +146,7 @@ export function main() {
});
}));
it('should reuse a component when the canReuse hook returns true',
it('should reuse a component when the routerCanReuse hook returns true',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -169,7 +169,7 @@ export function main() {
}));
it('should not reuse a component when the canReuse hook returns false',
it('should not reuse a component when the routerCanReuse hook returns false',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -192,34 +192,35 @@ export function main() {
}));
it('should navigate when canActivate returns true', inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
completer.resolve(true);
}
});
rtr.navigateByUrl('/can-activate/a')
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('canActivate {A}');
expect(log).toEqual(['canActivate: null -> /can-activate']);
async.done();
});
});
}));
it('should not navigate when canActivate returns false',
it('should navigate when routerCanActivate returns true',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
if (ev.startsWith('routerCanActivate')) {
completer.resolve(true);
}
});
rtr.navigateByUrl('/can-activate/a')
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('routerCanActivate {A}');
expect(log).toEqual(['routerCanActivate: null -> /can-activate']);
async.done();
});
});
}));
it('should not navigate when routerCanActivate returns false',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('routerCanActivate')) {
completer.resolve(false);
}
});
@ -227,13 +228,13 @@ export function main() {
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('');
expect(log).toEqual(['canActivate: null -> /can-activate']);
expect(log).toEqual(['routerCanActivate: null -> /can-activate']);
async.done();
});
});
}));
it('should navigate away when canDeactivate returns true',
it('should navigate away when routerCanDeactivate returns true',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -241,11 +242,11 @@ export function main() {
.then((_) => rtr.navigateByUrl('/can-deactivate/a'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('canDeactivate {A}');
expect(fixture.debugElement.nativeElement).toHaveText('routerCanDeactivate {A}');
expect(log).toEqual([]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
if (ev.startsWith('routerCanDeactivate')) {
completer.resolve(true);
}
});
@ -253,13 +254,13 @@ export function main() {
rtr.navigateByUrl('/a').then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('A');
expect(log).toEqual(['canDeactivate: /can-deactivate -> /a']);
expect(log).toEqual(['routerCanDeactivate: /can-deactivate -> /a']);
async.done();
});
});
}));
it('should not navigate away when canDeactivate returns false',
it('should not navigate away when routerCanDeactivate returns false',
inject([AsyncTestCompleter], (async) => {
compile(tcb)
.then((rtc) => {fixture = rtc})
@ -267,19 +268,19 @@ export function main() {
.then((_) => rtr.navigateByUrl('/can-deactivate/a'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('canDeactivate {A}');
expect(fixture.debugElement.nativeElement).toHaveText('routerCanDeactivate {A}');
expect(log).toEqual([]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
if (ev.startsWith('routerCanDeactivate')) {
completer.resolve(false);
}
});
rtr.navigateByUrl('/a').then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual(['canDeactivate: /can-deactivate -> /a']);
expect(fixture.debugElement.nativeElement).toHaveText('routerCanDeactivate {A}');
expect(log).toEqual(['routerCanDeactivate: /can-deactivate -> /a']);
async.done();
});
});
@ -294,10 +295,10 @@ export function main() {
.then((_) => rtr.navigateByUrl('/activation-hooks/child'))
.then((_) => {
expect(log).toEqual([
'canActivate child: null -> /child',
'canActivate parent: null -> /activation-hooks',
'onActivate parent: null -> /activation-hooks',
'onActivate child: null -> /child'
'routerCanActivate child: null -> /child',
'routerCanActivate parent: null -> /activation-hooks',
'routerOnActivate parent: null -> /activation-hooks',
'routerOnActivate child: null -> /child'
]);
log = [];
@ -305,10 +306,10 @@ export function main() {
})
.then((_) => {
expect(log).toEqual([
'canDeactivate parent: /activation-hooks -> /a',
'canDeactivate child: /child -> null',
'onDeactivate child: /child -> null',
'onDeactivate parent: /activation-hooks -> /a'
'routerCanDeactivate parent: /activation-hooks -> /a',
'routerCanDeactivate child: /child -> null',
'routerOnDeactivate child: /child -> null',
'routerOnDeactivate parent: /activation-hooks -> /a'
]);
async.done();
});
@ -320,11 +321,13 @@ export function main() {
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigateByUrl('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual(
['canActivate: null -> /reuse-hooks/1', 'onActivate: null -> /reuse-hooks/1']);
expect(log).toEqual([
'routerCanActivate: null -> /reuse-hooks/1',
'routerOnActivate: null -> /reuse-hooks/1'
]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
if (ev.startsWith('routerCanReuse')) {
completer.resolve(true);
}
});
@ -335,8 +338,8 @@ export function main() {
})
.then((_) => {
expect(log).toEqual([
'canReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'onReuse: /reuse-hooks/1 -> /reuse-hooks/2'
'routerCanReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'routerOnReuse: /reuse-hooks/1 -> /reuse-hooks/2'
]);
async.done();
});
@ -347,11 +350,13 @@ export function main() {
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigateByUrl('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual(
['canActivate: null -> /reuse-hooks/1', 'onActivate: null -> /reuse-hooks/1']);
expect(log).toEqual([
'routerCanActivate: null -> /reuse-hooks/1',
'routerOnActivate: null -> /reuse-hooks/1'
]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
if (ev.startsWith('routerCanReuse')) {
completer.resolve(false);
}
});
@ -361,11 +366,11 @@ export function main() {
})
.then((_) => {
expect(log).toEqual([
'canReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'canActivate: /reuse-hooks/1 -> /reuse-hooks/2',
'canDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'onDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'onActivate: /reuse-hooks/1 -> /reuse-hooks/2'
'routerCanReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'routerCanActivate: /reuse-hooks/1 -> /reuse-hooks/2',
'routerCanDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'routerOnDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'routerOnActivate: /reuse-hooks/1 -> /reuse-hooks/2'
]);
async.done();
});
@ -393,7 +398,7 @@ function logHook(name: string, next: ComponentInstruction, prev: ComponentInstru
@Component({selector: 'activate-cmp', template: 'activate cmp'})
class ActivateCmp implements OnActivate {
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('activate', next, prev);
}
}
@ -405,7 +410,7 @@ class ActivateCmp implements OnActivate {
})
@RouteConfig([new Route({path: '/child-activate', component: ActivateCmp})])
class ParentActivateCmp implements OnActivate {
onActivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('parent activate', next, prev);
return completer.promise;
@ -414,14 +419,14 @@ class ParentActivateCmp implements OnActivate {
@Component({selector: 'deactivate-cmp', template: 'deactivate cmp'})
class DeactivateCmp implements OnDeactivate {
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('deactivate', next, prev);
}
}
@Component({selector: 'deactivate-cmp', template: 'deactivate cmp'})
class WaitDeactivateCmp implements OnDeactivate {
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('deactivate', next, prev);
return completer.promise;
@ -435,7 +440,7 @@ class WaitDeactivateCmp implements OnDeactivate {
})
@RouteConfig([new Route({path: '/child-deactivate', component: WaitDeactivateCmp})])
class ParentDeactivateCmp implements OnDeactivate {
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('parent deactivate', next, prev);
}
}
@ -449,8 +454,10 @@ class ParentDeactivateCmp implements OnDeactivate {
class ReuseCmp implements OnReuse,
CanReuse {
constructor() { cmpInstanceCount += 1; }
canReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) { logHook('reuse', next, prev); }
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('reuse', next, prev);
}
}
@Component({
@ -462,58 +469,61 @@ class ReuseCmp implements OnReuse,
class NeverReuseCmp implements OnReuse,
CanReuse {
constructor() { cmpInstanceCount += 1; }
canReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) { logHook('reuse', next, prev); }
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('reuse', next, prev);
}
}
@Component({
selector: 'can-activate-cmp',
template: `canActivate {<router-outlet></router-outlet>}`,
template: `routerCanActivate {<router-outlet></router-outlet>}`,
directives: [RouterOutlet]
})
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
@CanActivate(CanActivateCmp.canActivate)
@CanActivate(CanActivateCmp.routerCanActivate)
class CanActivateCmp {
static canActivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<boolean> {
static routerCanActivate(next: ComponentInstruction,
prev: ComponentInstruction): Promise<boolean> {
completer = PromiseWrapper.completer();
logHook('canActivate', next, prev);
logHook('routerCanActivate', next, prev);
return completer.promise;
}
}
@Component({
selector: 'can-deactivate-cmp',
template: `canDeactivate {<router-outlet></router-outlet>}`,
template: `routerCanDeactivate {<router-outlet></router-outlet>}`,
directives: [RouterOutlet]
})
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
class CanDeactivateCmp implements CanDeactivate {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<boolean> {
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<boolean> {
completer = PromiseWrapper.completer();
logHook('canDeactivate', next, prev);
logHook('routerCanDeactivate', next, prev);
return completer.promise;
}
}
@Component({selector: 'all-hooks-child-cmp', template: `child`})
@CanActivate(AllHooksChildCmp.canActivate)
@CanActivate(AllHooksChildCmp.routerCanActivate)
class AllHooksChildCmp implements CanDeactivate, OnDeactivate, OnActivate {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate child', next, prev);
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanDeactivate child', next, prev);
return true;
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate child', next, prev);
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnDeactivate child', next, prev);
}
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate child', next, prev);
static routerCanActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanActivate child', next, prev);
return true;
}
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate child', next, prev);
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnActivate child', next, prev);
}
}
@ -523,57 +533,57 @@ class AllHooksChildCmp implements CanDeactivate, OnDeactivate, OnActivate {
directives: [RouterOutlet]
})
@RouteConfig([new Route({path: '/child', component: AllHooksChildCmp})])
@CanActivate(AllHooksParentCmp.canActivate)
@CanActivate(AllHooksParentCmp.routerCanActivate)
class AllHooksParentCmp implements CanDeactivate,
OnDeactivate, OnActivate {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate parent', next, prev);
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanDeactivate parent', next, prev);
return true;
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate parent', next, prev);
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnDeactivate parent', next, prev);
}
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate parent', next, prev);
static routerCanActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanActivate parent', next, prev);
return true;
}
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate parent', next, prev);
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnActivate parent', next, prev);
}
}
@Component({selector: 'reuse-hooks-cmp', template: 'reuse hooks cmp'})
@CanActivate(ReuseHooksCmp.canActivate)
@CanActivate(ReuseHooksCmp.routerCanActivate)
class ReuseHooksCmp implements OnActivate, OnReuse, OnDeactivate, CanReuse, CanDeactivate {
canReuse(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('canReuse', next, prev);
logHook('routerCanReuse', next, prev);
return completer.promise;
}
onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onReuse', next, prev);
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnReuse', next, prev);
}
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate', next, prev);
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanDeactivate', next, prev);
return true;
}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate', next, prev);
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnDeactivate', next, prev);
}
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate', next, prev);
static routerCanActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerCanActivate', next, prev);
return true;
}
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate', next, prev);
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('routerOnActivate', next, prev);
}
}