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

Commit 803414a

Browse files
filipesilvawardbell
filipesilva
authored and
wardbell
committed
docs(testing): update testing to use toh-5
closes #1003
1 parent 45bc6ed commit 803414a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+832
-569
lines changed

‎public/docs/_examples/testing/ts/app/app.component.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* #docplaster */
2+
/* #docregion css */
3+
h1 {
4+
font-size: 1.2em;
5+
color: #999;
6+
margin-bottom: 0;
7+
}
8+
h2 {
9+
font-size: 2em;
10+
margin-top: 0;
11+
padding-top: 0;
12+
}
13+
nav a {
14+
padding: 5px 10px;
15+
text-decoration: none;
16+
margin-top: 10px;
17+
display: inline-block;
18+
background-color: #eee;
19+
border-radius: 4px;
20+
}
21+
nav a:visited, a:link {
22+
color: #607D8B;
23+
}
24+
nav a:hover {
25+
color: #039be5;
26+
background-color: #CFD8DC;
27+
}
28+
nav a.router-link-active {
29+
color: #039be5;
30+
}
31+
/* #enddocregion css */

‎public/docs/_examples/testing/ts/app/app.component.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from 'angular2/core';
4+
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
5+
6+
import { HeroService } from './hero.service';
7+
import { DashboardComponent } from './dashboard.component';
8+
import { HeroesComponent } from './heroes.component';
9+
// #docregion hero-detail-import
10+
import { HeroDetailComponent } from './hero-detail.component';
11+
// #enddocregion hero-detail-import
12+
13+
@Component({
14+
selector: 'my-app',
15+
// #docregion template
16+
template: `
17+
<h1>{{title}}</h1>
18+
<nav>
19+
<a [routerLink]="['Dashboard']">Dashboard</a>
20+
<a [routerLink]="['Heroes']">Heroes</a>
21+
</nav>
22+
<router-outlet></router-outlet>
23+
`,
24+
// #enddocregion template
25+
// #docregion style-urls
26+
styleUrls: ['app/app.component.css'],
27+
// #enddocregion style-urls
28+
directives: [ROUTER_DIRECTIVES],
29+
providers: [
30+
ROUTER_PROVIDERS,
31+
HeroService
32+
]
33+
})
34+
@RouteConfig([
35+
// #docregion dashboard-route
36+
{
37+
path: '/dashboard',
38+
name: 'Dashboard',
39+
component: DashboardComponent,
40+
useAsDefault: true
41+
},
42+
// #enddocregion dashboard-route
43+
// #docregion hero-detail-route
44+
{
45+
path: '/detail/:id',
46+
name: 'HeroDetail',
47+
component: HeroDetailComponent
48+
},
49+
// #enddocregion hero-detail-route
50+
{
51+
path: '/heroes',
52+
name: 'Heroes',
53+
component: HeroesComponent
54+
}
55+
])
56+
export class AppComponent {
57+
title = 'Tour of Heroes';
58+
}
59+
// #enddocregion

‎public/docs/_examples/testing/ts/app/backend.service.ts

-14
This file was deleted.

‎public/docs/_examples/testing/ts/app/bootstrap.ts

-11
This file was deleted.

‎public/docs/_examples/testing/ts/app/dashboard.component.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* #docplaster */
2+
/* #docregion */
3+
[class*='col-'] {
4+
float: left;
5+
}
6+
*, *:after, *:before {
7+
-webkit-box-sizing: border-box;
8+
-moz-box-sizing: border-box;
9+
box-sizing: border-box;
10+
}
11+
h3 {
12+
text-align: center; margin-bottom: 0;
13+
}
14+
[class*='col-'] {
15+
padding-right: 20px;
16+
padding-bottom: 20px;
17+
}
18+
[class*='col-']:last-of-type {
19+
padding-right: 0;
20+
}
21+
.grid {
22+
margin: 0;
23+
}
24+
.col-1-4 {
25+
width: 25%;
26+
}
27+
.module {
28+
padding: 20px;
29+
text-align: center;
30+
color: #eee;
31+
max-height: 120px;
32+
min-width: 120px;
33+
background-color: #607D8B;
34+
border-radius: 2px;
35+
}
36+
h4 {
37+
position: relative;
38+
}
39+
.module:hover {
40+
background-color: #EEE;
41+
cursor: pointer;
42+
color: #607d8b;
43+
}
44+
.grid-pad {
45+
padding: 10px 0;
46+
}
47+
.grid-pad > [class*='col-']:last-of-type {
48+
padding-right: 20px;
49+
}
50+
@media (max-width: 600px) {
51+
.module {
52+
font-size: 10px;
53+
max-height: 75px; }
54+
}
55+
@media (max-width: 1024px) {
56+
.grid {
57+
margin: 0;
58+
}
59+
.module {
60+
min-width: 60px;
61+
}
62+
}
63+
/* #enddocregion */

