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

docs(cookbook): text following a node requires a dot

This commit is contained in:
Peter Bacon Darwin 2016-08-06 07:45:32 +01:00
parent 63e0e6eaf6
commit 9f03fca039
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/docs/ts/latest/cookbook/set-document-title.jade
View File

@ -9,21 +9,21 @@ a(id='top')
.l-sub-section .l-sub-section
img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
:marked :marked
To see the browser Title bar changes, To see the browser Title bar changes,
pop out the preview window by clicking the blue 'X' button in the upper right corner. pop out the preview window by clicking the blue 'X' button in the upper right corner.
:marked :marked
## The problem with *<title>* ## The problem with *<title>*
The obvious approach is to bind a property of the component to the HTML `<title>` like this: The obvious approach is to bind a property of the component to the HTML `<title>` like this:
code-example(format='') code-example(format='').
&lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt; &lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
:marked :marked
Sorry but that won't work. Sorry but that won't work.
The root component of our application is an element contained within the `<body>` tag. The root component of our 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. The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
We could grab the browser `document` object and set the title manually. We could grab the browser `document` object and set the title manually.
That's dirty and undermines our chances of running the app outside of a browser someday. That's dirty and undermines our chances of running the app outside of a browser someday.
.l-sub-section .l-sub-section
:marked :marked
Running your app outside a browser means that you can take advantage of server-side Running your app outside a browser means that you can take advantage of server-side
@ -40,16 +40,16 @@ code-example(format='')
* `getTitle() : string` &mdash; Gets the title of the current HTML document. * `getTitle() : string` &mdash; Gets the title of the current HTML document.
* `setTitle( newTitle : string )` &mdash; Sets the title of the current HTML document. * `setTitle( newTitle : string )` &mdash; Sets the title of the current HTML document.
While this class is part of the Browser platform package, it is *not part of the default Browser While this class is part of the Browser platform package, it is *not part of the default Browser
platform providers* that Angular loads automatically. platform providers* that Angular loads automatically.
This means as we bootstrap our application using the Browser platform `boostrap()` This means as we bootstrap our application using the Browser platform `boostrap()`
function, we'll also have to include `Title` service explicitly as one of the bootstrap providers: function, we'll also have to include `Title` service explicitly as one of the bootstrap providers:
+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.') +makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.')
:marked :marked
Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our
custom application components and services. custom application components and services.
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it: Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
+makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.') +makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.')
@ -61,31 +61,31 @@ figure.image-display
:marked :marked
Here's the complete solution Here's the complete solution
+makeTabs( +makeTabs(
`cb-set-document-title/ts/app/main.ts, `cb-set-document-title/ts/app/main.ts,
cb-set-document-title/ts/app/app.component.ts`, cb-set-document-title/ts/app/app.component.ts`,
'', '',
'app/main.ts, app/app.component.ts' ) 'app/main.ts, app/app.component.ts' )
// //
Todo: tie this back to the router so we can see how to use this Title service to (re)set the title Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
that appears in the window navigation history and shows up in the back/forward buttons that appears in the window navigation history and shows up in the back/forward buttons
during routing. during routing.
See https://github.com/angular/angular/issues/7630#issuecomment-198328802 See https://github.com/angular/angular/issues/7630#issuecomment-198328802
.l-main-section .l-main-section
:marked :marked
## Why we provide the *Title* service in *bootstrap* ## Why we provide the *Title* service in *bootstrap*
We generally recommended providing application-wide services in the root application component, `AppComponent`. We generally recommended providing application-wide services in the root application component, `AppComponent`.
Here we recommend registering the title service during bootstrapping, Here we recommend registering the title service during bootstrapping,
a location we reserve for configuring the runtime Angular environment. a location we reserve for configuring the runtime Angular environment.
That's exactly what we're doing. That's exactly what we're doing.
The `Title` service is part of the Angular *browser platform*. The `Title` service is part of the Angular *browser platform*.
If we bootstrap our application into a different platform, If we bootstrap our application into a different platform,
we'll have to provide a different `Title` service that understands the concept of a "document title" for that specific platform. we'll have to provide a different `Title` service that understands the concept of a "document title" for that specific platform.
Ideally the application itself neither knows nor cares about the runtime environment. Ideally the application itself neither knows nor cares about the runtime environment.
:marked :marked