honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(doc-title-cookbook): apply guidelines (#3537)

Browse Source
This commit is contained in:
Kapunahele Wong 2017-04-12 15:08:44 -04:00 committed by Ward Bell
parent 8f1acc5b43
commit 8554e38dd2
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@ include ../_util-fns
a(id='top') a(id='top')
:marked :marked
Our app should be able to make the browser title bar say whatever we want it to say. 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. This cookbook explains how to do it.
:marked :marked
**See the <live-example name="cb-set-document-title"></live-example>**. See the <live-example name="cb-set-document-title"></live-example>.
table table
tr tr
@ -28,11 +28,11 @@ 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 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. 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. You 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 your 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
@ -46,19 +46,19 @@ code-example(format='').
The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API
for getting and setting the current HTML document title: for getting and setting the current HTML document title:
* `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.
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it: You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
+makeExample( "cb-set-document-title/ts/src/app/app.component.ts", "class", "src/app/app.component.ts (class)" )(format='.') +makeExample( "cb-set-document-title/ts/src/app/app.component.ts", "class", "src/app/app.component.ts (class)" )(format='.')
:marked :marked
We bind that method to three anchor tags and, voilà! Bind that method to three anchor tags and voilà!
figure.image-display figure.image-display
img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title") img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title")
:marked :marked
Here's the complete solution Here's the complete solution:
+makeTabs( +makeTabs(
`cb-set-document-title/ts/src/main.ts, `cb-set-document-title/ts/src/main.ts,
@ -76,17 +76,18 @@ figure.image-display
.l-main-section .l-main-section
:marked :marked
## Why we provide the *Title* service in *bootstrap* ## Why provide the *Title* service in *bootstrap*
We generally recommended providing application-wide services in the root application component, `AppComponent`. Generally you want to provide application-wide services in the root application component, `AppComponent`.
Here we recommend registering the title service during bootstrapping, This cookbook recommends registering the title service during bootstrapping,
a location we reserve for configuring the runtime Angular environment. a location you reserve for configuring the runtime Angular environment.
That's exactly what we're doing. That's exactly what you'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 you bootstrap your 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. you'll have to provide a different `Title` service that understands
Ideally the application itself neither knows nor cares about the runtime environment. the concept of a "document title" for that specific platform.
Ideally, the application itself neither knows nor cares about the runtime environment.
:marked :marked
[Back to top](#top) [Back to top](#top)