iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(aio): tidy up docs that use float clearing 

Closes #16681
This commit is contained in:
Peter Bacon Darwin 2017-05-18 21:31:27 +01:00 committed by Pete Bacon Darwin
parent 2842b0cc3d
commit 8a0e5659c0
4 changed files with 89 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
aio/content/guide/architecture.md
View File

@ -1,10 +1,4 @@
@title
Architecture Overview
@intro
The basic building blocks of Angular applications.
@description
# Architecture Overview
Angular is a framework for building client applications in HTML and
either JavaScript or a language like TypeScript that compiles to JavaScript.
@ -26,25 +20,9 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
</figure>
<!--
The architecture diagram identifies the eight main building blocks of an Angular application:
* [Modules](guide/architecture#modules)
* [Components](guide/architecture#components)
* [Templates](guide/architecture#templates)
* [Metadata](guide/architecture#metadata)
* [Data binding](guide/architecture#data-binding)
* [Directives](guide/architecture#directives)
* [Services](guide/architecture#services)
* [Dependency injection](guide/architecture#dependency-injection)
Learn these building blocks, and you're on your way.
-->
<div class="l-sub-section">
The code referenced on this page is available as a <live-example></live-example>.
The code referenced on this page is available as a <live-example></live-example>.
</div>
@ -71,11 +49,11 @@ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule`
<div class="l-sub-section">
Decorators are functions that modify JavaScript classes.
Angular has many decorators that attach metadata to classes so that it knows
what those classes mean and how they should work.
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">
Learn more</a> about decorators on the web.
Decorators are functions that modify JavaScript classes.
Angular has many decorators that attach metadata to classes so that it knows
what those classes mean and how they should work.
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">
Learn more</a> about decorators on the web.
</div>
@ -100,7 +78,7 @@ Here's a simple root module:
<div class="l-sub-section">
The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
</div>
@ -125,12 +103,9 @@ Other JavaScript modules use *import statements* to access public objects from o
<code-example path="architecture/src/app/app.module.ts" region="export" linenums="false"></code-example>
<div class="l-sub-section">
<a href="http://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
<a href="http://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
</div>
These are two different and _complementary_ module systems. Use them both to write your apps.
### Angular libraries
@ -164,7 +139,7 @@ Hang in there. The confusion yields to clarity with time and experience.
<div class="l-sub-section">
Learn more from the [Angular modules](guide/ngmodule) page.
Learn more from the [Angular modules](guide/ngmodule) page.
</div>
@ -248,7 +223,6 @@ Here's some metadata for `HeroListComponent`:
Here is the `@Component` decorator, which identifies the class
immediately below it as a component class.
The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
@ -261,12 +235,10 @@ Angular inserts an instance of the `HeroListComponent` view between those tags.
* `templateUrl`: module-relative address of this component's HTML template, shown [above](guide/architecture#templates).
* `providers`: array of **dependency injection providers** for services that the component requires.
This is one way to tell Angular that the component's constructor requires a `HeroService`
so it can get the list of heroes to display.
<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" class="left">
The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
@ -284,6 +256,7 @@ so that Angular knows what to do.
<hr/>
## Data binding
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses
into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
read as any experienced jQuery programmer can attest.
@ -335,7 +308,7 @@ Data binding plays an important role in communication between a template and its
Data binding is also important for communication between parent and child components.
<hr class="clear"/>
<hr/>
## Directives
@ -348,10 +321,10 @@ A directive is a class with a `@Directive` decorator.
A component is a *directive-with-a-template*;
a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
<div class="l-sub-section clear">
<div class="l-sub-section">
While **a component is technically a directive**,
components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
While **a component is technically a directive**,
components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
</div>
@ -386,6 +359,7 @@ or modify aspects of DOM elements and components
Of course, you can also write your own directives. Components such as
`HeroListComponent` are one kind of custom directive.
<!-- PENDING: link to where to learn more about other kinds! -->
<hr/>
@ -397,7 +371,8 @@ Of course, you can also write your own directives. Components such as
_Service_ is a broad category encompassing any value, function, or feature that your application needs.
Almost anything can be a service.
A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.<br class="l-clear-both">
A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
<br class="clear">
Examples include:
@ -472,7 +447,6 @@ The process of `HeroService` injection looks a bit like this:
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service">
</figure>
If the injector doesn't have a `HeroService`, how does it know how to make one?
In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
@ -554,6 +528,5 @@ by implementing the lifecycle hook interfaces.
> [**Router**](guide/router): Navigate from page to page within the client
application and never leave the browser.
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
using the _Angular Testing Platform_.

392
aio/content/guide/lifecycle-hooks.md
View File

@ -1,10 +1,4 @@
@title
Lifecycle Hooks
@intro
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
@description
# Lifecycle Hooks
<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" class="left">
@ -17,45 +11,11 @@ Angular offers **lifecycle hooks**
that provide visibility into these key life moments and the ability to act when they occur.
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
<br class="l-clear-both">
<!--
## Contents
* [Component lifecycle hooks overview](guide/lifecycle-hooks#hooks-overview)
* [Lifecycle sequence](guide/lifecycle-hooks#hooks-purpose-timing)
* [Interfaces are optional (technically)](guide/lifecycle-hooks#interface-optional)
* [Other Angular lifecycle hooks](guide/lifecycle-hooks#other-lifecycle-hooks)
* [Lifecycle examples](guide/lifecycle-hooks#the-sample)
* [Peek-a-boo: all hooks](guide/lifecycle-hooks#peek-a-boo)
* [Spying OnInit and OnDestroy](guide/lifecycle-hooks#spy)
* [OnInit](guide/lifecycle-hooks#oninit)
* [OnDestroy](guide/lifecycle-hooks#ondestroy)
* [OnChanges](guide/lifecycle-hooks#onchanges)
* [DoCheck](guide/lifecycle-hooks#docheck)
* [AfterView](guide/lifecycle-hooks#afterview)
* [Abide by the unidirectional data flow rule](guide/lifecycle-hooks#wait-a-tick)
* [AfterContent](guide/lifecycle-hooks#aftercontent)
* [Content projection](guide/lifecycle-hooks#content-projection)
* [AfterContent hooks](guide/lifecycle-hooks#aftercontent-hooks)
* [No unidirectional flow worries with _AfterContent_](guide/lifecycle-hooks#no-unidirectional-flow-worries)
Try the <live-example></live-example>.
-->
{@a hooks-overview}
## Component lifecycle hooks overview
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
@ -65,108 +25,69 @@ Each interface has a single hook method whose name is the interface name prefixe
For example, the `OnInit` interface has a hook method named `ngOnInit()`
that Angular calls shortly after creating the component:
<code-example path="lifecycle-hooks/src/app/peek-a-boo.component.ts" region="ngOnInit" title="peek-a-boo.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/peek-a-boo.component.ts" region="ngOnInit" title="peek-a-boo.component.ts (excerpt)" linenums="false"></code-example>
No directive or component will implement all of the lifecycle hooks and some of the hooks only make sense for components.
Angular only calls a directive/component hook method *if it is defined*.
{@a hooks-purpose-timing}
## Lifecycle sequence
*After* creating a component/directive by calling its constructor, Angular
calls the lifecycle hook methods in the following sequence at specific moments:
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<col width="20%"></col>
<col width="80%"></col>
<tr>
<th>
Hook
</th>
<th>
Purpose and Timing
</th>
<th>Hook</th>
<th>Purpose and Timing</th>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngOnChanges()</code>
</td>
<td>
Respond when Angular (re)sets data-bound input properties.
The method receives a `SimpleChanges` object of current and previous property values.
Called before `ngOnInit()` and whenever one or more data-bound input properties change.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngOnInit()</code>
</td>
<td>
Initialize the directive/component after Angular first displays the data-bound properties
and sets the directive/component's input properties.
Called _once_, after the _first_ `ngOnChanges()`.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngDoCheck()</code>
</td>
<td>
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngAfterContentInit()</code>
</td>
<td>
Respond after Angular projects external content into the component's view.
Called _once_ after the first `ngDoCheck()`.
@ -174,18 +95,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngAfterContentChecked()</code>
</td>
<td>
Respond after Angular checks the content projected into the component.
Called after the `ngAfterContentInit()` and every subsequent `ngDoCheck()`.
@ -193,18 +109,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngAfterViewInit()</code>
</td>
<td>
Respond after Angular initializes the component's views and child views.
Called _once_ after the first `ngAfterContentChecked()`.
@ -212,18 +123,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngAfterViewChecked()</code>
</td>
<td>
Respond after Angular checks the component's views and child views.
Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
@ -231,35 +137,24 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<code>ngOnDestroy</code>
</td>
<td>
Cleanup just before Angular destroys the directive/component.
Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called _just before_ Angular destroys the directive/component.
</td>
</tr>
</table>
{@a interface-optional}
## Interfaces are optional (technically)
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
@ -275,16 +170,12 @@ Angular finds and calls methods like `ngOnInit()`, with or without the interface
Nonetheless, it's good practice to add interfaces to TypeScript directive classes
in order to benefit from strong typing and editor tooling.
{@a other-lifecycle-hooks}
## Other Angular lifecycle hooks
Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks.
3rd party libraries might implement their hooks as well in order to give developers more
control over how these libraries are used.
@ -301,134 +192,91 @@ a *child* component that illustrates one or more of the lifecycle hook methods.
Here's a brief description of each exercise:
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<col width="20%"></col>
<col width="80%"></col>
<tr>
<th>
Component
</th>
<th>
Description
</th>
<th>Component</th>
<th>Description</th>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#peek-a-boo">Peek-a-boo</a>
</td>
<td>
Demonstrates every lifecycle hook.
Each hook method writes to the on-screen log.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#spy">Spy</a>
</td>
<td>
Directives have lifecycle hooks too.
A `SpyDirective` can log when the element it spies upon is
created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
This example applies the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
managed by the parent `SpyComponent`.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#onchanges">OnChanges</a>
</td>
<td>
See how Angular calls the `ngOnChanges()` hook with a `changes` object
every time one of the component input properties changes.
Shows how to interpret the `changes` object.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#docheck">DoCheck</a>
</td>
<td>
Implements an `ngDoCheck()` method with custom change detection.
See how often Angular calls this hook and watch it post changes to a log.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#afterview">AfterView</a>
</td>
<td>
Shows what Angular means by a *view*.
Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
<a href="#aftercontent">AfterContent</a>
</td>
<td>
Shows how to project external content into a component and
how to distinguish projected content from a component's view children.
Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks.
</td>
</tr>
<tr style='vertical-align:top'>
<td>
Counter
</td>
<td>
Demonstrates a combination of a component and a directive
each with its own hooks.
@ -438,21 +286,15 @@ Here's a brief description of each exercise:
to the `CounterComponent` log where it watches log entries being created and destroyed.
</td>
</tr>
</table>
The remainder of this page discusses selected exercises in further detail.
{@a peek-a-boo}
## Peek-a-boo: all hooks
The `PeekABooComponent` demonstrates all of the hooks in one component.
You would rarely, if ever, implement all of the interfaces like this.
@ -464,24 +306,17 @@ This snapshot reflects the state of the log after the user clicked the *Create..
<img src="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo">
</figure>
The sequence of log messages follows the prescribed hook calling order:
`OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x),
`AfterViewInit`, `AfterViewChecked`&nbsp;(3x), and `OnDestroy`.
<div class="l-sub-section">
The constructor isn't an Angular hook *per se*.
The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
The constructor isn't an Angular hook *per se*.
The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
</div>
Had the user clicked the *Update Hero* button, the log would show another `OnChanges` and two more triplets of
`DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
Clearly these three hooks fire *often*. Keep the logic in these hooks as lean as possible!
@ -491,8 +326,6 @@ The next examples focus on hook details.
{@a spy}
## Spying *OnInit* and *OnDestroy*
Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
@ -500,56 +333,37 @@ Go undercover with these two spy hooks to discover when an element is initialize
This is the perfect infiltration job for a directive.
The heroes will never know they're being watched.
<div class="l-sub-section">
Kidding aside, pay attention to two key points:
1. Angular calls hook methods for *directives* as well as components.<br><br>
Kidding aside, pay attention to two key points:
1. Angular calls hook methods for *directives* as well as components.<br><br>
2. A spy directive can provide insight into a DOM object that you cannot change directly.
Obviously you can't touch the implementation of a native `<div>`.
You can't modify a third party component either.
But you can watch both with a directive.
2. A spy directive can provide insight into a DOM object that you cannot change directly.
Obviously you can't touch the implementation of a native `<div>`.
You can't modify a third party component either.
But you can watch both with a directive.
</div>
The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` and `ngOnDestroy()` hooks
that log messages to the parent via an injected `LoggerService`.
<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false"></code-example>
You can apply the spy to any native or component element and it'll be initialized and destroyed
at the same time as that element.
Here it is attached to the repeated hero `<div>`:
<code-example path="lifecycle-hooks/src/app/spy.component.html" region="template" title="src/app/spy.component.html" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/spy.component.html" region="template" title="src/app/spy.component.html" linenums="false"></code-example>
Each spy's birth and death marks the birth and death of the attached hero `<div>`
with an entry in the *Hook Log* as seen here:
<figure>
<img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive">
</figure>
Adding a hero results in a new hero `<div>`. The spy's `ngOnInit()` logs that event.
The *Reset* button clears the `heroes` list.
@ -560,7 +374,6 @@ The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in re
{@a oninit}
### _OnInit()_
Use `ngOnInit()` for two main reasons:
@ -572,17 +385,12 @@ Experienced developers agree that components should be cheap and safe to constru
<div class="l-sub-section">
Misko Hevery, Angular team lead,
[explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
you should avoid complex constructor logic.
Misko Hevery, Angular team lead,
[explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
you should avoid complex constructor logic.
</div>
Don't fetch data in a component constructor.
You shouldn't worry that a new component will try to contact a remote server when
created under test or before you decide to display it.
@ -599,23 +407,17 @@ They'll have been set when `ngOnInit()` runs.
<div class="l-sub-section">
The `ngOnChanges()` method is your first opportunity to access those properties.
Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
It only calls `ngOnInit()` once.
The `ngOnChanges()` method is your first opportunity to access those properties.
Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
It only calls `ngOnInit()` once.
</div>
You can count on Angular to call the `ngOnInit()` method _soon_ after creating the component.
That's where the heavy initialization logic belongs.
{@a ondestroy}
### _OnDestroy()_
Put cleanup logic in `ngOnDestroy()`, the logic that *must* run before Angular destroys the directive.
@ -627,21 +429,14 @@ Unsubscribe from Observables and DOM events. Stop interval timers.
Unregister all callbacks that this directive registered with global or application services.
You risk memory leaks if you neglect to do so.
{@a onchanges}
## _OnChanges()_
Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
This example monitors the `OnChanges` hook.
<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="ng-on-changes" title="on-changes.component.ts (excerpt)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="ng-on-changes" title="on-changes.component.ts (excerpt)" linenums="false"></code-example>
The `ngOnChanges()` method takes an object that maps each changed property name to a
[SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
@ -649,30 +444,18 @@ This hook iterates over the changed properties and logs them.
The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="inputs" title="src/app/on-changes.component.ts" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/on-changes.component.ts" region="inputs" title="src/app/on-changes.component.ts" linenums="false"></code-example>
The host `OnChangesParentComponent` binds to them like this:
<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html">
</code-example>
<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html"></code-example>
Here's the sample in action as the user makes changes.
<figure>
<img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges">
</figure>
The log entries appear as the string value of the *power* property changes.
But the `ngOnChanges` does not catch changes to `hero.name`
That's surprising at first.
@ -682,43 +465,30 @@ The value of the `hero` property is the *reference to the hero object*.
Angular doesn't care that the hero's own `name` property changed.
The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
{@a docheck}
## _DoCheck()_
Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
<div class="l-sub-section">
Use this method to detect a change that Angular overlooked.
Use this method to detect a change that Angular overlooked.
</div>
The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" title="DoCheckComponent (ngDoCheck)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" title="DoCheckComponent (ngDoCheck)" linenums="false"></code-example>
This code inspects certain _values of interest_, capturing and comparing their current state against previous values.
It writes a special message to the log when there are no substantive changes to the `hero` or the `power`
so you can see how often `DoCheck` is called. The results are illuminating:
<figure>
<img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck">
</figure>
While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it has a frightful cost.
This hook is called with enormous frequency&mdash;after _every_
change detection cycle no matter where the change occurred.
@ -729,54 +499,34 @@ Mere mousing into another `<input>` triggers a call.
Relatively few calls reveal actual changes to pertinent data.
Clearly our implementation must be very lightweight or the user experience suffers.
{@a afterview}
## AfterView
The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
*after* it creates a component's child views.
Here's a child view that displays a hero's name in an `<input>`:
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="child-view" title="ChildComponent" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="child-view" title="ChildComponent" linenums="false"></code-example>
The `AfterViewComponent` displays this child view *within its template*:
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="template" title="AfterViewComponent (template)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="template" title="AfterViewComponent (template)" linenums="false"></code-example>
The following hooks take action based on changing values *within the child view*,
which can only be reached by querying for the child view via the property decorated with
[@ViewChild](api/core/ViewChild).
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false"></code-example>
{@a wait-a-tick}
### Abide by the unidirectional data flow rule
The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false"></code-example>
Why does the `doSomething()` method wait a tick before updating `comment`?
@ -787,56 +537,40 @@ Angular throws an error if the hook updates the component's data-bound `comment`
The `LoggerService.tick_then()` postpones the log update
for one turn of the browser's JavaScript cycle and that's just long enough.
Here's *AfterView* in action:
<figure>
<img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView">
</figure>
Notice that Angular frequently calls `AfterViewChecked()`, often when there are no changes of interest.
Write lean hook methods to avoid performance problems.
{@a aftercontent}
## AfterContent
The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls
*after* Angular projects external content into the component.
{@a content-projection}
### Content projection
*Content projection* is a way to import HTML content from outside the component and insert that content
into the component's template in a designated spot.
<div class="l-sub-section">
AngularJS developers know this technique as *transclusion*.
AngularJS developers know this technique as *transclusion*.
</div>
Consider this variation on the [previous _AfterView_](guide/lifecycle-hooks#afterview) example.
This time, instead of including the child view within the template, it imports the content from
the `AfterContentComponent`'s parent. Here's the parent's template:
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="parent-template" title="AfterContentParentComponent (template excerpt)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="parent-template" title="AfterContentParentComponent (template excerpt)" linenums="false"></code-example>
Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
Never put content between a component's element tags *unless you intend to project that content
@ -844,11 +578,7 @@ into the component*.
Now look at the component's template:
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="template" title="AfterContentComponent (template)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="template" title="AfterContentComponent (template)" linenums="false"></code-example>
The `<ng-content>` tag is a *placeholder* for the external content.
It tells Angular where to insert that content.
@ -858,27 +588,17 @@ In this case, the projected content is the `<my-child>` from the parent.
<img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' alt="Projected Content">
</figure>
<div class="l-sub-section">
The telltale signs of *content projection* are twofold:
The telltale signs of *content projection* are twofold:
* HTML between component element tags.
* The presence of `<ng-content>` tags in the component's template.
</div>
{@a aftercontent-hooks}
### AfterContent hooks
*AfterContent* hooks are similar to the *AfterView* hooks.
@ -894,16 +614,10 @@ The following *AfterContent* hooks take action based on changing values in a *co
which can only be reached by querying for them via the property decorated with
[@ContentChild](api/core/ContentChild).
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
</code-example>
<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false"></code-example>
{@a no-unidirectional-flow-worries}
### No unidirectional flow worries with _AfterContent_
This component's `doSomething()` method update's the component's data-bound `comment` property immediately.

69
aio/content/guide/set-document-title.md
View File

@ -1,28 +1,19 @@
@title
Set the Document Title
@intro
Setting the document or window title using the Title service.
@description
{@a top}
# Set the Document Title
Your app should be able to make the browser title bar say whatever you want it to say.
This cookbook explains how to do it.
See the <live-example name="set-document-title"></live-example>.
<div class="l-sub-section clearfix">
<div class="l-sub-section">
<img src='generated/images/plunker/plunker-switch-to-editor-button.png'alt="pop out the window" class="right">
<img src='generated/images/plunker/plunker-separate-window-button.png' alt="pop out the window" class="right">
<img src='generated/images/plunker/plunker-switch-to-editor-button.png'alt="pop out the window" class="right">
<img src='generated/images/plunker/plunker-separate-window-button.png' alt="pop out the window" class="right">
To see the browser title bar change in the live example,
open it again in the Plunker editor by clicking the icon in the upper right,
then pop out the preview window by clicking the blue 'X' button in the upper right corner.
To see the browser title bar change in the live example,
open it again in the Plunker editor by clicking the icon in the upper right,
then pop out the preview window by clicking the blue 'X' button in the upper right corner.
</div>
@ -34,8 +25,6 @@ The obvious approach is to bind a property of the component to the HTML `<title>
&lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
</code-example>
Sorry but that won't work.
The root component of the application is an element contained within the `<body>` tag.
The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
@ -45,19 +34,15 @@ That's dirty and undermines your chances of running the app outside of a browser
<div class="l-sub-section">
Running your app outside a browser means that you can take advantage of server-side
pre-rendering for near-instant first app render times and for SEO. It means you could run from
inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
Running your app outside a browser means that you can take advantage of server-side
pre-rendering for near-instant first app render times and for SEO. It means you could run from
inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
</div>
## Use the `Title` service
## Use the *Title* service
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
The [Title](api/platform-browser/Title) service is a simple class that provides an API
for getting and setting the current HTML document title:
@ -68,11 +53,7 @@ for getting and setting the current HTML document title:
You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false">
</code-example>
<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>
Bind that method to three anchor tags and voilà!
@ -80,31 +61,15 @@ Bind that method to three anchor tags and voilà!
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
</figure>
Here's the complete solution:
<code-tabs>
<code-pane title="src/main.ts" path="set-document-title/src/main.ts">
</code-pane>
<code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts">
</code-pane>
<code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts">
</code-pane>
<code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
<code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
<code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
</code-tabs>
## Why provide the *Title* service in *bootstrap*
## Why provide the `Title` service in `bootstrap`
Generally you want to provide application-wide services in the root application component, `AppComponent`.

2
aio/content/marketing/docs.md
View File

@ -2,7 +2,7 @@
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
<div class="card-container clearfix">
<div class="card-container">
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
title="Experience Angular in a live coding environment">
<section>Experience Angular</section>