Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 4383dae

Browse files
bennadelwardbell
bennadel
authored and
wardbell
committed
Create cookbook recipe for setting the document title.
1 parent cac5c89 commit 4383dae

File tree

9 files changed

+211
-0
lines changed

9 files changed

+211
-0
lines changed

‎public/docs/_examples/cb-set-document-title/ts/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**/*.js
2+
npm-debug.log

‎public/docs/_examples/cb-set-document-title/ts/app/app.component.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// #docregion
2+
// Import the native Angular services.
3+
import { Component } from "angular2/core";
4+
import { Title } from "angular2/platform/browser";
5+
6+
@Component({
7+
selector: 'my-app',
8+
template:
9+
`
10+
<p>
11+
Select a title to set on the current HTML document:
12+
</p>
13+
14+
<ul>
15+
<li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
16+
<li><a (click)="setTitle( 'Good afternoon!' )">Good afernoon</a>.</li>
17+
<li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
18+
</ul>
19+
`
20+
})
21+
export class AppComponent {
22+
23+
// I initialize the component.
24+
public constructor( title :Title ) {
25+
26+
this._titleService = title;
27+
28+
}
29+
30+
31+
// ---
32+
// PUBLIC METHODS.
33+
// ---
34+
35+
36+
// I apply the given title to the HTML document.
37+
public setTitle( newTitle :string ) : void {
38+
39+
this._titleService.setTitle( newTitle );
40+
41+
}
42+
43+
}

‎public/docs/_examples/cb-set-document-title/ts/app/main.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// #docregion
2+
// #docregion bootstrap-simple
3+
// Import the native Angular services.
4+
import { bootstrap } from "angular2/platform/browser";
5+
import { Title } from "angular2/platform/browser";
6+
7+
// Import the custom application services.
8+
import { AppComponent } from "./app.component";
9+
10+
var promise = bootstrap(
11+
AppComponent,
12+
[
13+
// While Angular supplies a Title service for setting the HTML document
14+
// title, it doesn't include this service as part of the default Browser
15+
// platform providers. As such, if we want to inject it into the components
16+
// within our application, we have to explicitly provide the Angular
17+
// service when bootstrapping our application.
18+
Title
19+
]
20+
);
21+
// #enddocregion bootstrap-simple
22+
23+
// Log bootstrap completion (whether in success or failure).
24+
promise.then(
25+
function handleBootstrapSuccess() {
26+
27+
console.info( "Angular finished bootstrapping your application!" );
28+
29+
},
30+
function handleBootstrapFailure( error :any ) {
31+
32+
console.warn( "Angular was not able to bootstrap your application." );
33+
console.error( error );
34+
35+
}
36+
);

‎public/docs/_examples/cb-set-document-title/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-set-document-title/ts/index.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<base href="/" />
7+
8+
<title>
9+
Setting The Document Title Using The Title Service
10+
</title>
11+
12+
<!-- #docregion style -->
13+
<link rel="stylesheet" type="text/css" href="styles.css"></link>
14+
<link rel="stylesheet" type="text/css" href="sample.css"></link>
15+
<!-- #enddocregion style -->
16+
17+
<!-- IE required polyfills, in this exact order -->
18+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
19+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
20+
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
21+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
22+
<script src="node_modules/systemjs/dist/system.src.js"></script>
23+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
24+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
25+
<script>
26+
27+
// Configure our module loader.
28+
System.config({
29+
packages: {
30+
app: {
31+
format: "register",
32+
defaultExtension: "js"
33+
}
34+
}
35+
});
36+
37+
// Load the root module (which will, in turn, bootstrap the Angular 2 application).
38+
System
39+
.import( "app/main" )
40+
.then(
41+
function handleSuccess() {
42+
43+
console.info( "System.js loaded your application module." );
44+
45+
},
46+
function handleError( error ) {
47+
48+
console.warn( "System.js could not load your application module." );
49+
console.error( error );
50+
51+
}
52+
)
53+
;
54+
55+
</script>
56+
</head>
57+
<body>
58+
59+
<h1>
60+
Setting The Document Title Using The Title Service
61+
</h1>
62+
63+
<my-app>
64+
Loading app...
65+
</my-app>
66+
67+
</body>
68+
</html>

‎public/docs/_examples/cb-set-document-title/ts/plnkr.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"description": "Set The Document Title In Angular 2",
3+
"files": [
4+
"!**/*.d.ts",
5+
"!**/*.js",
6+
"!**/*.[1].*"
7+
],
8+
"tags": [ "cookbook" ]
9+
}

‎public/docs/_examples/cb-set-document-title/ts/sample.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
a {
2+
color: #607D8B ;
3+
text-decoration: underline ;
4+
}

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,10 @@
2929
"ts-to-js": {
3030
"title": "TypeScript to JavaScript",
3131
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
32+
},
33+
34+
"set-document-title": {
35+
"title": "Set the Document Title",
36+
"intro": "Setting the document or window title using the Title service."
3237
}
3338
}

‎public/docs/ts/latest/cookbook/set-document-title.jade

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
include ../_util-fns
2+
3+
:marked
4+
**TODO Items (so I don't forget them later)**:
5+
6+
* <span style="background-color: yellow ;">Insert link to Title service document.</span>
7+
* <span style="background-color: yellow ;">Get Plunkr working for live code example.</span>
8+
9+
----
10+
11+
In an AngularJS 1.x application, you were able to bootstrap your Angular code on top of the entire HTML document.
12+
This meant that you could create a root component that provided a scope value that defined the HTML `title` tag,
13+
`<title>{{ pageTitle }}</title>`. In Angular 2, however, the root component of your application is an element
14+
contained within the `body` tag. This means that your Angular 2 application doesn't have native access to the
15+
`title` tag in the same way that it used to.
16+
17+
Fortunately, Angular 2 bridges this gap by providing a `Title` service as part of the **Browser platform**. The
18+
`Title` service is a simple class that provides an API for getting and setting the current HTML document title:
19+
20+
* `getTitle() : string` &mdash; Gets the title of the current HTML document.
21+
* `setTitle( newTitle : string )` &mdash; Sets the title of the current HTML document.
22+
23+
While this class is provided as part of the Browser platform package, it is *not part of the default Browser
24+
platform providers*. This means that even if you bootstrap your application using the Browser platform `boostrap()`
25+
function, you'll still need to explicitly include `Title` as one of the custom providers:
26+
27+
+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-simple", "app/main.ts" )
28+
29+
:marked
30+
Once you've explicitly provided the `Title` service you can then inject the `Title` service into any of your
31+
custom application components and services. To see this in action, let's take a look at how the provided `Title`
32+
service can be injected into one of our Angular 2 components and then used to set the document title:
33+
34+
**See the [live example](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
35+
36+
+makeExample( "cb-set-document-title/ts/app/app.component.ts", "", "app/app.component.ts" )
37+
38+
.callout.is-helpful
39+
header Title Is Platform Specific
40+
:marked
41+
The `Title` service is provided as part of the Browser platform. This means that if you bootstrap your application using another platform, you'll have to provide a different `Title` service that understand the concept of a "document title" for that specific platform.
42+
43+
:marked
44+
[Back to top](#top)

0 commit comments

Comments
 (0)