186 lines
4.9 KiB
HTML
186 lines
4.9 KiB
HTML
<!-- #docregion head -->
|
|
<head>
|
|
<base href="/src/" />
|
|
<!-- #docregion stylesheet -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- #enddocregion stylesheet -->
|
|
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
|
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
|
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
|
|
</head>
|
|
<!-- #enddocregion head -->
|
|
<!-- #docregion bootstrap -->
|
|
System.import('app/bootstrap');
|
|
<!-- #enddocregion bootstrap -->
|
|
<!-- #docregion title -->
|
|
import {Component} from 'angular2/angular2';
|
|
|
|
@Component({
|
|
selector: 'my-app',
|
|
template: `
|
|
<h1>{{title}}</h1>
|
|
`
|
|
})
|
|
export class AppComponent {
|
|
public title = 'Tour of Heroes';
|
|
}
|
|
<!-- #enddocregion title -->
|
|
|
|
<!-- #docregion routes-title -->
|
|
import {Component} from 'angular2/angular2';
|
|
import {RouteConfig} from 'angular2/router';
|
|
<!-- #docregion import-app-routes -->
|
|
import {APP_ROUTES} from './route.config';
|
|
<!-- #enddocregion import-app-routes -->
|
|
|
|
@Component({
|
|
selector: 'my-app',
|
|
template: `
|
|
<h1>{{title}}</h1>
|
|
`
|
|
})
|
|
@RouteConfig(APP_ROUTES)
|
|
export class AppComponent {
|
|
public title = 'Tour of Heroes';
|
|
}
|
|
<!-- #enddocregion routes-title -->
|
|
|
|
<!-- #docregion router-outlet -->
|
|
template: `
|
|
<h1>{{title}}</h1>
|
|
<router-outlet></router-outlet>
|
|
`
|
|
<!-- #enddocregion router-outlet -->
|
|
|
|
<!-- #docregion simple-dashboard-component -->
|
|
import {Component} from 'angular2/angular2';
|
|
|
|
@Component({
|
|
selector: 'my-dashboard',
|
|
template: `
|
|
<h1>Dashboard Goes Here</h1>
|
|
`
|
|
})
|
|
export class DashboardComponent {}
|
|
<!-- #enddocregion simple-dashboard-component -->
|
|
|
|
<!-- #docregion router-link -->
|
|
template: `
|
|
<h1>{{title}}</h1>
|
|
<a [router-link]="/Dashboard">Dashboard</a>
|
|
<a [router-link]="/Heroes">Heroes</a>
|
|
<router-outlet></router-outlet>
|
|
`,
|
|
<!-- #enddocregion router-link -->
|
|
|
|
<!-- #docregion ng-for -->
|
|
template: `
|
|
<h3>Top Heroes</h3>
|
|
<div>
|
|
<div *ng-for="#hero of heroes">
|
|
<div>
|
|
<h4>{{hero.name}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
<!-- #enddocregion ng-for -->
|
|
|
|
<!-- #docregion css -->
|
|
[class*='col-'] { float: left; }
|
|
*, *:after, *:before {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
h3 { text-align: center; margin-bottom: 0; }
|
|
[class*='col-'] { padding-right: 20px; padding-bottom: 20px;}
|
|
[class*='col-']:last-of-type { padding-right: 0; }
|
|
.grid { margin: 0 10em; }
|
|
.col-1-4 { width: 25%; }
|
|
.module {
|
|
padding: 20px; text-align: center;
|
|
color: #eee; max-height: 120px; min-width: 120px;
|
|
background-color: #1171a3;
|
|
}
|
|
.module:hover { background-color: #52b9e9; cursor: pointer; }
|
|
.grid-pad { padding: 20px 0 20px 20px; }
|
|
.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
|
|
@media (max-width: 600px) {
|
|
.module { font-size: 10px; max-height: 75px; }
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.grid { margin: 0; }
|
|
.module { min-width: 60px; }
|
|
}
|
|
<!-- #enddocregion css -->
|
|
|
|
<!-- #docregion template-styled -->
|
|
<h3>Top Heroes</h3>
|
|
<div class="grid grid-pad">
|
|
<div *ng-for="#hero of heroes | slice:0:4" class="col-1-4">
|
|
<div class="module hero">
|
|
<h4>{{hero.name}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- #enddocregion template-styled -->
|
|
|
|
<!-- #docregion styled-nav-links -->
|
|
@Component({
|
|
selector: 'my-app',
|
|
template: `
|
|
<h1>{{title}}</h1>
|
|
<a [router-link]="['/' + routes.dashboard.as]"
|
|
class="router-link">Dashboard</a>
|
|
<a [router-link]="['/' + routes.heroes.as]"
|
|
class="router-link">Heroes</a>
|
|
<router-outlet></router-outlet>
|
|
`,
|
|
styles: [`
|
|
.router-link {padding: 5px;text-decoration: none;}
|
|
.router-link:visited, .router-link:link {color: #444;}
|
|
.router-link:hover {color: white; background-color: #1171a3;
|
|
text-decoration: none;}
|
|
.router-link.router-link-active {color: white;
|
|
background-color: #52b9e9; text-decoration: none;}
|
|
`],
|
|
directives: [ROUTER_DIRECTIVES]
|
|
})
|
|
<!-- #docregion styled-nav-links -->
|
|
|
|
<!-- #docregion select-hero-click-event -->
|
|
<h3>Top Heroes</h3>
|
|
<div class="grid grid-pad">
|
|
<div *ng-for="#hero of heroes | slice:0:4" class="col-1-4"
|
|
(click)="gotoDetail(hero)">
|
|
<div class="module hero">
|
|
<h4>{{hero.name}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- #docregion select-hero-click-event -->
|
|
|
|
<!-- #docregion display-hero-name -->
|
|
<div>
|
|
<h2>My Heroes</h2>
|
|
<ul class="heroes">
|
|
<li *ng-for="#hero of heroes"
|
|
[ng-class]="getSelectedClass(hero)"
|
|
(click)="onSelect(hero)">
|
|
<span class="badge">{{hero.id}}</span> {{hero.name}}</a>
|
|
</li>
|
|
</ul>
|
|
<div *ng-if="selectedHero">
|
|
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
|
|
<button (click)="gotoDetail()">View Details</button>
|
|
</div>
|
|
</div>
|
|
<!-- #enddocregion display-hero-name -->
|
|
|
|
<!-- #docregion basic-styles -->
|
|
h2 { color: #444; font-weight: lighter; }
|
|
body { margin: 2em; }
|
|
body, input[text], button { color: #888; font-family: Cambria, Georgia; }
|
|
button {padding: 0.2em; font-size: 14px}
|
|
<!-- #enddocregion basic-styles --> |