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

docs(aio): update ToH for CLI (#19811)

Browse Source
This commit is contained in:
Jesús Rodríguez
2017-11-06 19:02:18 +01:00
committed by Victor Berchet
parent bf22f2df88
commit 049c89645b
182 changed files with 4076 additions and 5013 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
aio/content/examples/toh-pt4/src/app/app.component.1.ts
View File

@ -1,65 +0,0 @@
// #docplaster
// #docregion on-init
import { OnInit } from '@angular/core';
// #enddocregion on-init
import { Component } from '@angular/core';
import { Hero } from './hero';
// #docregion hero-service-import
import { HeroService } from './hero.service.2';
// #enddocregion hero-service-import
// Testable but never shown
@Component({
selector: 'my-app',
template: `
<div *ngFor="let hero of heroes" (click)="onSelect(hero)">
{{hero.name}}
</div>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #docregion providers
providers: [HeroService]
// #enddocregion providers
})
// #docregion on-init
export class AppComponent implements OnInit {
// #enddocregion on-init
title = 'Tour of Heroes';
// #docregion heroes-prop
heroes: Hero[];
// #enddocregion heroes-prop
selectedHero: Hero;
/*
// #docregion new-service
heroService = new HeroService(); // don't do this
// #enddocregion new-service
*/
// #docregion ctor
constructor(private heroService: HeroService) { }
// #enddocregion ctor
// #docregion getHeroes
getHeroes(): void {
// #docregion get-heroes
this.heroes = this.heroService.getHeroes();
// #enddocregion get-heroes
}
// #enddocregion getHeroes
// #docregion ng-on-init
// #docregion on-init
ngOnInit(): void {
// #enddocregion on-init
this.getHeroes();
// #docregion on-init
}
// #enddocregion on-init
// #enddocregion ng-on-init
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #docregion on-init
}

0
aio/content/examples/toh-pt4/src/app/app.component.css Normal file
View File

3
aio/content/examples/toh-pt4/src/app/app.component.html Normal file
View File

@ -0,0 +1,3 @@
<h1>{{title}}</h1>
<app-heroes></app-heroes>
<app-messages></app-messages>

97
aio/content/examples/toh-pt4/src/app/app.component.ts
View File

@ -1,97 +1,10 @@
// #docplaster
// #docregion
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
// #docregion hero-service-import
import { HeroService } from './hero.service';
// #enddocregion hero-service-import
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
// #docregion template
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>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #enddocregion template
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;
}
`],
providers: [HeroService]
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
export class AppComponent {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService) { }
// #docregion get-heroes
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
// #enddocregion get-heroes
ngOnInit(): void {
this.getHeroes();
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}

25
aio/content/examples/toh-pt4/src/app/app.module.ts
View File

@ -1,19 +1,28 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroService } from './hero.service';
import { MessageService } from './message.service';
import { MessagesComponent } from './messages/messages.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent
],
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroDetailComponent
],
// #docregion providers
providers: [ HeroService, MessageService ],
// #enddocregion providers
bootstrap: [ AppComponent ]
})
export class AppModule { }

22
aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
View File

@ -1,22 +0,0 @@
// #docregion
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
export class HeroDetailComponent {
@Input() hero: Hero;
}

0
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css Normal file
View File

9
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html Normal file
View File

@ -0,0 +1,9 @@
<div *ngIf="hero">
<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
</div>

20
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts Normal file
View File

@ -0,0 +1,20 @@
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
// #docregion hero
@Input() hero: Hero;
// #enddocregion hero
constructor() { }
ngOnInit() {
}
}

24
aio/content/examples/toh-pt4/src/app/hero.service.1.ts
View File

@ -1,24 +1,24 @@
/* Newly generated and synchronous versions */
// #docplaster
// #docregion
// #docregion empty-class, full
// #docregion, new
import { Injectable } from '@angular/core';
// #enddocregion empty-class
// #enddocregion new
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
// #docregion empty-class, getHeroes-stub
// #docregion new
@Injectable()
export class HeroService {
// #enddocregion empty-class, getHeroes-stub, full
/*
// #docregion getHeroes-stub
getHeroes(): void {} // stub
// #enddocregion getHeroes-stub
*/
// #docregion full
constructor() { }
// #enddocregion new
// #docregion getHeroes
getHeroes(): Hero[] {
return HEROES;
}
// #docregion empty-class, getHeroes-stub
// #enddocregion getHeroes
// #docregion new
}
// #enddocregion, new

13
aio/content/examples/toh-pt4/src/app/hero.service.2.ts
View File

@ -1,13 +0,0 @@
// #docregion
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes(): Hero[] {
return HEROES;
}
}

40
aio/content/examples/toh-pt4/src/app/hero.service.ts
View File

