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

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
2015-11-16 17:04:36 -08:00
parent 4215afc639
commit 604c8bbad5
63 changed files with 618 additions and 583 deletions
--- a/modules/angular2/src/core/linker/directive_lifecycle_reflector.ts
+++ b/modules/angular2/src/core/linker/directive_lifecycle_reflector.ts
@ -8,21 +8,21 @@ export function hasLifecycleHook(lcInterface: LifecycleHooks, token): boolean {

  switch (lcInterface) {
    case LifecycleHooks.AfterContentInit:
-      return !!proto.afterContentInit;
+      return !!proto.ngAfterContentInit;
    case LifecycleHooks.AfterContentChecked:
-      return !!proto.afterContentChecked;
+      return !!proto.ngAfterContentChecked;
    case LifecycleHooks.AfterViewInit:
-      return !!proto.afterViewInit;
+      return !!proto.ngAfterViewInit;
    case LifecycleHooks.AfterViewChecked:
-      return !!proto.afterViewChecked;
+      return !!proto.ngAfterViewChecked;
    case LifecycleHooks.OnChanges:
-      return !!proto.onChanges;
+      return !!proto.ngOnChanges;
    case LifecycleHooks.DoCheck:
-      return !!proto.doCheck;
+      return !!proto.ngDoCheck;
    case LifecycleHooks.OnDestroy:
-      return !!proto.onDestroy;
+      return !!proto.ngOnDestroy;
    case LifecycleHooks.OnInit:
-      return !!proto.onInit;
+      return !!proto.ngOnInit;
    default:
      return false;
  }
--- a/modules/angular2/src/core/linker/element_injector.ts
+++ b/modules/angular2/src/core/linker/element_injector.ts
@ -49,6 +49,7 @@ import {QueryList} from './query_list';
 import {reflector} from 'angular2/src/core/reflection/reflection';
 import {SetterFn} from 'angular2/src/core/reflection/types';
 import {EventConfig} from 'angular2/src/core/linker/event_config';
+import {AfterViewChecked} from 'angular2/src/core/linker/interfaces';
 import {PipeProvider} from 'angular2/src/core/pipes/pipe_provider';

 import {LifecycleHooks} from './interfaces';
@ -326,7 +327,8 @@ class _Context {
  constructor(public element: any, public componentElement: any, public injector: any) {}
 }

-export class ElementInjector extends TreeNode<ElementInjector> implements DependencyProvider {
+export class ElementInjector extends TreeNode<ElementInjector> implements DependencyProvider,
+    AfterViewChecked {
  private _host: ElementInjector;
  private _preBuiltObjects: PreBuiltObjects = null;
  private _queryStrategy: _QueryStrategy;
@ -564,9 +566,9 @@ export class ElementInjector extends TreeNode<ElementInjector> implements Depend
    return isPresent(nestedView) ? nestedView.rootElementInjectors : [];
  }

-  afterViewChecked(): void { this._queryStrategy.updateViewQueries(); }
+  ngAfterViewChecked(): void { this._queryStrategy.updateViewQueries(); }

-  afterContentChecked(): void { this._queryStrategy.updateContentQueries(); }
+  ngAfterContentChecked(): void { this._queryStrategy.updateContentQueries(); }

  traverseAndSetQueriesAsDirty(): void {
    var inj = this;
@ -810,43 +812,43 @@ class ElementInjectorInlineStrategy implements _ElementInjectorStrategy {

    if (p.provider0 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider0).callOnDestroy) {
-      i.obj0.onDestroy();
+      i.obj0.ngOnDestroy();
    }
    if (p.provider1 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider1).callOnDestroy) {
-      i.obj1.onDestroy();
+      i.obj1.ngOnDestroy();
    }
    if (p.provider2 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider2).callOnDestroy) {
-      i.obj2.onDestroy();
+      i.obj2.ngOnDestroy();
    }
    if (p.provider3 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider3).callOnDestroy) {
-      i.obj3.onDestroy();
+      i.obj3.ngOnDestroy();
    }
    if (p.provider4 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider4).callOnDestroy) {
-      i.obj4.onDestroy();
+      i.obj4.ngOnDestroy();
    }
    if (p.provider5 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider5).callOnDestroy) {
-      i.obj5.onDestroy();
+      i.obj5.ngOnDestroy();
    }
    if (p.provider6 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider6).callOnDestroy) {
-      i.obj6.onDestroy();
+      i.obj6.ngOnDestroy();
    }
    if (p.provider7 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider7).callOnDestroy) {
-      i.obj7.onDestroy();
+      i.obj7.ngOnDestroy();
    }
    if (p.provider8 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider8).callOnDestroy) {
-      i.obj8.onDestroy();
+      i.obj8.ngOnDestroy();
    }
    if (p.provider9 instanceof DirectiveProvider &&
        (<DirectiveProvider>p.provider9).callOnDestroy) {
-      i.obj9.onDestroy();
+      i.obj9.ngOnDestroy();
    }
  }

