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

Commit f9fea00

Browse files
wardbellwardbell
committed
docs(component-relative-paths): new cookbook
1 parent da48db3 commit f9fea00

File tree

17 files changed

+313
-50
lines changed

17 files changed

+313
-50
lines changed

‎public/docs/_examples/cb-component-relative-paths/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-component-relative-paths/ts/app/app.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
import { SomeAbsoluteComponent, SomeRelativeComponent} from './some.component';
5+
6+
@Component({
7+
selector: 'my-app',
8+
template:
9+
`<h1>Absolute & <i>Component-Relative</i> Paths</h1>
10+
<absolute-path></absolute-path>
11+
<relative-path></relative-path>
12+
`,
13+
directives: [SomeAbsoluteComponent, SomeRelativeComponent]
14+
})
15+
export class AppComponent {}

‎public/docs/_examples/cb-component-relative-paths/ts/app/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { bootstrap } from '@angular/platform-browser-dynamic';
2+
3+
import { AppComponent } from './app.component';
4+
5+
bootstrap(AppComponent);

‎public/docs/_examples/cb-component-relative-paths/ts/app/some.component.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* #docregion */
2+
div.absolute {
3+
background: beige;
4+
border: 1px solid darkred;
5+
color: red;
6+
margin: 8px;
7+
max-width: 20em;
8+
padding: 4px;
9+
text-align: center;
10+
}
11+
12+
div.relative {
13+
background: powderblue;
14+
border: 1px solid darkblue;
15+
color: Blue;
16+
font-style: italic;
17+
margin: 8px;
18+
max-width: 20em;
19+
padding: 4px;
20+
text-align: center;
21+
}
22+

‎public/docs/_examples/cb-component-relative-paths/ts/app/some.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!-- #docregion -->
2+
<div class={{class}}>
3+
{{type}}<br>{{path}}
4+
</div>

‎public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
///////// Using Absolute Paths ///////
5+
6+
// #docregion absolute-config
7+
@Component({
8+
selector: 'absolute-path',
9+
templateUrl: 'app/some.component.html',
10+
styleUrls: ['app/some.component.css']
11+
})
12+
// #enddocregion absolute-config
13+
export class SomeAbsoluteComponent {
14+
class = 'absolute';
15+
type = 'Absolute template & style URLs';
16+
path = 'app/path.component.html';
17+
}
18+
19+
///////// Using Relative Paths ///////
20+
21+
// #docregion relative-config
22+
@Component({
23+
// #docregion module-id
24+
moduleId: module.id,
25+
// #enddocregion module-id
26+
selector: 'relative-path',
27+
templateUrl: 'some.component.html',
28+
styleUrls: ['some.component.css']
29+
})
30+
// #enddocregion relative-config
31+
32+
export class SomeRelativeComponent {
33+
class = 'relative';
34+
type = 'Component-relative template & style URLs';
35+
path = 'path.component.html';
36+
37+
}

‎public/docs/_examples/cb-component-relative-paths/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-component-relative-paths/ts/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
Component-Relative Paths
10+
</title>
11+
12+
<!-- #docregion style -->
13+
<link rel="stylesheet" type="text/css" href="styles.css">
14+
<!-- #enddocregion style -->
15+
16+
<!-- Polyfill(s) for older browsers -->
17+
<script src="node_modules/core-js/client/shim.min.js"></script>
18+
19+
<script src="node_modules/zone.js/dist/zone.js"></script>
20+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
21+
<script src="node_modules/systemjs/dist/system.src.js"></script>
22+
23+
<script src="systemjs.config.js"></script>
24+
<script>
25+
System.import('app').catch(function(err){ console.error(err); });
26+
</script>
27+
</head>
28+
<body>
29+
<my-app>Loading app...</my-app>
30+
</body>
31+
</html>

‎public/docs/_examples/cb-component-relative-paths/ts/plnkr.json

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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
"intro": "Share information between different directives and components"
1818
},
1919

20+
"component-relative-paths": {
21+
"title": "Component-relative Paths",
22+
"intro": "Use relative URLs for component templates and styles.",
23+
"hide": true
24+
},
25+
2026
"dependency-injection": {
2127
"title": "Dependency Injection",
2228
"intro": "Techniques for Dependency Injection",

0 commit comments

Comments
 (0)