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

Commit c9d4050

Browse files
bennadelwardbell
bennadel
authored and
wardbell
committed
docs(cb-set-document-title): new "Set Title" cookbook chapter
closes #1069
1 parent 634e50a commit c9d4050

File tree

15 files changed

+267
-6
lines changed

15 files changed

+267
-6
lines changed

‎public/docs/_examples/cb-set-document-title/e2e-spec.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// gulp run-e2e-tests --filter=cb-set-document-title
2+
describe('Set Document Title', function () {
3+
4+
beforeAll(function () {
5+
browser.get('');
6+
});
7+
8+
it('should set the document title', function () {
9+
10+
var titles = [
11+
'Good morning!',
12+
'Good afternoon!',
13+
'Good evening!'
14+
];
15+
16+
element.all( by.css( 'ul li a' ) ).each(
17+
function iterator( element, i ) {
18+
19+
element.click();
20+
expect( browser.getTitle() ).toEqual( titles[ i ] );
21+
22+
}
23+
);
24+
25+
});
26+
27+
});

‎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: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// #docplaster
2+
// #docregion
3+
// Import the native Angular services.
4+
import { Component } from 'angular2/core';
5+
import { Title } from 'angular2/platform/browser';
6+
7+
@Component({
8+
selector: 'my-app',
9+
template:
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 afternoon</a>.</li>
17+
<li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
18+
</ul>
19+
`
20+
})
21+
// #docregion class
22+
export class AppComponent {
23+
public constructor(private _titleService: Title ) { }
24+
25+
public setTitle( newTitle: string) {
26+
this._titleService.setTitle( newTitle );
27+
}
28+
}
29+
// #enddocregion class

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// #docregion
2+
import { bootstrap } from 'angular2/platform/browser';
3+
import { AppComponent } from './app.component';
4+
5+
// While Angular supplies a Title service for setting the HTML document title
6+
// it doesn't include this service as part of the default Browser platform providers.
7+
// As such, if we want to inject it into the components within our application,
8+
// we have to explicitly provide the Angular service in our top component.
9+
// #docregion bootstrap-title
10+
import { Title } from 'angular2/platform/browser';
11+
12+
bootstrap(AppComponent, [ Title ])
13+
// #enddocregion bootstrap-title
14+
.then(
15+
() => window.console.info( 'Angular finished bootstrapping your application!' ),
16+
(error) => {
17+
console.warn( 'Angular was not able to bootstrap your application.' );
18+
console.error( error );
19+
}
20+
);

‎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: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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">
14+
<link rel="stylesheet" type="text/css" href="sample.css">
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+
22+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
23+
<script src="node_modules/systemjs/dist/system.src.js"></script>
24+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
25+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
26+
<script>
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+
console.info( "System.js loaded your application module." );
43+
},
44+
function handleError( error ) {
45+
console.warn( "System.js could not load your application module." );
46+
console.error( error );
47+
48+
}
49+
);
50+
</script>
51+
</head>
52+
<body>
53+
54+
<h1>
55+
Setting The Document Title Using The Title Service
56+
</h1>
57+
58+
<my-app>
59+
Loading app...
60+
</my-app>
61+
62+
</body>
63+
</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/dart/latest/cookbook/_data.json

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
"navTitle": "Overview",
55
"intro": "A collection of recipes for common Angular application scenarios"
66
},
7-
7+
88
"a1-a2-quick-reference": {
99
"title": "Angular 1 to 2 Quick Reference",
1010
"navTitle": "Angular 1 to 2 Quick Ref",
1111
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2",
1212
"hide": true
1313
},
14-
14+
1515
"component-communication": {
1616
"title": "Component Interaction",
1717
"intro": "Share information between different directives and components"
@@ -22,16 +22,21 @@
2222
"intro": "Techniques for Dependency Injection",
2323
"hide": true
2424
},
25-
25+
2626
"dynamic-forms": {
2727
"title": "Dynamic Form",
2828
"intro": "Render dynamic forms with NgFormModel",
2929
"hide": true
3030
},
3131

32+
"set-document-title": {
33+
"title": "Set the Document Title",
34+
"intro": "Setting the document or window title using the Title service."
35+
},
36+
3237
"ts-to-js": {
3338
"title": "TypeScript to JavaScript",
3439
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
3540
"hide": true
3641
}
37-
}
42+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

0 commit comments

Comments
 (0)