diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade index 2750797013..571f800d17 100644 --- a/public/docs/ts/latest/guide/lifecycle-hooks.jade +++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade @@ -4,14 +4,14 @@ include ../../../../_includes/_util-fns # Component Lifecycle A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. - + Angular offers **Lifecycle hooks** that give us visibility into these key moments and the ability to act when they occur. - + We cover these hooks in this chapter and demonstrate how they work in code. - + [Live Example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html) - + @@ -21,11 +21,11 @@ include ../../../../_includes/_util-fns ## The Lifecycle Hooks Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. - + Developers can tap into key moments in that lifecycle by implementing one or more of the "Lifecycle Hook" interfaces, all of them available - in the `angular2/core` library. - + in the `angular2/core` library. + Here is the complete lifecycle hook interface inventory: * `OnInit` @@ -39,10 +39,10 @@ include ../../../../_includes/_util-fns No directive or component will implement all of them and some of them only make sense for components. - + Each interface has a single hook method whose name is the interface name prefixed with `ng`. - For example, the `OnInit` interface has a hook method names `ngOnInit`. - + For example, the `OnInit` interface has a hook method named `ngOnInit`. + Angular calls these hook methods in the following order: * `ngOnChanges` - called when an input or output binding value changes * `ngOnInit` - after the first `ngOnChanges` @@ -52,7 +52,7 @@ include ../../../../_includes/_util-fns * `ngAfterViewInit` - after component's view(s) are initialized * `ngAfterViewChecked` - after every check of a component's view(s) * `ngOnDestroy` - just before the directive is destroyed. - + The [live example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html) demonstrates these hooks. @@ -65,26 +65,26 @@ include ../../../../_includes/_util-fns with its own change detection processing we would also add a `ngDoCheck` method. We would **not** implement `ngOnChanges`. We write either `ngOnChanges` or `ngDoCheck`, not both. - - Custom change detection and `ngDoCheck` are on our documentation backlog. + + Custom change detection and `ngDoCheck` are on our documentation backlog. :marked Peek-a-boo is a demo. We'd rarely if ever implement all interfaces like this in real life. We look forward to explaining the Peek-a-boo example and the other lifecycle hook examples in - an update to this chapter. Meanwhile, please enjoy poking around in the + an update to this chapter. Meanwhile, please enjoy poking around in the [code](/resources/live-examples/lifecycle-hooks/ts/plnkr.html). - + ## Interface optional? The lifecycle interfaces are optional. - We recommend adding them to benefit from TypeScript's strong typing and editor tooling. - - But they disappear from the transpiled JavaScript. + We recommend adding them to benefit from TypeScript's strong typing and editor tooling. + + But they disappear from the transpiled JavaScript. Angular can't see them at runtime. And they are useless to someone developing in a language without interfaces (such as pure JavaScript). - - Fortunately, they aren't necessary. + + Fortunately, they aren't necessary. We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves. - + Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*. - Angular will find and call methods like `ngOnInit()`, with or without the interfaces. + Angular will find and call methods like `ngOnInit()`, with or without the interfaces.