@@ -9,21 +9,21 @@ a(id='top')
99.l-sub-section
1010 img( src ='/resources/images/devguide/plunker-separate-window-button.png' alt ="pop out the window" align ="right" style ="margin-right:-20px" )
1111 :marked
12- To see the browser Title bar changes,
12+ To see the browser Title bar changes,
1313 pop out the preview window by clicking the blue 'X' button in the upper right corner.
1414:marked
1515 ## The problem with *<title>*
16-
16+
1717 The obvious approach is to bind a property of the component to the HTML `<title>` like this:
18- code-example( format ='' )
18+ code-example( format ='' ) .
1919 < title> {{This_Does_Not_Work}}< /title>
2020:marked
21- Sorry but that won't work.
21+ Sorry but that won't work.
2222 The root component of our application is an element contained within the `<body>` tag.
2323 The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
2424
25- We could grab the browser `document` object and set the title manually.
26- That's dirty and undermines our chances of running the app outside of a browser someday.
25+ We could grab the browser `document` object and set the title manually.
26+ That's dirty and undermines our chances of running the app outside of a browser someday.
2727.l-sub-section
2828 :marked
2929 Running your app outside a browser means that you can take advantage of server-side
@@ -40,16 +40,16 @@ code-example(format='')
4040 * `getTitle() : string` — Gets the title of the current HTML document.
4141 * `setTitle( newTitle : string )` — Sets the title of the current HTML document.
4242
43- While this class is part of the Browser platform package, it is *not part of the default Browser
44- platform providers* that Angular loads automatically.
43+ While this class is part of the Browser platform package, it is *not part of the default Browser
44+ platform providers* that Angular loads automatically.
4545 This means as we bootstrap our application using the Browser platform `boostrap()`
4646 function, we'll also have to include `Title` service explicitly as one of the bootstrap providers:
4747
4848+ makeExample( "cb-set-document-title/ts/app/main.ts" , "bootstrap-title" , "app/main.ts (provide Title service)" )( format ='.' )
4949:marked
5050 Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our
51- custom application components and services.
52-
51+ custom application components and services.
52+
5353 Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
5454
5555+ makeExample( "cb-set-document-title/ts/app/app.component.ts" , "class" , "app/app.component.ts (class)" )( format ='.' )
@@ -61,31 +61,31 @@ figure.image-display
6161:marked
6262 Here's the complete solution
6363
64- + makeTabs(
64+ + makeTabs(
6565 ` cb-set-document-title/ts/app/main.ts,
66- cb-set-document-title/ts/app/app.component.ts` ,
67- '' ,
66+ cb-set-document-title/ts/app/app.component.ts` ,
67+ '' ,
6868 'app/main.ts, app/app.component.ts' )
6969
7070//
71- Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
71+ Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
7272 that appears in the window navigation history and shows up in the back/forward buttons
7373 during routing.
74-
74+
7575 See https://github.com/angular/angular/issues/7630#issuecomment-198328802
76-
76+
7777.l-main-section
7878:marked
7979 ## Why we provide the *Title* service in *bootstrap*
80-
80+
8181 We generally recommended providing application-wide services in the root application component, `AppComponent`.
82-
83- Here we recommend registering the title service during bootstrapping,
82+
83+ Here we recommend registering the title service during bootstrapping,
8484 a location we reserve for configuring the runtime Angular environment.
85-
85+
8686 That's exactly what we're doing.
87- The `Title` service is part of the Angular *browser platform*.
88- If we bootstrap our application into a different platform,
87+ The `Title` service is part of the Angular *browser platform*.
88+ If we bootstrap our application into a different platform,
8989 we'll have to provide a different `Title` service that understands the concept of a "document title" for that specific platform.
9090 Ideally the application itself neither knows nor cares about the runtime environment.
9191:marked
0 commit comments