@ -936,7 +938,7 @@ class ElementInjectorDynamicStrategy implements _ElementInjectorStrategy {
    for (var i = 0; i < p.providers.length; i++) {
      if (p.providers[i] instanceof DirectiveProvider &&
          (<DirectiveProvider>p.providers[i]).callOnDestroy) {
-        ist.objs[i].onDestroy();
+        ist.objs[i].ngOnDestroy();
      }
    }
  }
--- a/modules/angular2/src/core/linker/interfaces.ts
+++ b/modules/angular2/src/core/linker/interfaces.ts
@ -41,7 +41,7 @@ export var LIFECYCLE_HOOKS_VALUES = [
 /**
 * Implement this interface to get notified when any data-bound property of your directive changes.
 *
- * `onChanges` is called right after the data-bound properties have been checked and before view
+ * `ngOnChanges` is called right after the data-bound properties have been checked and before view
 * and content children are checked if at least one of them has changed.
 *
 * The `changes` parameter contains an entry for each of the changed data-bound property. The key is
@ -57,8 +57,8 @@ export var LIFECYCLE_HOOKS_VALUES = [
 * class MyComponent implements OnChanges {
 *   @Input() myProp: any;
 *
- *   onChanges(changes: {[propName: string]: SimpleChange}) {
- *     console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
+ *   ngOnChanges(changes: {[propName: string]: SimpleChange}) {
+ *     console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue);
 *   }
 * }
 *
@ -76,13 +76,13 @@ export var LIFECYCLE_HOOKS_VALUES = [
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange}); }
+export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange}); }

 /**
 * Implement this interface to execute custom initialization logic after your directive's
 * data-bound properties have been initialized.
 *
- * `onInit` is called right after the directive's data-bound properties have been checked for the
+ * `ngOnInit` is called right after the directive's data-bound properties have been checked for the
 * first time, and before any of its children have been checked. It is invoked only once when the
 * directive is instantiated.
 *
@ -94,12 +94,12 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
 *   template: `<p>my-component</p>`
 * })
 * class MyComponent implements OnInit, OnDestroy {
- *   onInit() {
- *     console.log('onInit');
+ *   ngOnInit() {
+ *     console.log('ngOnInit');
 *   }
 *
- *   onDestroy() {
- *     console.log('onDestroy');
+ *   ngOnDestroy() {
+ *     console.log('ngOnDestroy');
 *   }
 * }
 *
@ -119,29 +119,29 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
 * bootstrap(App).catch(err => console.error(err));
 *  ```
 */
-export interface OnInit { onInit(); }
+export interface OnInit { ngOnInit(); }

 /**
 * Implement this interface to override the default change detection algorithm for your directive.
 *
- * `doCheck` gets called to check the changes in the directives instead of the default algorithm.
+ * `ngDoCheck` gets called to check the changes in the directives instead of the default algorithm.
 *
 * The default change detection algorithm looks for differences by comparing bound-property values
 * by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
- * is disabled and `doCheck` is responsible for checking for changes.
+ * is disabled and `ngDoCheck` is responsible for checking for changes.
 *
 * Implementing this interface allows improving performance by using insights about the component,
 * its implementation and data types of its properties.
 *
 * Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
- * `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
- * have to be handled from within the `doCheck` callback.
+ * `ngOnChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
+ * have to be handled from within the `ngDoCheck` callback.
 *
 * Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
 *
 * ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
 *
- * In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
+ * In the following example `ngDoCheck` uses an {@link IterableDiffers} to detect the updates to the
 * array `list`:
 *
 * ```typescript
@ -163,7 +163,7 @@ export interface OnInit { onInit(); }
 *     this.differ = differs.find([]).create(null);
 *   }
 *
- *   doCheck() {
+ *   ngDoCheck() {
 *     var changes = this.differ.diff(this.list);
 *
 *     if (changes) {
@ -186,12 +186,12 @@ export interface OnInit { onInit(); }
 * }
 * ```
 */
-export interface DoCheck { doCheck(); }
+export interface DoCheck { ngDoCheck(); }

 /**
 * Implement this interface to get notified when your directive is destroyed.
 *
- * `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
+ * `ngOnDestroy` callback is typically used for any custom cleanup that needs to occur when the
 * instance is destroyed
 *
 * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
@ -202,12 +202,12 @@ export interface DoCheck { doCheck(); }
 *   template: `<p>my-component</p>`
 * })
 * class MyComponent implements OnInit, OnDestroy {
- *   onInit() {
- *     console.log('onInit');
+ *   ngOnInit() {
+ *     console.log('ngOnInit');
 *   }
 *
- *   onDestroy() {
- *     console.log('onDestroy');
+ *   ngOnDestroy() {
+ *     console.log('ngOnDestroy');
 *   }
 * }
 *
@ -227,7 +227,7 @@ export interface DoCheck { doCheck(); }
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface OnDestroy { onDestroy(); }
+export interface OnDestroy { ngOnDestroy(); }

 /**
 * Implement this interface to get notified when your directive's content has been fully
@ -256,7 +256,7 @@ export interface OnDestroy { onDestroy(); }
 *     console.log(this.getMessage(this.contentChild));
 *   }
 *
- *   afterContentInit() {
+ *   ngAfterContentInit() {
 *     // contentChild is updated after the content has been checked
 *     console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
 *   }
@ -280,7 +280,7 @@ export interface OnDestroy { onDestroy(); }
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface AfterContentInit { afterContentInit(); }
+export interface AfterContentInit { ngAfterContentInit(); }

 /**
 * Implement this interface to get notified after every check of your directive's content.
@ -302,7 +302,7 @@ export interface AfterContentInit { afterContentInit(); }
 *     console.log(this.getMessage(this.contentChild));
 *   }
 *
- *   afterContentChecked() {
+ *   ngAfterContentChecked() {
 *     // contentChild is updated after the content has been checked
 *     console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
 *   }
@ -328,7 +328,7 @@ export interface AfterContentInit { afterContentInit(); }
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface AfterContentChecked { afterContentChecked(); }
+export interface AfterContentChecked { ngAfterContentChecked(); }

 /**
 * Implement this interface to get notified when your component's view has been fully initialized.
@ -354,9 +354,9 @@ export interface AfterContentChecked { afterContentChecked(); }
 *     console.log(this.getMessage(this.viewChild));
 *   }
 *
- *   afterViewInit() {
+ *   ngAfterViewInit() {
 *     // viewChild is updated after the view has been initialized
- *     console.log('afterViewInit: ' + this.getMessage(this.viewChild));
+ *     console.log('ngAfterViewInit: ' + this.getMessage(this.viewChild));
 *   }
 *
 *   private getMessage(cmp: ChildComponent): string {
@ -375,7 +375,7 @@ export interface AfterContentChecked { afterContentChecked(); }
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface AfterViewInit { afterViewInit(); }
+export interface AfterViewInit { ngAfterViewInit(); }

 /**
 * Implement this interface to get notified after every check of your component's view.
@ -404,7 +404,7 @@ export interface AfterViewInit { afterViewInit(); }
 *     console.log(this.getMessage(this.viewChild));
 *   }
 *
- *   afterViewChecked() {
+ *   ngAfterViewChecked() {
 *     // viewChild is updated after the view has been checked
 *     console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
 *   }
@ -425,4 +425,4 @@ export interface AfterViewInit { afterViewInit(); }
 * bootstrap(App).catch(err => console.error(err));
 * ```
 */
-export interface AfterViewChecked { afterViewChecked(); }
+export interface AfterViewChecked { ngAfterViewChecked(); }
--- a/modules/angular2/src/core/linker/view.ts
+++ b/modules/angular2/src/core/linker/view.ts
@ -182,7 +182,7 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
    var eiCount = this.proto.elementBinders.length;
    var ei = this.elementInjectors;
    for (var i = eiCount - 1; i >= 0; i--) {
-      if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].afterContentChecked();
+      if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].ngAfterContentChecked();
    }
  }

@ -190,7 +190,7 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
    var eiCount = this.proto.elementBinders.length;
    var ei = this.elementInjectors;
    for (var i = eiCount - 1; i >= 0; i--) {
-      if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].afterViewChecked();
+      if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].ngAfterViewChecked();
    }
  }

--- a/modules/angular2/src/core/linker/view_manager.ts
+++ b/modules/angular2/src/core/linker/view_manager.ts
@ -97,7 +97,7 @@ export abstract class AppViewManager {
   *     Parent (<some-component></some-component>)
   *   `
   * })
-   * class MyApp {
+   * class MyApp implements OnDestroy {
   *   viewRef: ng.ViewRef;
   *
   *   constructor(public appViewManager: ng.AppViewManager, compiler: ng.Compiler) {
@ -106,7 +106,7 @@ export abstract class AppViewManager {
   *     })
   *   }
   *
-   *   onDestroy() {
+   *   ngOnDestroy() {
   *     this.appViewManager.destroyRootHostView(this.viewRef);
   *     this.viewRef = null;
   *   }