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

Commit 6532e71

Browse files
wardbellwardbell
committed
docs(cb-set-document-title): new cookbook chapter, Ward's tweaks
1 parent 0cad2e3 commit 6532e71

File tree

10 files changed

+190
-167
lines changed

10 files changed

+190
-167
lines changed

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

Lines changed: 22 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,29 @@
1+
// #docplaster
12
// #docregion
23
// Import the native Angular services.
3-
import { Component } from "angular2/core";
4-
import { Title } from "angular2/platform/browser";
4+
import { Component } from 'angular2/core';
5+
import { Title } from 'angular2/platform/browser';
56

67
@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-
`
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+
`
2020
})
21+
// #docregion class
2122
export class AppComponent {
23+
public constructor(private _titleService: Title ) { }
2224

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-
}
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: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,20 @@
11
// #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";
2+
import { bootstrap } from 'angular2/platform/browser';
3+
import { AppComponent } from './app.component';
64

7-
// Import the custom application services.
8-
import { AppComponent } from "./app.component";
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';
911

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-
);
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/index.html

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,63 @@
11
<!DOCTYPE html>
22
<html>
33
<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>
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>
5651
</head>
5752
<body>
5853

59-
<h1>
60-
Setting The Document Title Using The Title Service
61-
</h1>
54+
<h1>
55+
Setting The Document Title Using The Title Service
56+
</h1>
6257

63-
<my-app>
64-
Loading app...
65-
</my-app>
58+
<my-app>
59+
Loading app...
60+
</my-app>
6661

6762
</body>
6863
</html>

‎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")

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,17 @@
2020
"title": "Dependency Injection",
2121
"intro": "Techniques for Dependency Injection"
2222
},
23-
23+
2424
"dynamic-forms": {
2525
"title": "Dynamic Form",
2626
"intro": "Render dynamic forms with NgFormModel"
2727
},
2828

29+
"set-document-title": {
30+
"title": "Set the Document Title",
31+
"intro": "Setting the document or window title using the Title service."
32+
},
33+
2934
"ts-to-js": {
3035
"title": "TypeScript to JavaScript",
3136
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"

‎public/docs/js/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")

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
"navTitle": "Overview",
55
"description": "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
},
13-
13+
1414
"component-communication": {
1515
"title": "Component Interaction",
1616
"intro": "Share information between different directives and components"
@@ -26,13 +26,13 @@
2626
"intro": "Render dynamic forms with NgFormModel"
2727
},
2828

29-
"ts-to-js": {
30-
"title": "TypeScript to JavaScript",
31-
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
32-
},
33-
3429
"set-document-title": {
3530
"title": "Set the Document Title",
3631
"intro": "Setting the document or window title using the Title service."
32+
},
33+
34+
"ts-to-js": {
35+
"title": "TypeScript to JavaScript",
36+
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
3737
}
3838
}

0 commit comments

Comments
 (0)