iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
angular-docs-cn/public/docs/_examples/toh-5/ts-snippets/app/index.pt4.html

186 lines
4.9 KiB
HTML
Raw Normal View History

docs(tutorial): combines all 4 sections + revisions/updates to a.53, hides 3&4 closes #488 ToH History (oldest-to-latest): ---------------------------- created code example/snippets files for use with +makeExample, replace usage of "pre.prettyprint.lang-bash" with this: code-example(format="." language="bash"). fixed spelling errors in examples file path used by +makeExample changed usage of "code-example" to "+makeExample" adding code example/snippets files used in toh 1 fixed example file paths, replaced "pre.prettyprint.lang-bash" with "code-example. " (docs) toh-pt3 initial state created code examples for display in jade, starting conversion of Google doc and trying +makeExample rendering all text copied from doc to jade, still some styling and formatting to perform completed conversion and styling, moved toh3 example files to "tutorial" folder under _examples created specific code example files for chapter toh 3 and re-pathed references in +makeExample minor edit docs) toh combined - initial combined commit updated ToH for a.52 tons of changes, including de-kebab-ing, removed src folder, updated tsconfig too fixing snippets using incorrect ending input tag using inline html and css for the app.component. ToH Part 1 Code: updated the imports, removed obsolete directive delcarations ToH Code Part 1: updated to use imports, interface. will hit others soon toh part 1: ngModel fix toh part1: removed obsolete story that referred to how we used to have to import and declare all directives we used. yay! ToH Part 1: updated to use `boot.ts` and `app.component.ts`. this affected the partials, snippets, and the story. toh part 1: using `npm run go` toh parts 1 -4: modified all places to use `npm run go` toh part 1: refactor for jade toh part 1: fixing the code samples toh part 2: seeping through the story toh part 2: fixing snippets. toh part 2: replaced ngClass with class.selected toh part 2: removed whitespace toh part 2: added final state to the code toh: fixing paths toh part 4: fixing src/app path to app toh part 3: fixing folder path toh part 2: fixed typo toh part 2: typo on ngModel toh part 2: added ngif toh part 2: removed old hero property. moved the details lower, where we need it toh index: updated hero list image to show consistent styling as the other images here QS spelling error (targes -> targets) tweeks: space and ngIF
2015-11-15 21:04:43 -05:00
<!-- #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 -->