cargdev/angular
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): rename ToH to match the guide name

Browse Source
This commit is contained in:
Jesus Rodriguez
2017-04-18 20:16:02 +02:00
committed by Pete Bacon Darwin
parent 691e86c9bf
commit 9d40ab9e20
113 changed files with 174 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
aio/content/examples/toh-pt2/src/app/app.component.1.html Normal file
View File

@ -0,0 +1,69 @@
<!-- #docregion ng-for -->
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion ng-for -->
<!-- #docregion heroes-styled -->
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #enddocregion heroes-styled -->
<!-- #docregion selectedHero-click -->
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
...
</li>
<!-- #enddocregion selectedHero-click -->
<!-- #docregion selectedHero-details -->
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
<!-- #enddocregion selectedHero-details -->
<!-- #docregion ng-if -->
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
<!-- #enddocregion ng-if -->
<!-- #docregion hero-array-1 -->
heroes = HEROES;
<!-- #enddocregion hero-array-1 -->
<!-- #docregion heroes-template-1 -->
<h2>My Heroes</h2>
<ul class="heroes">
<li>
<!-- each hero goes here -->
</li>
</ul>
<!-- #enddocregion heroes-template-1 -->
<!-- #docregion heroes-ngfor-1 -->
<li *ngFor="let hero of heroes">
<!-- #enddocregion heroes-ngfor-1 -->
<!-- #docregion class-selected-1 -->
[class.selected]="hero === selectedHero"
<!-- #enddocregion class-selected-1 -->
<!-- #docregion class-selected-2 -->
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion class-selected-2 -->

109
aio/content/examples/toh-pt2/src/app/app.component.ts Normal file
View File

@ -0,0 +1,109 @@
// #docregion
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
// #docregion hero-array
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
// #enddocregion hero-array
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
`,
// #docregion styles
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
// #enddocregion styles
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
// #docregion selected-hero
selectedHero: Hero;
// #enddocregion selected-hero
// #docregion on-select
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #enddocregion on-select
}

18
aio/content/examples/toh-pt2/src/app/app.module.ts Normal file
View File

@ -0,0 +1,18 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

25
aio/content/examples/toh-pt2/src/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

6
aio/content/examples/toh-pt2/src/main.ts Normal file
View File

@ -0,0 +1,6 @@
// #docregion
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
// #enddocregion