@ -1,29 +1,35 @@
// #docplaster
// #docregion
// #docregion just-get-heroes
import { Injectable } from '@angular/core';
// #docregion import-observable
import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';
// #enddocregion import-observable
// #docregion import-heroes
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
// #enddocregion import-heroes
// #docregion import-message-service
import { MessageService } from './message.service';
// #enddocregion import-message-service
@Injectable()
export class HeroService {
// #docregion get-heroes
getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES);
}
// #enddocregion get-heroes, just-get-heroes
// #enddocregion
// See the "Take it slow" appendix
// #docregion get-heroes-slowly
getHeroesSlowly(): Promise<Hero[]> {
return new Promise(resolve => {
// Simulate server latency with 2 second delay
setTimeout(() => resolve(this.getHeroes()), 2000);
});
// #docregion ctor
constructor(private messageService: MessageService) { }
// #enddocregion ctor
// #docregion getHeroes, getHeroes-1
getHeroes(): Observable<Hero[]> {
// #enddocregion getHeroes-1
// Todo: send the message _after_ fetching the heroes
this.messageService.add('HeroService: fetched heroes');
// #docregion getHeroes-1
return of(HEROES);
}
// #enddocregion get-heroes-slowly
// #docregion
// #docregion just-get-heroes
// #enddocregion getHeroes, getHeroes-1
}
// #enddocregion

19
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts Normal file
View File

@ -0,0 +1,19 @@
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { Observable } from 'rxjs/Observable';
class DummyHeroesComponent {
heroes: Observable<Hero[]>;
constructor(private heroService: HeroService) {}
// #docregion getHeroes
getHeroes(): void {
// #docregion get-heroes
this.heroes = this.heroService.getHeroes();
// #enddocregion get-heroes
}
// #enddocregion getHeroes
}

50
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css Normal file
View File

@ -0,0 +1,50 @@
/* HeroesComponent's private CSS 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;
min-width: 16px;
text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}

14
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html Normal file
View File

@ -0,0 +1,14 @@
<h2>My Heroes</h2>
<!-- #docregion list -->
<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>
<!-- #enddocregion list -->
<!-- #docregion hero-detail-binding -->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<!-- #enddocregion hero-detail-binding -->

25
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeroesComponent } from './heroes.component';
describe('HeroesComponent', () => {
let component: HeroesComponent;
let fixture: ComponentFixture<HeroesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeroesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeroesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});

43
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,43 @@
// #docplaster
// #docregion
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
// #docregion hero-service-import
import { HeroService } from '../hero.service';
// #enddocregion hero-service-import
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
selectedHero: Hero;
// #docregion heroes
heroes: Hero[];
// #enddocregion heroes
// #docregion ctor
constructor(private heroService: HeroService) { }
// #enddocregion ctor
// #docregion ng-on-init
ngOnInit() {
this.getHeroes();
}
// #enddocregion ng-on-init
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #docregion getHeroes
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
// #enddocregion getHeroes
}

15
aio/content/examples/toh-pt4/src/app/message.service.spec.ts Normal file
View File

@ -0,0 +1,15 @@
import { TestBed, inject } from '@angular/core/testing';
import { MessageService } from './message.service';
describe('MessageService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [MessageService]
});
});
it('should be created', inject([MessageService], (service: MessageService) => {
expect(service).toBeTruthy();
}));
});

14
aio/content/examples/toh-pt4/src/app/message.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
@Injectable()
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages.length = 0;
}
}

35
aio/content/examples/toh-pt4/src/app/messages/messages.component.css Normal file
View File

@ -0,0 +1,35 @@
/* MessagesComponent's private CSS styles */
h2 {
color: red;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: crimson;
font-family: Cambria, Georgia;
}
button.clear {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
button.clear {
color: #888;
margin-bottom: 12px;
}

8
aio/content/examples/toh-pt4/src/app/messages/messages.component.html Normal file
View File

@ -0,0 +1,8 @@
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
<div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>

25
aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MessagesComponent } from './messages.component';
describe('MessagesComponent', () => {
let component: MessagesComponent;
let fixture: ComponentFixture<MessagesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MessagesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MessagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});

21
aio/content/examples/toh-pt4/src/app/messages/messages.component.ts Normal file
View File

@ -0,0 +1,21 @@
// #docregion
import { Component, OnInit } from '@angular/core';
// #docregion import-message-service
import { MessageService } from '../message.service';
// #enddocregion import-message-service
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
// #docregion ctor
constructor(public messageService: MessageService) {}
// #enddocregion ctor
ngOnInit() {
}
}

21
aio/content/examples/toh-pt4/src/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/">
<body>
<my-app>Loading...</my-app>
</body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

11
aio/content/examples/toh-pt4/src/main.1.ts
View File

@ -1,11 +0,0 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);