docs: update all docs to partially comply the style-guide
This commit is contained in:
Foxandxss
Ward Bell
parent
2ccdd867d2
commit
596825a8b1
@ -1,4 +1,5 @@
|
||||
import { Injectable, Type } from '@angular/core';
|
||||
|
||||
import { Logger } from './logger.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
@ -10,7 +11,7 @@ const HEROES = [
|
||||
|
||||
@Injectable()
|
||||
export class BackendService {
|
||||
constructor(private _logger: Logger) {}
|
||||
constructor(private logger: Logger) {}
|
||||
|
||||
getAll(type:Type) : PromiseLike<any[]>{
|
||||
if (type === Hero) {
|
||||
@ -18,7 +19,7 @@ export class BackendService {
|
||||
return Promise.resolve<Hero[]>(HEROES);
|
||||
}
|
||||
let err = new Error('Cannot get object of this type');
|
||||
this._logger.error(err);
|
||||
this.logger.error(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, Input} from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docplaster
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroService } from './hero.service';
|
||||
@ -24,14 +25,14 @@ export class HeroesComponent { ... }
|
||||
// #docregion class
|
||||
export class HeroListComponent implements OnInit {
|
||||
// #docregion ctor
|
||||
constructor(private _service: HeroService) { }
|
||||
constructor(private service: HeroService) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
heroes: Hero[];
|
||||
selectedHero: Hero;
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this._service.getHeroes();
|
||||
this.heroes = this.service.getHeroes();
|
||||
}
|
||||
|
||||
selectHero(hero: Hero) { this.selectedHero = hero; }
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { BackendService } from './backend.service';
|
||||
import { Logger } from './logger.service';
|
||||
@ -8,18 +9,18 @@ import {Logger} from './logger.service';
|
||||
export class HeroService {
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private _backend: BackendService,
|
||||
private _logger: Logger) { }
|
||||
private backend: BackendService,
|
||||
private logger: Logger) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
private _heroes: Hero[] = [];
|
||||
private heroes: Hero[] = [];
|
||||
|
||||
getHeroes() {
|
||||
this._backend.getAll(Hero).then( (heroes: Hero[]) => {
|
||||
this._logger.log(`Fetched ${heroes.length} heroes.`);
|
||||
this._heroes.push(...heroes); // fill cache
|
||||
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
|
||||
this.logger.log(`Fetched ${heroes.length} heroes.`);
|
||||
this.heroes.push(...heroes); // fill cache
|
||||
});
|
||||
return this._heroes;
|
||||
return this.heroes;
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { SalesTaxService } from './sales-tax.service';
|
||||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
@ -31,11 +32,11 @@ export class SalesTaxComponent { ... }
|
||||
// #docregion class
|
||||
export class SalesTaxComponent {
|
||||
// #docregion ctor
|
||||
constructor(private _salesTaxService: SalesTaxService) { }
|
||||
constructor(private salesTaxService: SalesTaxService) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
getTax(value:string | number){
|
||||
return this._salesTaxService.getVAT(value);
|
||||
return this.salesTaxService.getVAT(value);
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
// #docregion
|
||||
import {Injectable, Inject} from '@angular/core';
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
|
||||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
export class SalesTaxService {
|
||||
constructor(private _rateService: TaxRateService) { }
|
||||
constructor(private rateService: TaxRateService) { }
|
||||
getVAT(value:string | number){
|
||||
let amount:number;
|
||||
if (typeof value === "string"){
|
||||
@ -13,7 +14,7 @@ export class SalesTaxService {
|
||||
} else {
|
||||
amount = value;
|
||||
}
|
||||
return (amount || 0) * this._rateService.getRate('VAT');
|
||||
return (amount || 0) * this.rateService.getRate('VAT');
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -14,16 +14,16 @@ import {Directive, ElementRef, Input} from '@angular/core';
|
||||
export class HighlightDirective {
|
||||
|
||||
// #docregion ctor
|
||||
private _el:HTMLElement;
|
||||
constructor(el: ElementRef) { this._el = el.nativeElement; }
|
||||
private el:HTMLElement;
|
||||
constructor(el: ElementRef) { this.el = el.nativeElement; }
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion mouse-methods
|
||||
onMouseEnter() { this._highlight("yellow"); }
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
onMouseEnter() { this.highlight("yellow"); }
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
private _highlight(color: string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color: string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ import {Directive, ElementRef, Input} from '@angular/core';
|
||||
export class HighlightDirective {
|
||||
|
||||
private _defaultColor = 'red';
|
||||
private _el:HTMLElement;
|
||||
private el:HTMLElement;
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
/*
|
||||
@ -37,15 +37,15 @@ export class HighlightDirective {
|
||||
|
||||
// #enddocregion class-1
|
||||
// #docregion class-1
|
||||
constructor(el: ElementRef) { this._el = el.nativeElement; }
|
||||
constructor(el: ElementRef) { this.el = el.nativeElement; }
|
||||
|
||||
// #docregion mouse-enter
|
||||
onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
|
||||
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
private _highlight(color:string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color:string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
// #enddocregion class-1
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { IMovie } from './movie';
|
||||
|
||||
@Injectable()
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroParentComponent } from './hero-parent.component';
|
||||
import { NameParentComponent } from './name-parent.component';
|
||||
import { VersionParentComponent } from './version-parent.component';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component, Input, OnDestroy } from '@angular/core';
|
||||
|
||||
import { MissionService } from './mission.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ export class CountdownLocalVarParentComponent { }
|
||||
export class CountdownViewChildParentComponent implements AfterViewInit {
|
||||
|
||||
@ViewChild(CountdownTimerComponent)
|
||||
private _timerComponent:CountdownTimerComponent;
|
||||
private timerComponent:CountdownTimerComponent;
|
||||
|
||||
seconds() { return 0; }
|
||||
|
||||
@ -50,10 +50,10 @@ export class CountdownViewChildParentComponent implements AfterViewInit {
|
||||
// Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
|
||||
// but wait a tick first to avoid one-time devMode
|
||||
// unidirectional-data-flow-violation error
|
||||
setTimeout(() => this.seconds = () => this._timerComponent.seconds, 0)
|
||||
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0)
|
||||
}
|
||||
|
||||
start(){ this._timerComponent.start(); }
|
||||
stop() { this._timerComponent.stop(); }
|
||||
start(){ this.timerComponent.start(); }
|
||||
stop() { this.timerComponent.stop(); }
|
||||
}
|
||||
// #enddocregion vc
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// #docregion
|
||||
import {Component, OnInit, OnDestroy} from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector:'countdown-timer',
|
||||
@ -16,13 +16,13 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
|
||||
ngOnInit() { this.start(); }
|
||||
ngOnDestroy() { this.clearTimer(); }
|
||||
|
||||
start() { this._countDown(); }
|
||||
start() { this.countDown(); }
|
||||
stop() {
|
||||
this.clearTimer();
|
||||
this.message = `Holding at T-${this.seconds} seconds`;
|
||||
}
|
||||
|
||||
private _countDown() {
|
||||
private countDown() {
|
||||
this.clearTimer();
|
||||
this.intervalId = setInterval(()=>{
|
||||
this.seconds -= 1;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroChildComponent } from './hero-child.component';
|
||||
import { HEROES } from './hero';
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
@ -6,20 +6,20 @@ import {Subject} from 'rxjs/Subject';
|
||||
export class MissionService {
|
||||
|
||||
// Observable string sources
|
||||
private _missionAnnouncedSource = new Subject<string>();
|
||||
private _missionConfirmedSource = new Subject<string>();
|
||||
private missionAnnouncedSource = new Subject<string>();
|
||||
private missionConfirmedSource = new Subject<string>();
|
||||
|
||||
// Observable string streams
|
||||
missionAnnounced$ = this._missionAnnouncedSource.asObservable();
|
||||
missionConfirmed$ = this._missionConfirmedSource.asObservable();
|
||||
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
|
||||
missionConfirmed$ = this.missionConfirmedSource.asObservable();
|
||||
|
||||
// Service message commands
|
||||
announceMission(mission: string) {
|
||||
this._missionAnnouncedSource.next(mission)
|
||||
this.missionAnnouncedSource.next(mission)
|
||||
}
|
||||
|
||||
confirmMission(astronaut: string) {
|
||||
this._missionConfirmedSource.next(astronaut);
|
||||
this.missionConfirmedSource.next(astronaut);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { AstronautComponent } from './astronaut.component';
|
||||
import { MissionService } from './mission.service';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { NameChildComponent } from './name-child.component';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VersionChildComponent } from './version-child.component';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VoterComponent } from './voter.component';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
// #docregion minimal-logger
|
||||
|
||||
@ -20,10 +20,10 @@ export class HeroBioComponent implements OnInit {
|
||||
|
||||
@Input() heroId:number;
|
||||
|
||||
constructor(private _heroCache:HeroCacheService) { }
|
||||
constructor(private heroCache:HeroCacheService) { }
|
||||
|
||||
ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
|
||||
ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); }
|
||||
|
||||
get hero() { return this._heroCache.hero; }
|
||||
get hero() { return this.heroCache.hero; }
|
||||
}
|
||||
// #enddocregion component
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@ -7,11 +8,11 @@ import {HeroService} from './hero.service';
|
||||
@Injectable()
|
||||
export class HeroCacheService {
|
||||
hero:Hero;
|
||||
constructor(private _heroService:HeroService){}
|
||||
constructor(private heroService:HeroService){}
|
||||
|
||||
fetchCachedHero(id:number){
|
||||
if (!this.hero) {
|
||||
this.hero = this._heroService.getHeroById(id);
|
||||
this.hero = this.heroService.getHeroById(id);
|
||||
}
|
||||
return this.hero
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
|
||||
|
||||
import { HeroCacheService } from './hero-cache.service';
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
@ -18,22 +19,22 @@ export class HeroContactComponent {
|
||||
constructor(
|
||||
// #docregion ctor-params
|
||||
@Host() // limit to the host component's instance of the HeroCacheService
|
||||
private _heroCache: HeroCacheService,
|
||||
private heroCache: HeroCacheService,
|
||||
|
||||
@Host() // limit search for logger; hides the application-wide logger
|
||||
@Optional() // ok if the logger doesn't exist
|
||||
private _loggerService: LoggerService
|
||||
private loggerService: LoggerService
|
||||
// #enddocregion ctor-params
|
||||
) {
|
||||
if (_loggerService) {
|
||||
if (loggerService) {
|
||||
this.hasLogger = true;
|
||||
_loggerService.logInfo('HeroContactComponent can log!');
|
||||
loggerService.logInfo('HeroContactComponent can log!');
|
||||
}
|
||||
// #docregion ctor
|
||||
}
|
||||
// #enddocregion ctor
|
||||
|
||||
get phoneNumber() { return this._heroCache.hero.phone; }
|
||||
get phoneNumber() { return this.heroCache.hero.phone; }
|
||||
|
||||
}
|
||||
// #enddocregion component
|
||||
|
||||
@ -6,17 +6,17 @@ import {Hero} from './hero';
|
||||
export class HeroService {
|
||||
|
||||
//TODO move to database
|
||||
private _heroes:Array<Hero> = [
|
||||
private heroes:Array<Hero> = [
|
||||
new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'),
|
||||
new Hero(2, 'Magma','Hero of all trades', '555-555-5555'),
|
||||
new Hero(3, 'Mr. Nice','The name says it all','111-222-3333')
|
||||
];
|
||||
|
||||
getHeroById(id:number):Hero{
|
||||
return this._heroes.filter(hero => hero.id === id)[0];
|
||||
return this.heroes.filter(hero => hero.id === id)[0];
|
||||
}
|
||||
|
||||
getAllHeroes():Array<Hero>{
|
||||
return this._heroes;
|
||||
return this.heroes;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,16 +13,16 @@ export class HighlightDirective {
|
||||
|
||||
@Input('myHighlight') highlightColor: string;
|
||||
|
||||
private _el: HTMLElement;
|
||||
private el: HTMLElement;
|
||||
|
||||
constructor(el: ElementRef) {
|
||||
this._el = el.nativeElement;
|
||||
this.el = el.nativeElement;
|
||||
}
|
||||
|
||||
onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); }
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
private _highlight(color: string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color: string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { provide } from '@angular/core';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import { LocationStrategy,
|
||||
HashLocationStrategy } from '@angular/common';
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@ -12,18 +13,18 @@ import {HeroService} from './hero.service';
|
||||
providers: [HeroService]
|
||||
})
|
||||
export class HeroesBaseComponent implements OnInit {
|
||||
constructor(private _heroService: HeroService) { }
|
||||
constructor(private heroService: HeroService) { }
|
||||
// #enddocregion injection
|
||||
|
||||
heroes: Array<Hero>;
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this._heroService.getAllHeroes();
|
||||
this._afterGetHeroes();
|
||||
this.heroes = this.heroService.getAllHeroes();
|
||||
this.afterGetHeroes();
|
||||
}
|
||||
|
||||
// Post-process heroes in derived class override.
|
||||
protected _afterGetHeroes() {}
|
||||
protected afterGetHeroes() {}
|
||||
|
||||
// #docregion injection
|
||||
}
|
||||
@ -41,7 +42,7 @@ export class SortedHeroesComponent extends HeroesBaseComponent {
|
||||
super(heroService);
|
||||
}
|
||||
|
||||
protected _afterGetHeroes() {
|
||||
protected afterGetHeroes() {
|
||||
this.heroes = this.heroes.sort((h1, h2) => {
|
||||
return h1.name < h2.name ? -1 :
|
||||
(h1.name > h2.name ? 1 : 0);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
@ -13,7 +14,7 @@ export class UserContextService {
|
||||
loggedInSince:Date;
|
||||
|
||||
// #docregion ctor, injectables
|
||||
constructor(private _userService:UserService, private _loggerService:LoggerService){
|
||||
constructor(private userService:UserService, private loggerService:LoggerService){
|
||||
// #enddocregion ctor, injectables
|
||||
this.loggedInSince = new Date();
|
||||
// #docregion ctor, injectables
|
||||
@ -21,11 +22,11 @@ export class UserContextService {
|
||||
// #enddocregion ctor, injectables
|
||||
|
||||
loadUser(userId:number){
|
||||
let user = this._userService.getUserById(userId);
|
||||
let user = this.userService.getUserById(userId);
|
||||
this.name = user.name;
|
||||
this.role = user.role;
|
||||
|
||||
this._loggerService.logDebug('loaded User');
|
||||
this.loggerService.logDebug('loaded User');
|
||||
}
|
||||
// #docregion injectables, injectable
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core'
|
||||
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { QuestionService } from './question.service';
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docregion
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ControlGroup } from '@angular/common';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -18,10 +18,10 @@ export class DynamicForm {
|
||||
form: ControlGroup;
|
||||
payLoad = '';
|
||||
|
||||
constructor(private _qcs: QuestionControlService) { }
|
||||
constructor(private qcs: QuestionControlService) { }
|
||||
|
||||
ngOnInit(){
|
||||
this.form = this._qcs.toControlGroup(this.questions);
|
||||
this.form = this.qcs.toControlGroup(this.questions);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent, [])
|
||||
|
||||
@ -5,7 +5,7 @@ import {QuestionBase} from './question-base';
|
||||
|
||||
@Injectable()
|
||||
export class QuestionControlService {
|
||||
constructor(private _fb:FormBuilder){ }
|
||||
constructor(private fb:FormBuilder){ }
|
||||
|
||||
toControlGroup(questions:QuestionBase<any>[] ) {
|
||||
let group = {};
|
||||
@ -13,6 +13,6 @@ export class QuestionControlService {
|
||||
questions.forEach(question => {
|
||||
group[question.key] = question.required ? [question.value || '', Validators.required] : [];
|
||||
});
|
||||
return this._fb.group(group);
|
||||
return this.fb.group(group);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { TextboxQuestion } from './question-textbox';
|
||||
|
||||
@ -20,10 +20,10 @@ template:
|
||||
})
|
||||
// #docregion class
|
||||
export class AppComponent {
|
||||
public constructor(private _titleService: Title ) { }
|
||||
public constructor(private titleService: Title ) { }
|
||||
|
||||
public setTitle( newTitle: string) {
|
||||
this._titleService.setTitle( newTitle );
|
||||
this.titleService.setTitle( newTitle );
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// While Angular supplies a Title service for setting the HTML document title
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailsComponent } from './hero-details.component';
|
||||
import { HeroControlsComponent } from './hero-controls.component';
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { CarComponent } from './car/car.component';
|
||||
import { HeroesComponent } from './heroes/heroes.component.1';
|
||||
|
||||
|
||||
@ -47,15 +47,15 @@ export class AppComponent {
|
||||
//#docregion ctor
|
||||
constructor(
|
||||
@Inject(APP_CONFIG) config:Config,
|
||||
private _userService: UserService) {
|
||||
private userService: UserService) {
|
||||
|
||||
this.title = config.title;
|
||||
}
|
||||
// #enddocregion ctor
|
||||
|
||||
get isAuthorized() { return this.user.isAuthorized;}
|
||||
nextUser() { this._userService.getNewUser(); }
|
||||
get user() { return this._userService.user; }
|
||||
nextUser() { this.userService.getNewUser(); }
|
||||
get user() { return this.userService.user; }
|
||||
|
||||
get userInfo() {
|
||||
return `Current user, ${this.user.name}, is `+
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component, Injector } from '@angular/core';
|
||||
|
||||
import { Car, Engine, Tires } from './car';
|
||||
import { Car as CarNoDi } from './car-no-di';
|
||||
import { CarFactory } from './car-factory';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HEROES } from './mock-heroes';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HEROES } from './mock-heroes';
|
||||
import { Logger } from '../logger.service';
|
||||
@ -8,11 +9,11 @@ import {Logger} from '../logger.service';
|
||||
export class HeroService {
|
||||
|
||||
//#docregion ctor
|
||||
constructor(private _logger: Logger) { }
|
||||
constructor(private logger: Logger) { }
|
||||
//#enddocregion ctor
|
||||
|
||||
getHeroes() {
|
||||
this._logger.log('Getting heroes ...')
|
||||
this.logger.log('Getting heroes ...')
|
||||
return HEROES;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { provide } from '@angular/core';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
import { Logger } from '../logger.service';
|
||||
import { UserService } from '../user.service';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HEROES } from './mock-heroes';
|
||||
import { Logger } from '../logger.service';
|
||||
@ -10,13 +11,13 @@ export class HeroService {
|
||||
|
||||
// #docregion internals
|
||||
constructor(
|
||||
private _logger: Logger,
|
||||
private _isAuthorized: boolean) { }
|
||||
private logger: Logger,
|
||||
private isAuthorized: boolean) { }
|
||||
|
||||
getHeroes() {
|
||||
let auth = this._isAuthorized ? 'authorized ': 'unauthorized';
|
||||
this._logger.log(`Getting heroes for ${auth} user.`);
|
||||
return HEROES.filter(hero => this._isAuthorized || !hero.isSecret);
|
||||
let auth = this.isAuthorized ? 'authorized ': 'unauthorized';
|
||||
this.logger.log(`Getting heroes for ${auth} user.`);
|
||||
return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
|
||||
}
|
||||
// #enddocregion internals
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// #docregion
|
||||
// #docregion v1
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
// #enddocregion v1
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { heroServiceProvider} from './hero.service.provider';
|
||||
|
||||
|
||||
@ -16,21 +16,22 @@ import {Logger} from './logger.service';
|
||||
<div id="hero">{{hero.name}}</div>
|
||||
<div id="rodent">{{rodent}}</div>
|
||||
`,
|
||||
|
||||
providers: [Car, Engine, Tires,
|
||||
heroServiceProvider, Logger]
|
||||
})
|
||||
export class InjectorComponent {
|
||||
constructor(private _injector: Injector) { }
|
||||
constructor(private injector: Injector) { }
|
||||
|
||||
car:Car = this._injector.get(Car);
|
||||
car:Car = this.injector.get(Car);
|
||||
|
||||
//#docregion get-hero-service
|
||||
heroService:HeroService = this._injector.get(HeroService);
|
||||
heroService:HeroService = this.injector.get(HeroService);
|
||||
//#enddocregion get-hero-service
|
||||
hero = this.heroService.getHeroes()[0];
|
||||
|
||||
get rodent() {
|
||||
let rous = this._injector.get(ROUS, null);
|
||||
let rous = this.injector.get(ROUS, null);
|
||||
if (rous) {
|
||||
throw new Error('Aaaargh!')
|
||||
}
|
||||
|
||||
@ -89,10 +89,10 @@ export class ProviderComponent4 {
|
||||
class EvenBetterLogger {
|
||||
logs:string[] = [];
|
||||
|
||||
constructor(private _userService: UserService) { }
|
||||
constructor(private userService: UserService) { }
|
||||
|
||||
log(message:string){
|
||||
message = `Message to ${this._userService.user.name}: ${message}.`;
|
||||
message = `Message to ${this.userService.user.name}: ${message}.`;
|
||||
console.log(message);
|
||||
this.logs.push(message);
|
||||
}
|
||||
@ -230,17 +230,17 @@ export class ProviderComponent9a {
|
||||
/*
|
||||
// #docregion provider-9a-ctor-interface
|
||||
// FAIL! Can't inject using the interface as the parameter type
|
||||
constructor(private _config: Config){ }
|
||||
constructor(private config: Config){ }
|
||||
// #enddocregion provider-9a-ctor-interface
|
||||
*/
|
||||
|
||||
// #docregion provider-9a-ctor
|
||||
// @Inject(token) to inject the dependency
|
||||
constructor(@Inject('app.config') private _config: Config){ }
|
||||
constructor(@Inject('app.config') private config: Config){ }
|
||||
// #enddocregion provider-9a-ctor
|
||||
|
||||
ngOnInit() {
|
||||
this.log = '"app.config" Application title is ' + this._config.title;
|
||||
this.log = '"app.config" Application title is ' + this.config.title;
|
||||
}
|
||||
}
|
||||
|
||||
@ -254,11 +254,11 @@ export class ProviderComponent9a {
|
||||
export class ProviderComponent9b {
|
||||
log: string;
|
||||
// #docregion provider-9b-ctor
|
||||
constructor(@Inject(APP_CONFIG) private _config: Config){ }
|
||||
constructor(@Inject(APP_CONFIG) private config: Config){ }
|
||||
// #enddocregion provider-9b-ctor
|
||||
|
||||
ngOnInit() {
|
||||
this.log = 'APP_CONFIG Application title is ' + this._config.title;
|
||||
this.log = 'APP_CONFIG Application title is ' + this.config.title;
|
||||
}
|
||||
}
|
||||
//////////////////////////////////////////
|
||||
@ -290,27 +290,27 @@ import {Optional} from '@angular/core';
|
||||
export class ProviderComponent10b {
|
||||
// #docregion provider-10-ctor
|
||||
log:string;
|
||||
constructor(@Optional() private _logger:Logger) { }
|
||||
constructor(@Optional() private logger:Logger) { }
|
||||
// #enddocregion provider-10-ctor
|
||||
|
||||
ngOnInit() {
|
||||
// #docregion provider-10-logger
|
||||
// No logger? Make one!
|
||||
if (!this._logger) {
|
||||
this._logger = {
|
||||
log: (msg:string)=> this._logger.logs.push(msg),
|
||||
if (!this.logger) {
|
||||
this.logger = {
|
||||
log: (msg:string)=> this.logger.logs.push(msg),
|
||||
logs: []
|
||||
}
|
||||
// #enddocregion provider-10-logger
|
||||
this._logger.log("Optional logger was not available.")
|
||||
this.logger.log("Optional logger was not available.")
|
||||
// #docregion provider-10-logger
|
||||
}
|
||||
// #enddocregion provider-10-logger
|
||||
else {
|
||||
this._logger.log('Hello from the injected logger.')
|
||||
this.log = this._logger.logs[0];
|
||||
this.logger.log('Hello from the injected logger.')
|
||||
this.log = this.logger.logs[0];
|
||||
}
|
||||
this.log = this._logger.logs[0];
|
||||
this.log = this.logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// Reader should look to the testing chapter for the real thing
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroService } from './heroes/hero.service';
|
||||
import { HeroListComponent } from './heroes/hero-list.component';
|
||||
|
||||
|
||||
@ -17,7 +17,8 @@ import {Hero} from './hero';
|
||||
</li>
|
||||
</ul>
|
||||
// #docregion message
|
||||
<p *ngIf="heroes.length > 3">There are many heroes!</p>
|
||||
<p *ngIf="heroes.length
|
||||
> 3">There are many heroes!</p>
|
||||
// #enddocregion message
|
||||
`
|
||||
})
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppCtorComponent } from './app-ctor.component';
|
||||
import { AppComponent as v1 } from './app.component.1';
|
||||
import { AppComponent as v2 } from './app.component.2';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
// #docregion first, final
|
||||
import { Component } from '@angular/core';
|
||||
import { NgForm } from '@angular/common';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
import { RestoreService } from './restore.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { EditItem } from './edit-item';
|
||||
import { HeroesService } from './heroes.service';
|
||||
import { HeroCardComponent } from './hero-card.component';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { HeroesListComponent } from './heroes-list.component';
|
||||
import { HeroesService } from './heroes.service';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { HelloWorld } from './hello_world';
|
||||
|
||||
bootstrap(HelloWorld);
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { UiTabs, UiPane } from './ui_tabs';
|
||||
|
||||
class Detail {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { DiDemo } from './di_demo';
|
||||
|
||||
bootstrap(DiDemo);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { TodoApp } from './todo_app';
|
||||
|
||||
bootstrap(TodoApp);
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Todo } from './todo';
|
||||
import { TodoList } from './todo_list';
|
||||
import { TodoForm } from './todo_form';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, AfterContentChecked, AfterContentInit, ContentChild} from '@angular/core';
|
||||
import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
|
||||
|
||||
import {LoggerService} from './logger.service';
|
||||
|
||||
@ -30,32 +30,32 @@ export class ChildComponent {
|
||||
})
|
||||
// #docregion hooks
|
||||
export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
|
||||
private _prevHero = '';
|
||||
private prevHero = '';
|
||||
comment = '';
|
||||
|
||||
// Query for a CONTENT child of type `ChildComponent`
|
||||
@ContentChild(ChildComponent) contentChild: ChildComponent;
|
||||
|
||||
// #enddocregion hooks
|
||||
constructor(private _logger: LoggerService) {
|
||||
this._logIt('AfterContent constructor');
|
||||
constructor(private logger: LoggerService) {
|
||||
this.logIt('AfterContent constructor');
|
||||
}
|
||||
|
||||
// #docregion hooks
|
||||
ngAfterContentInit() {
|
||||
// viewChild is set after the view has been initialized
|
||||
this._logIt('AfterContentInit');
|
||||
this._doSomething();
|
||||
this.logIt('AfterContentInit');
|
||||
this.doSomething();
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
// viewChild is updated after the view has been checked
|
||||
if (this._prevHero === this.contentChild.hero) {
|
||||
this._logIt('AfterContentChecked (no change)');
|
||||
if (this.prevHero === this.contentChild.hero) {
|
||||
this.logIt('AfterContentChecked (no change)');
|
||||
} else {
|
||||
this._prevHero = this.contentChild.hero;
|
||||
this._logIt('AfterContentChecked');
|
||||
this._doSomething();
|
||||
this.prevHero = this.contentChild.hero;
|
||||
this.logIt('AfterContentChecked');
|
||||
this.doSomething();
|
||||
}
|
||||
}
|
||||
// #enddocregion hooks
|
||||
@ -64,14 +64,14 @@ export class AfterContentComponent implements AfterContentChecked, AfterContent
|
||||
// #docregion do-something
|
||||
|
||||
// This surrogate for real business logic sets the `comment`
|
||||
private _doSomething() {
|
||||
private doSomething() {
|
||||
this.comment = this.contentChild.hero.length > 10 ? 'That\'s a long name' : '';
|
||||
}
|
||||
|
||||
private _logIt(method: string) {
|
||||
private logIt(method: string) {
|
||||
let vc = this.contentChild;
|
||||
let message = `${method}: ${vc ? vc.hero : 'no'} child view`;
|
||||
this._logger.log(message);
|
||||
this.logger.log(message);
|
||||
}
|
||||
// #docregion hooks
|
||||
// ...
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, AfterViewChecked, AfterViewInit, ViewChild} from '@angular/core';
|
||||
import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
|
||||
|
||||
import {LoggerService} from './logger.service';
|
||||
|
||||
@ -34,31 +34,31 @@ export class ChildViewComponent {
|
||||
})
|
||||
// #docregion hooks
|
||||
export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
||||
private _prevHero = '';
|
||||
private prevHero = '';
|
||||
|
||||
// Query for a VIEW child of type `ChildViewComponent`
|
||||
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
|
||||
|
||||
// #enddocregion hooks
|
||||
constructor(private _logger:LoggerService){
|
||||
this._logIt('AfterView constructor');
|
||||
constructor(private logger:LoggerService){
|
||||
this.logIt('AfterView constructor');
|
||||
}
|
||||
|
||||
// #docregion hooks
|
||||
ngAfterViewInit() {
|
||||
// viewChild is set after the view has been initialized
|
||||
this._logIt('AfterViewInit');
|
||||
this._doSomething();
|
||||
this.logIt('AfterViewInit');
|
||||
this.doSomething();
|
||||
}
|
||||
|
||||
ngAfterViewChecked() {
|
||||
// viewChild is updated after the view has been checked
|
||||
if (this._prevHero === this.viewChild.hero) {
|
||||
this._logIt('AfterViewChecked (no change)');
|
||||
if (this.prevHero === this.viewChild.hero) {
|
||||
this.logIt('AfterViewChecked (no change)');
|
||||
} else {
|
||||
this._prevHero = this.viewChild.hero;
|
||||
this._logIt('AfterViewChecked');
|
||||
this._doSomething();
|
||||
this.prevHero = this.viewChild.hero;
|
||||
this.logIt('AfterViewChecked');
|
||||
this.doSomething();
|
||||
}
|
||||
}
|
||||
// #enddocregion hooks
|
||||
@ -67,7 +67,7 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
||||
|
||||
// #docregion do-something
|
||||
// This surrogate for real business logic sets the `comment`
|
||||
private _doSomething() {
|
||||
private doSomething() {
|
||||
let c = this.viewChild.hero.length > 10 ? "That's a long name" : '';
|
||||
if (c !== this.comment) {
|
||||
// Wait a tick because the component's view has already been checked
|
||||
@ -76,10 +76,10 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
||||
}
|
||||
// #enddocregion do-something
|
||||
|
||||
private _logIt(method:string){
|
||||
private logIt(method:string){
|
||||
let vc = this.viewChild;
|
||||
let message = `${method}: ${vc ? vc.hero:'no'} child view`
|
||||
this._logger.log(message);
|
||||
this.logger.log(message);
|
||||
}
|
||||
// #docregion hooks
|
||||
// ...
|
||||
|
||||
@ -66,23 +66,23 @@ export class CounterParentComponent {
|
||||
value: number;
|
||||
spyLog: string[] = [];
|
||||
|
||||
private _logger: LoggerService;
|
||||
private logger: LoggerService;
|
||||
|
||||
constructor(logger: LoggerService) {
|
||||
this._logger = logger;
|
||||
this.logger = logger;
|
||||
this.spyLog = logger.logs;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
updateCounter() {
|
||||
this.value += 1;
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._logger.log('-- reset --');
|
||||
this.logger.log('-- reset --');
|
||||
this.value = 0;
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* tslint:disable:forin */
|
||||
// #docregion
|
||||
import {Component, DoCheck, OnChanges, Input, SimpleChange, ViewChild} from '@angular/core';
|
||||
import { Component, DoCheck, Input, OnChanges, SimpleChange, ViewChild } from '@angular/core';
|
||||
|
||||
class Hero {
|
||||
constructor(public name: string) {}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent).catch(err => console.error(err));
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/* tslint:disable:forin */
|
||||
// #docregion
|
||||
import {
|
||||
Component, Input, ViewChild,
|
||||
OnChanges, SimpleChange
|
||||
Component, Input, Onchanges,
|
||||
SimpleChange, ViewChild
|
||||
} from '@angular/core';
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { PeekABooComponent } from './peek-a-boo.component';
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
@ -31,10 +32,10 @@ export class PeekABooParentComponent {
|
||||
hookLog: string[];
|
||||
|
||||
heroName = 'Windstorm';
|
||||
private _logger: LoggerService;
|
||||
private logger: LoggerService;
|
||||
|
||||
constructor(logger: LoggerService) {
|
||||
this._logger = logger;
|
||||
this.logger = logger;
|
||||
this.hookLog = logger.logs;
|
||||
}
|
||||
|
||||
@ -42,13 +43,13 @@ export class PeekABooParentComponent {
|
||||
this.hasChild = !this.hasChild;
|
||||
if (this.hasChild) {
|
||||
this.heroName = 'Windstorm';
|
||||
this._logger.clear(); // clear log on create
|
||||
this.logger.clear(); // clear log on create
|
||||
}
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
|
||||
updateHero() {
|
||||
this.heroName += '!';
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import {
|
||||
OnChanges, SimpleChange,
|
||||
OnInit,
|
||||
DoCheck,
|
||||
AfterContentInit,
|
||||
AfterContentChecked,
|
||||
AfterViewInit,
|
||||
AfterContentInit,
|
||||
AfterViewChecked,
|
||||
OnDestroy
|
||||
AfterViewInit,
|
||||
DoCheck,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SimpleChange
|
||||
} from '@angular/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {LoggerService} from './logger.service';
|
||||
@ -15,13 +16,13 @@ let nextId = 1;
|
||||
|
||||
// #docregion ngOnInit
|
||||
export class PeekABoo implements OnInit {
|
||||
constructor(private _logger: LoggerService) { }
|
||||
constructor(private logger: LoggerService) { }
|
||||
|
||||
// implement OnInit's `ngOnInit` method
|
||||
ngOnInit() { this._logIt(`OnInit`); }
|
||||
ngOnInit() { this.logIt(`OnInit`); }
|
||||
|
||||
protected _logIt(msg: string) {
|
||||
this._logger.log(`#${nextId++} ${msg}`);
|
||||
protected logIt(msg: string) {
|
||||
this.logger.log(`#${nextId++} ${msg}`);
|
||||
}
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
@ -40,13 +41,13 @@ export class PeekABooComponent extends PeekABoo implements
|
||||
OnDestroy {
|
||||
@Input() name: string;
|
||||
|
||||
private _verb = 'initialized';
|
||||
private verb = 'initialized';
|
||||
|
||||
constructor(logger: LoggerService) {
|
||||
super(logger);
|
||||
|
||||
let is = this.name ? 'is' : 'is not';
|
||||
this._logIt(`name ${is} known at construction`);
|
||||
this.logIt(`name ${is} known at construction`);
|
||||
}
|
||||
|
||||
// only called for/if there is an @input variable set by parent.
|
||||
@ -55,30 +56,30 @@ export class PeekABooComponent extends PeekABoo implements
|
||||
for (let propName in changes) {
|
||||
if (propName === 'name') {
|
||||
let name = changes['name'].currentValue;
|
||||
changesMsgs.push(`name ${this._verb} to "${name}"`);
|
||||
changesMsgs.push(`name ${this.verb} to "${name}"`);
|
||||
} else {
|
||||
changesMsgs.push(propName + ' ' + this._verb);
|
||||
changesMsgs.push(propName + ' ' + this.verb);
|
||||
}
|
||||
}
|
||||
this._logIt(`OnChanges: ${changesMsgs.join('; ')}`);
|
||||
this._verb = 'changed'; // next time it will be a change
|
||||
this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
|
||||
this.verb = 'changed'; // next time it will be a change
|
||||
}
|
||||
|
||||
// Beware! Called frequently!
|
||||
// Called in every change detection cycle anywhere on the page
|
||||
ngDoCheck() { this._logIt(`DoCheck`); }
|
||||
ngDoCheck() { this.logIt(`DoCheck`); }
|
||||
|
||||
ngAfterContentInit() { this._logIt(`AfterContentInit`); }
|
||||
ngAfterContentInit() { this.logIt(`AfterContentInit`); }
|
||||
|
||||
// Beware! Called frequently!
|
||||
// Called in every change detection cycle anywhere on the page
|
||||
ngAfterContentChecked() { this._logIt(`AfterContentChecked`); }
|
||||
ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
|
||||
|
||||
ngAfterViewInit() { this._logIt(`AfterViewInit`); }
|
||||
ngAfterViewInit() { this.logIt(`AfterViewInit`); }
|
||||
|
||||
// Beware! Called frequently!
|
||||
// Called in every change detection cycle anywhere on the page
|
||||
ngAfterViewChecked() { this._logIt(`AfterViewChecked`); }
|
||||
ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
|
||||
|
||||
ngOnDestroy() { this._logIt(`OnDestroy`); }
|
||||
ngOnDestroy() { this.logIt(`OnDestroy`); }
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
import { Spy } from './spy.directive';
|
||||
|
||||
@ -36,24 +37,24 @@ export class SpyParentComponent {
|
||||
heroes: string[] = ['Windstorm', 'Magneta'];
|
||||
spyLog: string[];
|
||||
|
||||
constructor(private _logger: LoggerService) {
|
||||
this.spyLog = _logger.logs;
|
||||
constructor(private logger: LoggerService) {
|
||||
this.spyLog = logger.logs;
|
||||
}
|
||||
|
||||
addHero() {
|
||||
if (this.newName.trim()) {
|
||||
this.heroes.push(this.newName.trim());
|
||||
this.newName = '';
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
}
|
||||
removeHero(hero: string) {
|
||||
this.heroes.splice(this.heroes.indexOf(hero), 1);
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
reset() {
|
||||
this._logger.log('-- reset --');
|
||||
this.logger.log('-- reset --');
|
||||
this.heroes.length = 0;
|
||||
this._logger.tick();
|
||||
this.logger.tick();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import {Directive, OnInit, OnDestroy} from '@angular/core';
|
||||
|
||||
import {LoggerService} from './logger.service';
|
||||
|
||||
let nextId = 1;
|
||||
@ -10,14 +11,14 @@ let nextId = 1;
|
||||
@Directive({selector: '[mySpy]'})
|
||||
export class Spy implements OnInit, OnDestroy {
|
||||
|
||||
constructor(private _logger: LoggerService) { }
|
||||
constructor(private logger: LoggerService) { }
|
||||
|
||||
ngOnInit() { this._logIt(`onInit`); }
|
||||
ngOnInit() { this.logIt(`onInit`); }
|
||||
|
||||
ngOnDestroy() { this._logIt(`onDestroy`); }
|
||||
ngOnDestroy() { this.logIt(`onDestroy`); }
|
||||
|
||||
private _logIt(msg: string) {
|
||||
this._logger.log(`Spy #${nextId++} ${msg}`);
|
||||
private logIt(msg: string) {
|
||||
this.logger.log(`Spy #${nextId++} ${msg}`);
|
||||
}
|
||||
}
|
||||
// #enddocregion spy-directive
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { FlyingHeroesPipe,
|
||||
FlyingHeroesImpurePipe } from './flying-heroes.pipe';
|
||||
import { HEROES } from './heroes';
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// #docregion
|
||||
// #docregion pure
|
||||
import {Flyer} from './heroes';
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
import { Flyer } from './heroes';
|
||||
|
||||
@Pipe({ name: 'flyingHeroes' })
|
||||
export class FlyingHeroesPipe implements PipeTransform {
|
||||
transform(allHeroes:Flyer[]) {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { FetchJsonPipe } from './fetch-json.pipe';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
// #docregion app-component
|
||||
import { AppComponent } from './app.component';
|
||||
// #enddocregion app-component
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { DialogService } from '../dialog.service';
|
||||
import {CanDeactivate, ComponentInstruction, Router} from '@angular/router-deprecated';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
@ -19,23 +20,23 @@ export class AddCrisisComponent implements CanDeactivate {
|
||||
editName: string;
|
||||
|
||||
constructor(
|
||||
private _service: CrisisService,
|
||||
private _router: Router,
|
||||
private _dialog: DialogService) { }
|
||||
private service: CrisisService,
|
||||
private router: Router,
|
||||
private dialog: DialogService) { }
|
||||
|
||||
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
|
||||
return !!this.editName.trim() ||
|
||||
this._dialog.confirm('Discard changes?');
|
||||
this.dialog.confirm('Discard changes?');
|
||||
}
|
||||
|
||||
cancel() { this.gotoCrises(); }
|
||||
|
||||
save() {
|
||||
this._service.addCrisis(this.editName);
|
||||
this.service.addCrisis(this.editName);
|
||||
this.gotoCrises();
|
||||
}
|
||||
|
||||
gotoCrises() {
|
||||
this._router.navigate(['CrisisCenter']);
|
||||
this.router.navigate(['CrisisCenter']);
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
|
||||
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
|
||||
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
// #enddocregion
|
||||
@ -11,15 +11,15 @@ import { CrisisListComponent } from './crisis-list.component';
|
||||
// Apparent Milestone 2 imports
|
||||
// #docregion
|
||||
// #docregion hero-import
|
||||
import { HeroListComponent } from './heroes/hero-list.component';
|
||||
import { HeroDetailComponent } from './heroes/hero-detail.component';
|
||||
import { HeroListComponent } from './heroes/hero-list.component';
|
||||
import { HeroService } from './heroes/hero.service';
|
||||
// #enddocregion hero-import
|
||||
// #enddocregion
|
||||
*/
|
||||
// Actual Milestone 2 imports
|
||||
import { HeroListComponent } from './heroes/hero-list.component.1';
|
||||
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
|
||||
import { HeroListComponent } from './heroes/hero-list.component.1';
|
||||
import { HeroService } from './heroes/hero.service';
|
||||
// #docregion
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/* tslint:disable:no-unused-variable */
|
||||
// #docplaster
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
|
||||
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1';
|
||||
import { HeroListComponent } from './heroes/hero-list.component.1';
|
||||
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
|
||||
import { HeroListComponent } from './heroes/hero-list.component.1';
|
||||
|
||||
import { DialogService } from './dialog.service';
|
||||
import { HeroService } from './heroes/hero.service';
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
|
||||
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component.1';
|
||||
import { CrisisDetailComponent } from './crisis-detail.component.1';
|
||||
import { CrisisListComponent } from './crisis-list.component.1';
|
||||
import { CrisisService } from './crisis.service';
|
||||
|
||||
// #docregion minus-imports
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
|
||||
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
import { CrisisDetailComponent } from './crisis-detail.component';
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
import { CrisisService } from './crisis.service';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { OnActivate, Router, RouteSegment } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { Router, OnActivate, RouteSegment } from '@angular/router';
|
||||
// #docregion routerCanDeactivate
|
||||
// import { CanDeactivate } from '@angular/router';
|
||||
import { DialogService } from '../dialog.service';
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { CanDeactivate, OnActivate, Router, RouteSegment } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { Router, OnActivate, CanDeactivate, RouteSegment } from '@angular/router';
|
||||
import { DialogService } from '../dialog.service';
|
||||
|
||||
@Component({
|
||||
@ -60,6 +61,7 @@ export class CrisisDetailComponent implements OnActivate, CanDeactivate {
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.editName = this.crisis.name;
|
||||
this.gotoCrises();
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { OnActivate, Router, RouteSegment } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { Router, OnActivate, RouteSegment } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
// #docregion template
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { Router, OnActivate, RouteSegment, RouteTree } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { OnActivate, Router, RouteSegment } from '@angular/router';
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
import { Router, OnActivate, RouteSegment } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { OnActivate, Router, RouteSegment } from '@angular/router';
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
import { Router, OnActivate, RouteSegment } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user