‎public/docs/_examples/testing/ts/app/dashboard.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- #docregion -->
2+
<h3>Top Heroes</h3>
3+
<div class="grid grid-pad">
4+
<!-- #docregion click -->
5+
<div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
6+
<!-- #enddocregion click -->
7+
<div class="module hero">
8+
<h4>{{hero.name}}</h4>
9+
</div>
10+
</div>
11+
</div>

‎public/docs/_examples/testing/ts/app/dashboard.component.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component, OnInit } from 'angular2/core';
4+
// #docregion import-router
5+
import { Router } from 'angular2/router';
6+
// #enddocregion import-router
7+
8+
import { Hero } from './hero';
9+
import { HeroService } from './hero.service';
10+
11+
@Component({
12+
selector: 'my-dashboard',
13+
// #docregion template-url
14+
templateUrl: 'app/dashboard.component.html',
15+
// #enddocregion template-url
16+
// #docregion css
17+
styleUrls: ['app/dashboard.component.css']
18+
// #enddocregion css
19+
})
20+
// #docregion component
21+
export class DashboardComponent implements OnInit {
22+
23+
heroes: Hero[] = [];
24+
25+
// #docregion ctor
26+
constructor(
27+
private _router: Router,
28+
private _heroService: HeroService) {
29+
}
30+
// #enddocregion ctor
31+
32+
ngOnInit() {
33+
this._heroService.getHeroes()
34+
.then(heroes => this.heroes = heroes.slice(1,5));
35+
}
36+
37+
// #docregion goto-detail
38+
gotoDetail(hero: Hero) {
39+
let link = ['HeroDetail', { id: hero.id }];
40+
this._router.navigate(link);
41+
}
42+
// #enddocregion goto-detail
43+
}
44+
// #enddocregion

‎public/docs/_examples/testing/ts/app/decorators.ts

-16
This file was deleted.

‎public/docs/_examples/testing/ts/app/hero-detail.component.css

+30-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1-
.hero-detail div {padding:0.2em;}
2-
.hero-detail div input {position: absolute; left:9em; }
3-
.hero-id {position: absolute; left:7.5em; }
1+
/* #docregion */
2+
label {
3+
display: inline-block;
4+
width: 3em;
5+
margin: .5em 0;
6+
color: #607D8B;
7+
font-weight: bold;
8+
}
9+
input {
10+
height: 2em;
11+
font-size: 1em;
12+
padding-left: .4em;
13+
}
14+
button {
15+
margin-top: 20px;
16+
font-family: Arial;
17+
background-color: #eee;
18+
border: none;
19+
padding: 5px 10px;
20+
border-radius: 4px;
21+
cursor: pointer; cursor: hand;
22+
}
23+
button:hover {
24+
background-color: #cfd8dc;
25+
}
26+
button:disabled {
27+
background-color: #eee;
28+
color: #ccc;
29+
cursor: auto;
30+
}

‎public/docs/_examples/testing/ts/app/hero-detail.component.html

+13-23
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
1+
<!-- #docplaster -->
12
<!-- #docregion -->
2-
<div class="hero-detail">
3-
<!-- #docregion pipe-usage -->
4-
<h2>{{hero.name | initCaps}} is {{userName}}'s current super hero!</h2>
5-
<!-- #enddocregion pipe-usage -->
6-
<div>
7-
<button (click)="onDelete()" [disabled]="!hero">Delete</button>
8-
<button (click)="onUpdate()" [disabled]="!hero">Update</button>
9-
</div>
10-
<div>
11-
<label>Id: </label><span class="hero-id">{{hero.id}}</span></div>
12-
<div>
13-
<label>Name: </label>
14-
<input [(ngModel)]="hero.name" placeholder="name">
15-
</div>
16-
<div>
17-
<label>Power: </label>
18-
<input [(ngModel)]="hero.power" placeholder="super power">
19-
</div>
20-
<div>
21-
<label>Alter Ego: </label>
22-
<input [(ngModel)]="hero.alterEgo" placeholder="alter ego">
23-
</div>
24-
</div>
3+
<div *ngIf="hero">
4+
<h2>{{hero.name}} details!</h2>
5+
<div>
6+
<label>id: </label>{{hero.id}}</div>
7+
<div>
8+
<label>name: </label>
9+
<input [(ngModel)]="hero.name" placeholder="name" />
10+
</div>
11+
<!-- #docregion back-button -->
12+
<button (click)="goBack()">Back</button>
13+
<!-- #enddocregion back-button -->
14+
</div>

0 commit comments

Comments
 (0)