honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	public/docs/_examples/cb-component-communication/e2e-spec.ts
#	public/docs/_examples/cb-component-communication/ts/app/app.component.ts
#	public/docs/_examples/dependency-injection/ts/app/main.1.ts
#	public/docs/ts/latest/tutorial/toh-pt1.jade
#	public/docs/ts/latest/tutorial/toh-pt2.jade
#	public/docs/ts/latest/tutorial/toh-pt3.jade
#	public/docs/ts/latest/tutorial/toh-pt4.jade
#	public/docs/ts/latest/tutorial/toh-pt5.jade
This commit is contained in:
Zhicheng Wang 2016-06-08 09:58:16 +08:00
parent b0e86f664f f3205f5beb
commit f2dbdb3163
255 changed files with 794 additions and 767 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gulpfile.js
View File

@ -636,7 +636,15 @@ gulp.task('_zip-examples', function() {
// Linting
gulp.task('lint', function() {
return gulp.src(['./public/docs/_examples/style-guide/ts/**/*.ts', '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts'])
return gulp.src([
'./public/docs/_examples/**/*.ts',
'!./public/docs/_examples/**/ts-snippets/*.ts',
'!./public/docs/_examples/style-guide/ts/**/*.avoid.ts',
'!./public/docs/_examples/**/node_modules/**/*',
'!./public/docs/_examples/_protractor/**/*',
'!./public/docs/_examples/**/typings/**/*',
'!./public/docs/_examples/**/typings-ng1/**/*'
])
.pipe(tslint({
rulesDirectory: ['node_modules/codelyzer'],
configuration: require('./tslint.json')

2
package.json
View File

@ -31,7 +31,7 @@
"browser-sync": "^2.9.3",
"canonical-path": "0.0.2",
"cross-spawn": "^4.0.0",
"codelyzer": "0.0.20",
"codelyzer": "0.0.22",
"del": "^2.2.0",
"dgeni": "^0.4.0",
"dgeni-packages": "^0.13.0",

2
public/docs/_examples/architecture/ts/app/backend.service.ts
View File

@ -13,7 +13,7 @@ const HEROES = [
export class BackendService {
constructor(private logger: Logger) {}
getAll(type:Type) : PromiseLike<any[]>{
getAll(type: Type): PromiseLike<any[]> {
if (type === Hero) {
// TODO get from the database
return Promise.resolve<Hero[]>(HEROES);

2
public/docs/_examples/architecture/ts/app/hero-detail.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input} from '@angular/core';
import { Component, Input } from '@angular/core';
import { Hero } from './hero';

2
public/docs/_examples/architecture/ts/app/sales-tax.component.ts
View File

@ -35,7 +35,7 @@ export class SalesTaxComponent {
constructor(private salesTaxService: SalesTaxService) { }
// #enddocregion ctor
getTax(value:string | number){
getTax(value: string | number) {
return this.salesTaxService.getVAT(value);
}
}

8
public/docs/_examples/architecture/ts/app/sales-tax.service.ts
View File

@ -1,5 +1,5 @@
// #docregion
import { Inject, Injectable } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { TaxRateService } from './tax-rate.service';
@ -7,9 +7,9 @@ import { TaxRateService } from './tax-rate.service';
@Injectable()
export class SalesTaxService {
constructor(private rateService: TaxRateService) { }
getVAT(value:string | number){
let amount:number;
if (typeof value === "string"){
getVAT(value: string | number) {
let amount: number;
if (typeof value === 'string') {
amount = parseFloat(value);
} else {
amount = value;

2
public/docs/_examples/architecture/ts/app/tax-rate.service.ts
View File

@ -4,6 +4,6 @@ import { Injectable } from '@angular/core';
// #docregion class
@Injectable()
export class TaxRateService {
getRate(rateName:string){return 0.10;} // always 10% everywhere
getRate(rateName: string) {return 0.10; } // always 10% everywhere
}
// #enddocregion class

2
public/docs/_examples/attribute-directives/ts/app/app.component.ts
View File

@ -11,4 +11,4 @@ import { HighlightDirective } from './highlight.directive';
export class AppComponent { }
// #enddocregion
// #enddocregion

4
public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
View File

@ -14,12 +14,12 @@ import { Directive, ElementRef, Input } from '@angular/core';
export class HighlightDirective {
// #docregion ctor
private el:HTMLElement;
private el: HTMLElement;
constructor(el: ElementRef) { this.el = el.nativeElement; }
// #enddocregion ctor
// #docregion mouse-methods
onMouseEnter() { this.highlight("yellow"); }
onMouseEnter() { this.highlight('yellow'); }
onMouseLeave() { this.highlight(null); }
private highlight(color: string) {

6
public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
View File

@ -13,12 +13,12 @@ import { Directive, ElementRef, Input } from '@angular/core';
export class HighlightDirective {
private _defaultColor = 'red';
private el: HTMLElement;
constructor(el: ElementRef) { this.el = el.nativeElement; }
// #enddocregion class-1
// #docregion defaultColor
@Input() set defaultColor(colorName:string){
@Input() set defaultColor(colorName: string){
this._defaultColor = colorName || this._defaultColor;
}
// #enddocregion defaultColor
@ -33,7 +33,7 @@ export class HighlightDirective {
// #enddocregion mouse-enter
onMouseLeave() { this.highlight(null); }
private highlight(color:string) {
private highlight(color: string) {
this.el.style.backgroundColor = color;
}
}

6
public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
View File

@ -85,7 +85,7 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
posterButton.click().then(function () {
testImagesAreDisplayed(isDisplayed);
})
});
}
function getMovieRows() {
@ -107,7 +107,7 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
} else {
expect(favoriteHeroLabel.isDisplayed()).toBe(false);
}
})
})
});
});
}
});

2
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
View File

@ -11,7 +11,7 @@ import { StringSafeDatePipe } from './date.pipe';
// #docregion component
@Component({
selector: 'movie-list',
templateUrl:'app/movie-list.component.html',
templateUrl: 'app/movie-list.component.html',
// #enddocregion component
// #docregion style-url
styleUrls: ['app/movie-list.component.css'],

28
public/docs/_examples/cb-component-communication/e2e-spec.ts
View File

@ -19,8 +19,8 @@ describe('Component Communication Cookbook Tests', function () {
for (let i = 0; i < _heroNames.length; i++) {
let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
let childDetail = heroes.get(i).element(by.tagName('p')).getText();
expect(childTitle).toEqual(_heroNames[i] + ' says:')
expect(childDetail).toContain(_masterName)
expect(childTitle).toEqual(_heroNames[i] + ' says:');
expect(childDetail).toContain(_masterName);
}
});
// ...
@ -37,7 +37,7 @@ describe('Component Communication Cookbook Tests', function () {
let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_nonEmptyName)
expect(displayName).toEqual(_nonEmptyName);
});
it('should replace empty name with default name', function () {
@ -47,7 +47,7 @@ describe('Component Communication Cookbook Tests', function () {
let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
let displayName = hero.element(by.tagName('h3')).getText();
expect(displayName).toEqual(_defaultName)
expect(displayName).toEqual(_defaultName);
});
// ...
// #enddocregion parent-to-child-setter
@ -82,7 +82,7 @@ describe('Component Communication Cookbook Tests', function () {
expect(actual.label).toBe(labelAfter2Minor);
expect(actual.count).toBe(3);
expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
})
});
});
});
@ -150,13 +150,15 @@ describe('Component Communication Cookbook Tests', function () {
// ...
// #enddocregion child-to-parent
});
describe('Parent calls child via local var', function() {
countDownTimerTests('countdown-parent-lv')
});
describe('Parent calls ViewChild', function() {
countDownTimerTests('countdown-parent-vc')
// Can't run timer tests in protractor because
// interaction w/ zones causes all tests to freeze & timeout.
xdescribe('Parent calls child via local var', function() {
countDownTimerTests('countdown-parent-lv');
});
xdescribe('Parent calls ViewChild', function() {
countDownTimerTests('countdown-parent-vc');
});
function countDownTimerTests(parentTag: string) {
@ -180,7 +182,7 @@ describe('Component Communication Cookbook Tests', function () {
});
});
// ...
// #enddocregion countdown-timer-tests
// #enddocregion countdown-timer-tests
}

19
public/docs/_examples/cb-component-communication/ts/app/app.component.ts
View File

@ -16,9 +16,20 @@ import { MissionControlComponent } from './missioncontrol.component';
NameParentComponent,
VersionParentComponent,
VoteTakerComponent,
CountdownLocalVarParentComponent,
CountdownViewChildParentComponent,
MissionControlComponent
]
MissionControlComponent,
];
// Include Countdown examples
// unless in e2e tests which they break.
if (!/e2e/.test(location.search)) {
console.log('adding countdown timer examples');
directives.push(CountdownLocalVarParentComponent);
directives.push(CountdownViewChildParentComponent);
}
@Component({
selector: 'app',
templateUrl: 'app/app.component.html',
directives: directives
})
export class AppComponent { }

12
public/docs/_examples/cb-component-communication/ts/app/astronaut.component.ts
View File

@ -17,12 +17,12 @@ import { Subscription } from 'rxjs/Subscription';
</p>
`
})
export class AstronautComponent implements OnDestroy{
export class AstronautComponent implements OnDestroy {
@Input() astronaut: string;
mission = "<no mission announced>";
mission = '<no mission announced>';
confirmed = false;
announced = false;
subscription:Subscription;
subscription: Subscription;
constructor(private missionService: MissionService) {
this.subscription = missionService.missionAnnounced$.subscribe(
@ -30,7 +30,7 @@ export class AstronautComponent implements OnDestroy{
this.mission = mission;
this.announced = true;
this.confirmed = false;
})
});
}
confirm() {
@ -38,9 +38,9 @@ export class AstronautComponent implements OnDestroy{
this.missionService.confirmMission(this.astronaut);
}
ngOnDestroy(){
ngOnDestroy() {
// prevent memory leak when component destroyed
this.subscription.unsubscribe();
}
}
// #enddocregion
// #enddocregion

10
public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
View File

@ -11,7 +11,7 @@ import { CountdownTimerComponent } from './countdown-timer.component';
//// Local variable, #timer, version
// #docregion lv
@Component({
selector:'countdown-parent-lv',
selector: 'countdown-parent-lv',
template: `
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
@ -28,7 +28,7 @@ export class CountdownLocalVarParentComponent { }
//// View Child version
// #docregion vc
@Component({
selector:'countdown-parent-vc',
selector: 'countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
@ -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(); }
start() { this.timerComponent.start(); }
stop() { this.timerComponent.stop(); }
}
// #enddocregion vc

2
public/docs/_examples/cb-component-communication/ts/app/countdown-timer.component.ts
View File

@ -11,7 +11,7 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
message = '';
seconds = 11;
clearTimer() {clearInterval(this.intervalId);}
clearTimer() { clearInterval(this.intervalId); }
ngOnInit() { this.start(); }
ngOnDestroy() { this.clearTimer(); }

2
public/docs/_examples/cb-component-communication/ts/app/hero.ts
View File

@ -6,4 +6,4 @@ export const HEROES = [
{name: 'Mr. IQ'},
{name: 'Magneta'},
{name: 'Bombasto'}
];
];

2
public/docs/_examples/cb-component-communication/ts/app/main.ts
View File

@ -2,4 +2,4 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
bootstrap(AppComponent);

4
public/docs/_examples/cb-component-communication/ts/app/mission.service.ts
View File

@ -1,5 +1,5 @@
// #docregion
import { Injectable } from '@angular/core'
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
@ -15,7 +15,7 @@ export class MissionService {
// Service message commands
announceMission(mission: string) {
this.missionAnnouncedSource.next(mission)
this.missionAnnouncedSource.next(mission);
}
confirmMission(astronaut: string) {

4
public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
View File

@ -21,7 +21,7 @@ import { MissionService } from './mission.service';
providers: [MissionService]
})
export class MissionControlComponent {
astronauts = ['Lovell', 'Swigert', 'Haise']
astronauts = ['Lovell', 'Swigert', 'Haise'];
history: string[] = [];
missions = ['Fly to the moon!',
'Fly to mars!',
@ -32,7 +32,7 @@ export class MissionControlComponent {
missionService.missionConfirmed$.subscribe(
astronaut => {
this.history.push(`${astronaut} confirmed the mission`);
})
});
}
announce() {

2
public/docs/_examples/cb-component-communication/ts/app/version-child.component.ts
View File

@ -17,7 +17,7 @@ export class VersionChildComponent implements OnChanges {
@Input() minor: number;
changeLog: string[] = [];
ngOnChanges(changes: {[propKey:string]: SimpleChange}){
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
let log: string[] = [];
for (let propName in changes) {
let changedProp = changes[propName];

4
public/docs/_examples/cb-component-communication/ts/app/voter.component.ts
View File

@ -14,9 +14,9 @@ export class VoterComponent {
@Output() onVoted = new EventEmitter<boolean>();
voted = false;
vote(agreed:boolean){
vote(agreed: boolean) {
this.onVoted.emit(agreed);
this.voted = true;
}
}
// #enddocregion
// #enddocregion

2
public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
View File

@ -18,7 +18,7 @@ import { VoterComponent } from './voter.component';
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;

2
public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
View File

@ -12,7 +12,7 @@ describe('Cookbook: component-relative paths', function () {
title: element( by.tagName( 'h1' )),
absComp: element( by.css( 'absolute-path div' ) ),
relComp: element( by.css( 'relative-path div' ) )
}
};
}
let page: Page;

2
public/docs/_examples/cb-component-relative-paths/ts/app/app.component.ts
View File

@ -1,7 +1,7 @@
// #docregion
import { Component } from '@angular/core';
import { SomeAbsoluteComponent, SomeRelativeComponent} from './some.component';
import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
@Component({
selector: 'my-app',

2
public/docs/_examples/cb-dependency-injection/e2e-spec.ts
View File

@ -66,7 +66,7 @@ describe('Dependency Injection Cookbook', function () {
});
it('should highlight Hero Bios and Contacts container when mouseover', function () {
let target = element(by.css('div[myHighlight="yellow"]'))
let target = element(by.css('div[myHighlight="yellow"]'));
let yellow = 'rgba(255, 255, 0, 1)';
expect(target.getCssValue('background-color')).not.toEqual(yellow);

2
public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
View File

@ -2,7 +2,7 @@
import { Component } from '@angular/core';
import { HeroBiosComponent,
HeroBiosAndContactsComponent} from './hero-bios.component';
HeroBiosAndContactsComponent } from './hero-bios.component';
import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
import { HeroesBaseComponent,
SortedHeroesComponent } from './sorted-heroes.component';

8
public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
View File

@ -6,9 +6,9 @@ import { HeroCacheService } from './hero-cache.service';
// #docregion component
@Component({
selector:'hero-bio',
selector: 'hero-bio',
// #docregion template
template:`
template: `
<h4>{{hero.name}}</h4>
<ng-content></ng-content>
<textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
@ -18,9 +18,9 @@ import { HeroCacheService } from './hero-cache.service';
export class HeroBioComponent implements OnInit {
@Input() heroId:number;
@Input() heroId: number;
constructor(private heroCache:HeroCacheService) { }
constructor(private heroCache: HeroCacheService) { }
ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); }

18
public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
View File

@ -10,15 +10,15 @@ import { LoggerService } from './logger.service';
//////// HeroBiosComponent ////
// #docregion simple
@Component({
selector:'hero-bios',
template:`
selector: 'hero-bios',
template: `
<hero-bio [heroId]="1"></hero-bio>
<hero-bio [heroId]="2"></hero-bio>
<hero-bio [heroId]="3"></hero-bio>`,
directives:[HeroBioComponent],
directives: [HeroBioComponent],
providers: [HeroService]
})
export class HeroBiosComponent{
export class HeroBiosComponent {
// #enddocregion simple
// #docregion ctor
constructor(logger: LoggerService) {
@ -32,21 +32,21 @@ export class HeroBiosComponent{
//////// HeroBiosAndContactsComponent ////
// #docregion hero-bios-and-contacts
@Component({
selector:'hero-bios-and-contacts',
selector: 'hero-bios-and-contacts',
// #docregion template
template:`
template: `
<hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio>
<hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
<hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
// #enddocregion template
directives:[HeroBioComponent, HeroContactComponent],
directives: [HeroBioComponent, HeroContactComponent],
// #docregion class-provider
providers: [HeroService]
// #enddocregion class-provider
})
export class HeroBiosAndContactsComponent{
export class HeroBiosAndContactsComponent {
constructor(logger: LoggerService) {
logger.logInfo('Creating HeroBiosAndContactsComponent');
}
}
// #enddocregion hero-bios-and-contacts
// #enddocregion hero-bios-and-contacts

8
public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
View File

@ -7,14 +7,14 @@ import { HeroService } from './hero.service';
// #docregion service
@Injectable()
export class HeroCacheService {
hero:Hero;
constructor(private heroService:HeroService){}
hero: Hero;
constructor(private heroService: HeroService) {}
fetchCachedHero(id:number){
fetchCachedHero(id: number) {
if (!this.hero) {
this.hero = this.heroService.getHeroById(id);
}
return this.hero
return this.hero;
}
}
// #enddocregion service

6
public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
View File

@ -1,14 +1,14 @@
// #docplaster
// #docregion
import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
import { HeroCacheService } from './hero-cache.service';
import { LoggerService } from './logger.service';
// #docregion component
@Component({
selector:'hero-contact',
template:`
selector: 'hero-contact',
template: `
<div>Phone #: {{phoneNumber}}
<span *ngIf="hasLogger">!!!</span></div>`
})

8
public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts
View File

@ -4,10 +4,10 @@ import { Hero } from './hero';
export class HeroData {
createDb() {
let heroes = [
new Hero(1,"Windstorm"),
new Hero(2,"Bombasto"),
new Hero(3,"Magneta"),
new Hero(4,"Tornado")
new Hero(1, 'Windstorm'),
new Hero(2, 'Bombasto'),
new Hero(3, 'Magneta'),
new Hero(4, 'Tornado')
];
return {heroes};
}

14
public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
View File

@ -5,18 +5,18 @@ import { Hero } from './hero';
@Injectable()
export class HeroService {
//TODO move to database
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')
// TODO move to database
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{
getHeroById(id: number): Hero {
return this.heroes.filter(hero => hero.id === id)[0];
}
getAllHeroes():Array<Hero>{
getAllHeroes(): Array<Hero> {
return this.heroes;
}
}

10
public/docs/_examples/cb-dependency-injection/ts/app/hero.ts
View File

@ -1,9 +1,9 @@
// #docregion
export class Hero{
export class Hero {
constructor(
public id: number,
public name:string,
public description?:string,
public phone?:string) {
public name: string,
public description?: string,
public phone?: string) {
}
}
}

4
public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
View File

@ -23,7 +23,7 @@ const provideParent =
// #enddocregion provide-parent, provide-the-parent
// #docregion provide-parent
(component: any, parentType?: any) => {
return { provide: parentType || Parent, useExisting: forwardRef(() => component) }
return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
};
// #enddocregion provide-parent
@ -31,7 +31,7 @@ const provideParent =
const provideTheParent =
// #docregion provide-the-parent
(component: any) => {
return { provide: Parent, useExisting: forwardRef(() => component) }
return { provide: Parent, useExisting: forwardRef(() => component) };
};
// #enddocregion provide-the-parent

10
public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
View File

@ -9,19 +9,19 @@ import { UserService } from './user.service';
@Injectable()
export class UserContextService {
// #enddocregion injectables, injectable
name:string;
role:string;
loggedInSince:Date;
name: string;
role: string;
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
}
// #enddocregion ctor, injectables
loadUser(userId:number){
loadUser(userId: number) {
let user = this.userService.getUserById(userId);
this.name = user.name;
this.role = user.role;

4
public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
View File

@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
getUserById(userId:number):any{
return {name:'Bombasto',role:'Admin'};
getUserById(userId: number): any {
return {name: 'Bombasto', role: 'Admin'};
}
}

2
public/docs/_examples/cb-dynamic-form/e2e-spec.ts
View File

@ -15,7 +15,7 @@ describe('Dynamic Form', function () {
emailElement.sendKeys(email);
expect(emailElement.getAttribute('value')).toEqual(email);
element(by.css('select option[value="solid"]')).click()
element(by.css('select option[value="solid"]')).click();
let saveButton = element.all(by.css('button')).get(0);
saveButton.click().then(function(){

4
public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
View File

@ -1,5 +1,5 @@
// #docregion
import { Component } from '@angular/core'
import { Component } from '@angular/core';
import { DynamicForm } from './dynamic-form.component';
import { QuestionService } from './question.service';
@ -16,7 +16,7 @@ import { QuestionService } from './question.service';
providers: [QuestionService]
})
export class AppComponent {
questions:any[]
questions: any[];
constructor(service: QuestionService) {
this.questions = service.getQuestions();

8
public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
View File

@ -5,11 +5,11 @@ import { ControlGroup } from '@angular/common';
import { QuestionBase } from './question-base';
@Component({
selector:'df-question',
templateUrl:'app/dynamic-form-question.component.html'
selector: 'df-question',
templateUrl: 'app/dynamic-form-question.component.html'
})
export class DynamicFormQuestionComponent {
@Input() question:QuestionBase<any>;
@Input() form:ControlGroup;
@Input() question: QuestionBase<any>;
@Input() form: ControlGroup;
get isValid() { return this.form.controls[this.question.key].valid; }
}

6
public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
View File

@ -7,8 +7,8 @@ import { QuestionControlService } from './question-control.service';
import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
@Component({
selector:'dynamic-form',
templateUrl:'app/dynamic-form.component.html',
selector: 'dynamic-form',
templateUrl: 'app/dynamic-form.component.html',
directives: [DynamicFormQuestionComponent],
providers: [QuestionControlService]
})
@ -20,7 +20,7 @@ export class DynamicForm {
constructor(private qcs: QuestionControlService) { }
ngOnInit(){
ngOnInit() {
this.form = this.qcs.toControlGroup(this.questions);
}

2
public/docs/_examples/cb-dynamic-form/ts/app/main.ts
View File

@ -3,4 +3,4 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [])
.catch((err:any) => console.error(err));
.catch((err: any) => console.error(err));

28
public/docs/_examples/cb-dynamic-form/ts/app/question-base.ts
View File

@ -1,20 +1,20 @@
// #docregion
export class QuestionBase<T>{
value:T;
key:string;
label:string;
required:boolean;
order:number;
controlType:string;
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;
constructor(options:{
value?:T,
key?:string,
label?:string,
required?:boolean,
order?:number,
controlType?:string
} = {}){
constructor(options: {
value?: T,
key?: string,
label?: string,
required?: boolean,
order?: number,
controlType?: string
} = {}) {
this.value = options.value;
this.key = options.key || '';
this.label = options.label || '';

4
public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts
View File

@ -5,9 +5,9 @@ import { QuestionBase } from './question-base';
@Injectable()
export class QuestionControlService {
constructor(private fb:FormBuilder){ }
constructor(private fb: FormBuilder) { }
toControlGroup(questions:QuestionBase<any>[] ) {
toControlGroup(questions: QuestionBase<any>[] ) {
let group = {};
questions.forEach(question => {

6
public/docs/_examples/cb-dynamic-form/ts/app/question-dropdown.ts
View File

@ -1,11 +1,11 @@
// #docregion
import { QuestionBase } from './question-base';
export class DropdownQuestion extends QuestionBase<string>{
export class DropdownQuestion extends QuestionBase<string> {
controlType = 'dropdown';
options:{key:string, value:string}[] = [];
options: {key: string, value: string}[] = [];
constructor(options:{} = {}){
constructor(options: {} = {}) {
super(options);
this.options = options['options'] || [];
}

6
public/docs/_examples/cb-dynamic-form/ts/app/question-textbox.ts
View File

@ -1,11 +1,11 @@
// #docregion
import { QuestionBase } from './question-base';
export class TextboxQuestion extends QuestionBase<string>{
export class TextboxQuestion extends QuestionBase<string> {
controlType = 'textbox';
type:string;
type: string;
constructor(options:{} = {}){
constructor(options: {} = {}) {
super(options);
this.type = options['type'] || '';
}

24
public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts
View File

@ -13,36 +13,36 @@ export class QuestionService {
// Todo: make asynchronous
getQuestions() {
let questions:QuestionBase<any>[] = [
let questions: QuestionBase<any>[] = [
new DropdownQuestion({
key:'brave',
key: 'brave',
label: 'Bravery Rating',
options: [
{key:'solid', value:'Solid'},
{key:'great', value:'Great'},
{key:'good', value:'Good'},
{key:'unproven',value:'Unproven'}
{key: 'solid', value: 'Solid'},
{key: 'great', value: 'Great'},
{key: 'good', value: 'Good'},
{key: 'unproven', value: 'Unproven'}
],
order: 3
}),
new TextboxQuestion({
key:'firstName',
label:'First name',
value:'Bombasto',
key: 'firstName',
label: 'First name',
value: 'Bombasto',
required: true,
order: 1
}),
new TextboxQuestion({
key:'emailAddress',
label:'Email',
key: 'emailAddress',
label: 'Email',
type: 'email',
order: 2
})
];
return questions.sort((a,b) => a.order - b.order);
return questions.sort((a, b) => a.order - b.order);
}
}

1
public/docs/_examples/cb-set-document-title/ts/app/main.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable */
// #docregion
import { bootstrap } from '@angular/platform-browser-dynamic';

6
public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
View File

@ -21,11 +21,11 @@ export class TitleComponent {
constructor(
@Inject('titlePrefix')
@Optional()
private titlePrefix:string,
private titlePrefix: string,
@Attribute('title')
private title:string,
private title: string,
@Query('okMsg')
private msg:QueryList<ElementRef>) {
private msg: QueryList<ElementRef>) {
}
ok() {

2
public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
View File

@ -8,7 +8,7 @@ import { Component, Inject } from '@angular/core';
export class HeroComponent {
constructor(
@Inject('heroName')
private name:string) {
private name: string) {
}
}
// #enddocregion

4
public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
View File

@ -8,8 +8,8 @@ import { DataService } from './data.service';
template: `<h1>Hero: {{name}}</h1>`
})
export class HeroComponent {
name:string;
constructor(dataService:DataService) {
name: string;
constructor(dataService: DataService) {
this.name = dataService.getHeroName();
}
}

8
public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
View File

@ -13,8 +13,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
`
})
export class ConfirmComponent {
@Input() okMsg:string;
@Input('cancelMsg') notOkMsg:string;
@Input() okMsg: string;
@Input('cancelMsg') notOkMsg: string;
@Output() ok =
new EventEmitter();
@Output('cancel') notOk =
@ -44,8 +44,8 @@ export class ConfirmComponent {
directives: [ConfirmComponent]
})
export class AppComponent {
okClicked:boolean;
cancelClicked:boolean;
okClicked: boolean;
cancelClicked: boolean;
onOk() {
this.okClicked = true;

2
public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
View File

@ -11,7 +11,7 @@ import { Component, OnInit }
// #docregion
export class HeroComponent
implements OnInit {
name:string;
name: string;
ngOnInit() {
this.name = 'Windstorm';
}

4
public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
View File

@ -4,14 +4,14 @@ import { Component } from '@angular/core';
@Component({
selector: 'hero-view',
template:
template:
'<h1>Hero: {{getName()}}</h1>'
})
// #docregion appexport
// #docregion class
export class HeroComponent {
title = 'Hero Detail';
getName() {return 'Windstorm';}
getName() {return 'Windstorm'; }
}
// #enddocregion class
// #enddocregion appexport

6
public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
View File

@ -10,8 +10,8 @@ import { Component, HostBinding, HostListener } from '@angular/core';
export class HeroesComponent {
@HostBinding() title = 'Tooltip content';
@HostBinding('class.heading')
hClass = true
active:boolean;
hClass = true;
active: boolean;
constructor() {}
@ -21,7 +21,7 @@ export class HeroesComponent {
}
@HostListener('dblclick', ['$event'])
doubleClicked(evt:Event) {
doubleClicked(evt: Event) {
this.active = true;
}
}

10
public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
View File

@ -14,7 +14,7 @@ import {
</span>`
})
class ActiveLabelComponent {
active:boolean;
active: boolean;
activate() {
this.active = true;
@ -30,11 +30,11 @@ class ActiveLabelComponent {
</h2>`
})
class HeroComponent {
@Input() hero:any;
active:boolean;
@Input() hero: any;
active: boolean;
@ContentChild(ActiveLabelComponent)
label:ActiveLabelComponent
label: ActiveLabelComponent;
activate() {
this.active = true;
@ -68,7 +68,7 @@ export class HeroesQueriesComponent {
];
@ViewChildren(HeroComponent)
heroCmps:QueryList<HeroComponent>;
heroCmps: QueryList<HeroComponent>;
activate() {
this.heroCmps.forEach(

2
public/docs/_examples/cb-ts-to-js/ts/app/main.ts
View File

@ -1,8 +1,6 @@
// #docregion ng2import
import { bootstrap }
from '@angular/platform-browser-dynamic';
import {
} from '@angular/router';
import {
LocationStrategy,
HashLocationStrategy

2
public/docs/_examples/component-styles/ts/app/hero-app.component.ts
View File

@ -16,7 +16,7 @@ export class HeroAppComponent {
hero = new Hero(
'Human Torch',
['Mister Fantastic', 'Invisible Woman', 'Thing']
)
);
@HostBinding('class') get themeClass() {
return 'theme-light';

6
public/docs/_examples/component-styles/ts/app/hero.ts
View File

@ -1,7 +1,7 @@
export class Hero {
active:boolean;
active: boolean;
constructor(public name:string,
public team:string[]) {
constructor(public name: string,
public team: string[]) {
}
}

6
public/docs/_examples/dependency-injection/e2e-spec.ts
View File

@ -123,7 +123,7 @@ describe('Dependency Injection Tests', function () {
it('P10 (optional dependency) displays as expected', function () {
expectedMsg = 'Optional logger was not available';
expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
})
});
});
describe('User/Heroes:', function() {
@ -163,8 +163,8 @@ describe('Dependency Injection Tests', function () {
describe('after button click', function() {
beforeAll(function (done) {
let buttonEle = element.all(by.cssContainingText('button','Next User')).get(0);
buttonEle.click().then(done,done);
let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
buttonEle.click().then(done, done);
});
it('User is Alice - authorized', function () {

2
public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
View File

@ -13,7 +13,7 @@ import { HeroesComponent } from './heroes/heroes.component.1';
<my-car></my-car>
<my-heroes></my-heroes>
`,
directives:[CarComponent, HeroesComponent]
directives: [CarComponent, HeroesComponent]
})
export class AppComponent {

6
public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
View File

@ -17,7 +17,7 @@ import { Logger } from './logger.service';
<my-car></my-car>
<my-heroes></my-heroes>
`,
directives:[CarComponent, HeroesComponent],
directives: [CarComponent, HeroesComponent],
providers: [
Logger,
// #docregion providers
@ -26,10 +26,10 @@ import { Logger } from './logger.service';
]
})
export class AppComponent {
title:string;
title: string;
// #docregion ctor
constructor(@Inject(APP_CONFIG) config:AppConfig) {
constructor(@Inject(APP_CONFIG) config: AppConfig) {
this.title = config.title;
}
// #enddocregion ctor

10
public/docs/_examples/dependency-injection/ts/app/app.component.ts
View File

@ -31,7 +31,7 @@ import { ProvidersComponent } from './providers.component';
<my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
<my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
`,
directives:[CarComponent, HeroesComponent,
directives: [CarComponent, HeroesComponent,
InjectorComponent, TestComponent, ProvidersComponent],
// #docregion providers
providers: [
@ -42,22 +42,22 @@ import { ProvidersComponent } from './providers.component';
// #enddocregion providers
})
export class AppComponent {
title:string;
title: string;
// #docregion ctor
constructor(
@Inject(APP_CONFIG) config:AppConfig,
@Inject(APP_CONFIG) config: AppConfig,
private userService: UserService) {
this.title = config.title;
}
// #enddocregion ctor
get isAuthorized() { return this.user.isAuthorized;}
get isAuthorized() { return this.user.isAuthorized; }
nextUser() { this.userService.getNewUser(); }
get user() { return this.userService.user; }
get userInfo() {
return `Current user, ${this.user.name}, is `+
return `Current user, ${this.user.name}, is ` +
`${this.isAuthorized ? '' : 'not'} authorized. `;
}
}

6
public/docs/_examples/dependency-injection/ts/app/app.config.ts
View File

@ -4,10 +4,10 @@ import { OpaqueToken } from '@angular/core';
export let APP_CONFIG = new OpaqueToken('app.config');
// #enddocregion token
//#docregion config
// #docregion config
export interface AppConfig {
apiEndpoint: string,
title: string
apiEndpoint: string;
title: string;
}
export const HERO_DI_CONFIG: AppConfig = {

30
public/docs/_examples/dependency-injection/ts/app/car/car-creations.ts
View File

@ -5,42 +5,42 @@ import { Car, Engine, Tires } from './car';
///////// example 1 ////////////
export function simpleCar() {
//#docregion car-ctor-instantiation
// #docregion car-ctor-instantiation
// Simple car with 4 cylinders and Flintstone tires.
var car = new Car(new Engine(), new Tires());
//#enddocregion car-ctor-instantiation
let car = new Car(new Engine(), new Tires());
// #enddocregion car-ctor-instantiation
car.description = 'Simple';
return car;
}
///////// example 2 ////////////
//#docregion car-ctor-instantiation-with-param
// #docregion car-ctor-instantiation-with-param
class Engine2 {
constructor(public cylinders: number) { }
}
//#enddocregion car-ctor-instantiation-with-param
// #enddocregion car-ctor-instantiation-with-param
export function superCar() {
//#docregion car-ctor-instantiation-with-param
// #docregion car-ctor-instantiation-with-param
// Super car with 12 cylinders and Flintstone tires.
var bigCylinders = 12;
var car = new Car(new Engine2(bigCylinders), new Tires());
//#enddocregion car-ctor-instantiation-with-param
let bigCylinders = 12;
let car = new Car(new Engine2(bigCylinders), new Tires());
// #enddocregion car-ctor-instantiation-with-param
car.description = 'Super';
return car;
}
/////////// example 3 //////////
//#docregion car-ctor-instantiation-with-mocks
// #docregion car-ctor-instantiation-with-mocks
class MockEngine extends Engine { cylinders = 8; }
class MockTires extends Tires { make = "YokoGoodStone"; }
class MockTires extends Tires { make = 'YokoGoodStone'; }
//#enddocregion car-ctor-instantiation-with-mocks
// #enddocregion car-ctor-instantiation-with-mocks
export function testCar() {
//#docregion car-ctor-instantiation-with-mocks
// #docregion car-ctor-instantiation-with-mocks
// Test car with 8 cylinders and YokoGoodStone tires.
var car = new Car(new MockEngine(), new MockTires());
//#enddocregion car-ctor-instantiation-with-mocks
let car = new Car(new MockEngine(), new MockTires());
// #enddocregion car-ctor-instantiation-with-mocks
car.description = 'Test';
return car;
}

10
public/docs/_examples/dependency-injection/ts/app/car/car-injector.ts
View File

@ -5,23 +5,23 @@ import { Logger } from '../logger.service';
// #docregion injector
export function useInjector() {
var injector: ReflectiveInjector;
let injector: ReflectiveInjector;
// #enddocregion injector
/*
// #docregion injector-no-new
// Cannot instantiate an ReflectiveInjector like this!
var injector = new ReflectiveInjector([Car, Engine, Tires]);
let injector = new ReflectiveInjector([Car, Engine, Tires]);
// #enddocregion injector-no-new
*/
// #docregion injector, injector-create-and-call
injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
// #docregion injector-call
var car = injector.get(Car);
let car = injector.get(Car);
// #enddocregion injector-call, injector-create-and-call
car.description = 'Injector';
injector = ReflectiveInjector.resolveAndCreate([Logger]);
var logger = injector.get(Logger);
logger.log('Injector car.drive() said: '+car.drive());
let logger = injector.get(Logger);
logger.log('Injector car.drive() said: ' + car.drive());
return car;
}

10
public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts
View File

@ -1,10 +1,10 @@
// Car without DI
import { Engine, Tires } from './car';
//#docregion car
// #docregion car
export class Car {
//#docregion car-ctor
// #docregion car-ctor
public engine: Engine;
public tires: Tires;
public description = 'No DI';
@ -13,12 +13,12 @@ export class Car {
this.engine = new Engine();
this.tires = new Tires();
}
//#enddocregion car-ctor
// #enddocregion car-ctor
// Method using the engine and tires
drive() {
return `${this.description} car with ` +
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
}
}
//#enddocregion car
// #enddocregion car

4
public/docs/_examples/dependency-injection/ts/app/car/car.ts
View File

@ -11,7 +11,7 @@ export class Tires {
@Injectable()
export class Car {
//#docregion car-ctor
// #docregion car-ctor
public description = 'DI';
constructor(public engine: Engine, public tires: Tires) { }
@ -20,6 +20,6 @@ export class Car {
// Method using the engine and tires
drive() {
return `${this.description} car with ` +
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
}
}

1
public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable:one-line */
// #docregion
import { Component } from '@angular/core';

6
public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts
View File

@ -8,12 +8,12 @@ import { Logger } from '../logger.service';
@Injectable()
export class HeroService {
//#docregion ctor
// #docregion ctor
constructor(private logger: Logger) { }
//#enddocregion ctor
// #enddocregion ctor
getHeroes() {
this.logger.log('Getting heroes ...')
this.logger.log('Getting heroes ...');
return HEROES;
}
}

3
public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable:one-line */
// #docregion
import { HeroService } from './hero.service';
import { Logger } from '../logger.service';
@ -6,7 +7,7 @@ import { UserService } from '../user.service';
// #docregion factory
let heroServiceFactory = (logger: Logger, userService: UserService) => {
return new HeroService(logger, userService.user.isAuthorized);
}
};
// #enddocregion factory
// #docregion provider

4
public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts
View File

@ -7,7 +7,7 @@ import { Logger } from '../logger.service';
@Injectable()
export class HeroService {
private _user:string;
private _user: string;
// #docregion internals
constructor(
@ -15,7 +15,7 @@ export class HeroService {
private isAuthorized: boolean) { }
getHeroes() {
let auth = this.isAuthorized ? 'authorized ': 'unauthorized';
let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
this.logger.log(`Getting heroes for ${auth} user.`);
return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
}

4
public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
View File

@ -21,8 +21,8 @@ import { HeroService } from './hero.service';
<hero-list></hero-list>
`,
// #enddocregion v1
providers:[HeroService],
providers: [HeroService],
// #docregion v1
directives:[HeroListComponent]
directives: [HeroListComponent]
})
export class HeroesComponent { }

6
public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
View File

@ -2,7 +2,7 @@
import { Component } from '@angular/core';
import { HeroListComponent } from './hero-list.component';
import { heroServiceProvider} from './hero.service.provider';
import { heroServiceProvider } from './hero.service.provider';
@Component({
selector: 'my-heroes',
@ -10,7 +10,7 @@ import { heroServiceProvider} from './hero.service.provider';
<h2>Heroes</h2>
<hero-list></hero-list>
`,
providers:[heroServiceProvider],
directives:[HeroListComponent]
providers: [heroServiceProvider],
directives: [HeroListComponent]
})
export class HeroesComponent { }

20
public/docs/_examples/dependency-injection/ts/app/heroes/mock-heroes.ts
View File

@ -2,14 +2,14 @@
import { Hero } from './hero';
export var HEROES: Hero[] = [
{ id: 11, isSecret: false, name: "Mr. Nice" },
{ id: 12, isSecret: false, name: "Narco" },
{ id: 13, isSecret: false, name: "Bombasto" },
{ id: 14, isSecret: false, name: "Celeritas" },
{ id: 15, isSecret: false, name: "Magneta" },
{ id: 16, isSecret: false, name: "RubberMan" },
{ id: 17, isSecret: false, name: "Dynama" },
{ id: 18, isSecret: true, name: "Dr IQ" },
{ id: 19, isSecret: true, name: "Magma" },
{ id: 20, isSecret: true, name: "Tornado" }
{ id: 11, isSecret: false, name: 'Mr. Nice' },
{ id: 12, isSecret: false, name: 'Narco' },
{ id: 13, isSecret: false, name: 'Bombasto' },
{ id: 14, isSecret: false, name: 'Celeritas' },
{ id: 15, isSecret: false, name: 'Magneta' },
{ id: 16, isSecret: false, name: 'RubberMan' },
{ id: 17, isSecret: false, name: 'Dynama' },
{ id: 18, isSecret: true, name: 'Dr IQ' },
{ id: 19, isSecret: true, name: 'Magma' },
{ id: 20, isSecret: true, name: 'Tornado' }
];

6
public/docs/_examples/dependency-injection/ts/app/injector.component.ts
View File

@ -20,8 +20,6 @@ import { Logger } from './logger.service';
providers: [Car, Engine, Tires, heroServiceProvider, Logger]
})
export class InjectorComponent {
constructor(private injector: Injector) { }
car: Car = this.injector.get(Car);
// #docregion get-hero-service
@ -29,8 +27,10 @@ export class InjectorComponent {
// #enddocregion get-hero-service
hero: Hero = this.heroService.getHeroes()[0];
constructor(private injector: Injector) { }
get rodent() {
let rousDontExist = "R.O.U.S.'s? I don't think they exist!";
let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
return this.injector.get(ROUS, rousDontExist);
}
}

2
public/docs/_examples/dependency-injection/ts/app/logger.service.ts
View File

@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
@Injectable()
export class Logger {
logs:string[] = []; // capture logs for testing
logs: string[] = []; // capture logs for testing
log(message: string) {
this.logs.push(message);

8
public/docs/_examples/dependency-injection/ts/app/main.1.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable:no-unused-variable */
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component.1';
import { HeroService } from './heroes/hero.service.1';
@ -5,9 +6,8 @@ import { HeroService } from './heroes/hero.service.1';
bootstrap(AppComponent);
function discouraged() {
//#docregion bootstrap
// #docregion bootstrap-discouraged
bootstrap(AppComponent,
[HeroService]); // DISCOURAGED (but works)不推荐（但可用）
//#enddocregion bootstrap
[HeroService]); // DISCOURAGED (but works)
// #enddocregion bootstrap-discouraged
}

4
public/docs/_examples/dependency-injection/ts/app/main.ts
View File

@ -2,7 +2,7 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { ProvidersComponent } from './providers.component';
//#docregion bootstrap
// #docregion bootstrap
bootstrap(AppComponent);
//#enddocregion bootstrap
// #enddocregion bootstrap
bootstrap(ProvidersComponent);

3
public/docs/_examples/dependency-injection/ts/app/providers.component.ts
View File

@ -235,8 +235,9 @@ export class ProviderComponent10 {
log: string;
// #docregion provider-10-ctor
constructor(@Optional() private logger: Logger) {
if (this.logger)
if (this.logger) {
this.logger.log(some_message);
}
}
// #enddocregion provider-10-ctor

25
public/docs/_examples/dependency-injection/ts/app/test.component.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable */
// Simulate a simple test
// Reader should look to the testing chapter for the real thing
@ -20,15 +21,15 @@ export class TestComponent {
/////////////////////////////////////
function runTests() {
//#docregion spec
// #docregion spec
let expectedHeroes = [{name: 'A'}, {name: 'B'}]
let mockService = <HeroService> {getHeroes: () => expectedHeroes }
it("should have heroes when HeroListComponent created", () => {
it('should have heroes when HeroListComponent created', () => {
let hlc = new HeroListComponent(mockService);
expect(hlc.heroes.length).toEqual(expectedHeroes.length);
})
//#enddocregion spec
});
// #enddocregion spec
return testResults;
}
@ -36,19 +37,19 @@ function runTests() {
//////////////////////////////////
// Fake Jasmine infrastructure
var testName: string;
var testResults: {pass:string; message:string};
var testResults: {pass: string; message: string};
function expect(actual:any) {
function expect(actual: any) {
return {
toEqual: function(expected:any){
testResults = actual === expected?
{pass:'passed', message: testName} :
{pass:'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
toEqual: function(expected: any){
testResults = actual === expected ?
{pass: 'passed', message: testName} :
{pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
}
}
};
}
function it(label:string, test: () => void) {
function it(label: string, test: () => void) {
testName = label;
test();
}

6
public/docs/_examples/dependency-injection/ts/app/user.service.ts
View File

@ -1,10 +1,10 @@
// #docregion
import {Injectable} from '@angular/core';
import { Injectable } from '@angular/core';
export class User {
constructor(
public name:string,
public isAuthorized:boolean = false) { }
public name: string,
public isAuthorized = false) { }
}
// Todo: get the user; don't 'new' it.

2
public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
View File

@ -17,4 +17,4 @@ export class AppCtorComponent {
this.myHero = 'Windstorm';
}
}
// #enddocregion app-ctor
// #enddocregion app-ctor

4
public/docs/_examples/displaying-data/ts/app/app.component.3.ts
View File

@ -1,7 +1,7 @@
// #docregion
import { Component} from '@angular/core';
import { Component } from '@angular/core';
// #docregion import-hero
import { Hero} from './hero';
import { Hero } from './hero';
// #enddocregion import-hero
@Component({

6
public/docs/_examples/displaying-data/ts/app/hero.ts
View File

@ -2,8 +2,8 @@
export class Hero {
constructor(
// #docregion id-parameter
public id:number,
public id: number,
// #enddocregion id-parameter
public name:string) { }
public name: string) { }
}
// #enddocregion
// #enddocregion

7
public/docs/_examples/displaying-data/ts/app/main.1.ts
View File

@ -1,3 +1,4 @@
/* tslint:disable */
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppCtorComponent } from './app-ctor.component';
@ -8,9 +9,9 @@ import { AppComponent as v3 } from './app.component.3';
import { AppComponent as final } from './app.component';
// pick one
//bootstrap(v1);
//bootstrap(v2);
//bootstrap(v3);
// bootstrap(v1);
// bootstrap(v2);
// bootstrap(v3);
bootstrap(final);
// for doc testing

2
public/docs/_examples/forms/ts/app/app.component.ts
View File

@ -1,6 +1,6 @@
// #docregion
import { Component } from '@angular/core';
import { HeroFormComponent } from './hero-form.component'
import { HeroFormComponent } from './hero-form.component';
@Component({
selector: 'my-app',

4
public/docs/_examples/forms/ts/app/hero-form.component.ts
View File

@ -41,7 +41,7 @@ export class HeroFormComponent {
this.model = new Hero(42, '', '');
// #enddocregion new-hero-v1
this.active = false;
setTimeout(()=> this.active=true, 0);
setTimeout(() => this.active = true, 0);
// #docregion new-hero-v1
}
// #enddocregion new-hero-v1
@ -51,7 +51,7 @@ export class HeroFormComponent {
// Reveal in html:
// Name via form.controls = {{showFormControls(heroForm)}}
showFormControls(form:NgForm){
showFormControls(form: NgForm) {
return form && form.controls['name'] &&
// #docregion form-controls

16
public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
View File

@ -6,8 +6,8 @@ describe('Hierarchical dependency injection', function () {
});
it('should open with a card view', function () {
expect(element.all(by.cssContainingText('button','edit')).get(0).isDisplayed()).toBe(true,
"edit button should be displayed");
expect(element.all(by.cssContainingText('button', 'edit')).get(0).isDisplayed()).toBe(true,
'edit button should be displayed');
});
it('should have multiple heroes listed', function () {
@ -15,10 +15,10 @@ describe('Hierarchical dependency injection', function () {
});
it('should change to editor view after selection', function () {
let editButtonEle = element.all(by.cssContainingText('button','edit')).get(0);
let editButtonEle = element.all(by.cssContainingText('button', 'edit')).get(0);
editButtonEle.click().then(function() {
expect(editButtonEle.isDisplayed()).toBe(false, "edit button should be hidden after selection");
})
expect(editButtonEle.isDisplayed()).toBe(false, 'edit button should be hidden after selection');
});
});
it('should be able to save editor change', function () {
@ -34,11 +34,11 @@ describe('Hierarchical dependency injection', function () {
let heroEle = element.all(by.css('heroes-list li')).get(1);
// get the 2nd span which is the name of the hero
let heroNameEle = heroEle.all(by.css('hero-card span')).get(1);
let editButtonEle = heroEle.element(by.cssContainingText('button','edit'));
let editButtonEle = heroEle.element(by.cssContainingText('button', 'edit'));
editButtonEle.click().then(function() {
let inputEle = heroEle.element(by.css('hero-editor input'));
// return inputEle.sendKeys("foo");
return sendKeys(inputEle, "foo");
return sendKeys(inputEle, 'foo');
}).then(function() {
let buttonName = shouldSave ? 'save' : 'cancel';
let buttonEle = heroEle.element(by.cssContainingText('button', buttonName));
@ -49,7 +49,7 @@ describe('Hierarchical dependency injection', function () {
} else {
expect(heroNameEle.getText()).not.toContain('foo');
}
})
});
}

2
public/docs/_examples/hierarchical-dependency-injection/ts/app/edit-item.ts
View File

@ -1,6 +1,6 @@
// #docregion
export class EditItem<T> {
editing: boolean
editing: boolean;
constructor (public item: T) {}
}
// #docregion

4
public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts
View File

@ -2,8 +2,8 @@ import { Hero } from './hero';
export class HeroesService {
heroes: Array<Hero> = [
{ name: "RubberMan", power: 'flexibility'},
{ name: "Tornado", power: 'Weather changer'}
{ name: 'RubberMan', power: 'flexibility'},
{ name: 'Tornado', power: 'Weather changer'}
];
getHeroes () {

2
public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts
View File

@ -4,7 +4,7 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { HeroesListComponent } from './heroes-list.component';
import { HeroesService } from './heroes.service';
bootstrap(HeroesListComponent, [HeroesService])
bootstrap(HeroesListComponent, [HeroesService]);
/* Documentation artifact below
// #docregion bad-alternative

6
public/docs/_examples/hierarchical-dependency-injection/ts/app/restore.service.ts
View File

@ -8,16 +8,16 @@ export class RestoreService<T> {
this.currentItem = this.clone(item);
}
getItem () :T {
getItem (): T {
return this.currentItem;
}
restoreItem () :T {
restoreItem (): T {
this.currentItem = this.originalItem;
return this.getItem();
}
clone (item: T) :T {
clone (item: T): T {
// super poor clone implementation
return JSON.parse(JSON.stringify(item));
}

2
public/docs/_examples/homepage-hello-world/e2e-spec.ts
View File

@ -10,7 +10,7 @@ describe('Homepage Hello World', function () {
it(`should display the label: ${expectedLabel}`, function () {
expect(element(by.css('label')).getText()).toEqual(expectedLabel);
});
it('should display entered name', function () {
let testName = 'Bobby Joe';
let nameEle = element.all(by.css('input')).get(0);

4
public/docs/_examples/homepage-todo/ts/app/todo.ts
View File

@ -1,6 +1,6 @@
// #docregion
// Declare an interaface for type safety
export interface Todo {
text: string,
done: boolean
text: string;
done: boolean;
}

2
public/docs/_examples/homepage-todo/ts/app/todo_app.ts
View File

@ -14,7 +14,7 @@ import { TodoForm } from './todo_form';
<todo-list [todos]="todos"></todo-list>
<todo-form (newTask)="addTask($event)"></todo-form>`,
styles:['a { cursor: pointer; cursor: hand; }'],
styles: ['a { cursor: pointer; cursor: hand; }'],
directives: [TodoList, TodoForm]
})
export class TodoApp {

2
public/docs/_examples/homepage-todo/ts/app/todo_form.ts
View File

@ -17,7 +17,7 @@ export class TodoForm {
addTodo() {
if (this.task) {
this.newTask.next({text:this.task, done:false});
this.newTask.next({text: this.task, done: false});
}
this.task = '';
}

1
public/docs/_examples/homepage-todo/ts/app/todo_list.ts
View File

@ -1,5 +1,6 @@
// #docregion
import { Component, Input } from '@angular/core';
import { Todo } from './todo';
@Component({

54
public/docs/_examples/lifecycle-hooks/e2e-spec.ts
View File

@ -11,22 +11,22 @@ describe('Lifecycle hooks', function () {
it('should support peek-a-boo', function () {
let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
expect(pabComp.isPresent()).toBe(false, "should not be able to find the 'peek-a-boo' component");
expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
expect(pabButton.getText()).toContain('Create Peek');
pabButton.click().then(function () {
expect(pabButton.getText()).toContain('Destroy Peek');
expect(pabComp.isDisplayed()).toBe(true, "should be able to see the 'peek-a-boo' component");
expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
expect(pabComp.getText()).toContain('Windstorm');
expect(pabComp.getText()).not.toContain('Windstorm!');
expect(updateHeroButton.isPresent()).toBe(true, "should be able to see the update hero button");
expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
return updateHeroButton.click();
}).then(function () {
expect(pabComp.getText()).toContain('Windstorm!');
return pabButton.click();
}).then(function () {
expect(pabComp.isPresent()).toBe(false, "should no longer be able to find the 'peek-a-boo' component");
expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
});
});
@ -39,18 +39,18 @@ describe('Lifecycle hooks', function () {
let changeLogEles = onChangesViewEle.all(by.css('div'));
expect(titleEle.getText()).toContain('Windstorm can sing');
expect(changeLogEles.count()).toEqual(2, "should start with 2 messages");
expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
// heroNameInputEle.sendKeys('-foo-').then(function () {
sendKeys(heroNameInputEle, '-foo-').then(function () {
expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
expect(changeLogEles.count()).toEqual(2, "should still have 2 messages");
expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
// protractor bug with sendKeys means that line below does not work.
// return powerInputEle.sendKeys('-bar-');
return sendKeys(powerInputEle, '-bar-');
}).then(function () {
expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
// 7 == 2 previously + length of '-bar-'
expect(changeLogEles.count()).toEqual(7, "should have 7 messages now");
expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
});
});
@ -66,16 +66,16 @@ describe('Lifecycle hooks', function () {
expect(titleEle.getText()).toContain('Windstorm can sing');
changeLogEles.count().then(function(count) {
// Empirically 5 messages to start
expect(count).toBeGreaterThan(4, "should start with some messages");
expect(count).toBeGreaterThan(4, 'should start with some messages');
logCount = count;
// heroNameInputEle.sendKeys('-foo-').then(function () {
return sendKeys(heroNameInputEle, '-foo-')
return sendKeys(heroNameInputEle, '-foo-');
}).then(function () {
expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
return changeLogEles.count()
return changeLogEles.count();
}).then(function (count) {
// two more for each keystroke except the 1st
expect(count).toEqual(logCount + 9, 'should add 9 more messages')
expect(count).toEqual(logCount + 9, 'should add 9 more messages');
logCount = count;
// return powerInputEle.sendKeys('-bar-');
return sendKeys(powerInputEle, '-bar-');
@ -99,18 +99,18 @@ describe('Lifecycle hooks', function () {
logEles.count().then(function(count) {
logCount = count;
return sendKeys(childViewInputEle, "-test-");
return sendKeys(childViewInputEle, '-test-');
}).then(function() {
expect(childViewInputEle.getAttribute('value')).toContain('-test-');
expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');
expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
expect(commentEle.getText()).toContain('long name');
return logEles.count();
}).then(function(count) {
expect(logCount + 10).toEqual(count, "10 additional log messages should have been added");
expect(logCount + 10).toEqual(count, '10 additional log messages should have been added');
logCount = count;
return buttonEle.click();
}).then(function() {
expect(logEles.count()).toBeLessThan(logCount, "log should shrink after reset");
expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
});
});
@ -128,30 +128,30 @@ describe('Lifecycle hooks', function () {
logEles.count().then(function(count) {
logCount = count;
return sendKeys(childViewInputEle, "-test-");
return sendKeys(childViewInputEle, '-test-');
}).then(function() {
expect(childViewInputEle.getAttribute('value')).toContain('-test-');
expect(commentEle.isPresent()).toBe(true,'should have comment because >10 chars');
expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
expect(commentEle.getText()).toContain('long name');
return logEles.count();
}).then(function(count) {
expect(logCount + 10).toEqual(count, "10 additional log messages should have been added");
expect(logCount + 10).toEqual(count, '10 additional log messages should have been added');
logCount = count;
return buttonEle.click();
}).then(function() {
expect(logEles.count()).toBeLessThan(logCount, "log should shrink after reset");
expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
});
});
it('should support spy\'s OnInit & OnDestroy hooks', function () {
let inputEle = element(by.css('spy-parent input'));
let addHeroButtonEle = element(by.cssContainingText('spy-parent button','Add Hero'));
let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button','Reset Heroes'));
let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
let heroEles = element.all(by.css('spy-parent div[mySpy'));
let logEles = element.all(by.css('spy-parent h4 ~ div'));
expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
expect(logEles.count()).toBe(2, 'should have two log entries');
sendKeys(inputEle, "-test-").then(function() {
sendKeys(inputEle, '-test-').then(function() {
return addHeroButtonEle.click();
}).then(function() {
expect(heroEles.count()).toBe(3, 'should have added one hero');
@ -161,12 +161,12 @@ describe('Lifecycle hooks', function () {
}).then(function() {
expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
})
});
});
it('should support "spy counter"', function () {
let updateCounterButtonEle = element(by.cssContainingText('counter-parent button','Update'));
let resetCounterButtonEle = element(by.cssContainingText('counter-parent button','Reset'));
let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
let textEle = element(by.css('counter-parent my-counter > div'));
let logEles = element.all(by.css('counter-parent h4 ~ div'));
expect(textEle.getText()).toContain('Counter = 0');
@ -178,8 +178,6 @@ describe('Lifecycle hooks', function () {
}).then(function() {
expect(textEle.getText()).toContain('Counter = 0');
expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
})
});
});
});

Some files were not shown because too many files have changed in this diff Show More