make the example lintable

This commit is contained in:
Foxandxss 2016-06-14 17:39:53 +02:00 committed by Naomi Black
parent c0edf369f4
commit 34447904b9
15 changed files with 63 additions and 60 deletions

View File

@ -670,7 +670,10 @@ gulp.task('lint', function() {
'!./public/docs/_examples/**/node_modules/**/*',
'!./public/docs/_examples/_protractor/**/*',
'!./public/docs/_examples/**/typings/**/*',
'!./public/docs/_examples/**/typings-ng1/**/*'
'!./public/docs/_examples/**/typings-ng1/**/*',
// temporary until codelyzer is fixed mgechev/codelyzer#60
'!./public/docs/_examples/animations/ts/app/hero.service.ts'
])
.pipe(tslint({
rulesDirectory: ['node_modules/codelyzer'],

View File

@ -5,10 +5,9 @@ import {
state,
style,
animate,
transition,
group
transition
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -24,7 +23,7 @@ import { Hero, Heroes } from './hero.service';
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/* When the element leaves (transition "in => void" occurs),
* get the element's current computed height and animate
* it down to 0.
@ -42,5 +41,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListAutoComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -11,7 +11,7 @@ import {
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -64,5 +64,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListBasicComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -5,10 +5,9 @@ import {
state,
style,
animate,
transition,
group
transition
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -42,5 +41,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListClassesComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -10,7 +10,7 @@ import {
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -53,5 +53,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListCombinedTransitionsComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -5,10 +5,9 @@ import {
state,
style,
animate,
transition,
group
transition
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -58,5 +57,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListEnterLeaveStatesComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -5,10 +5,9 @@ import {
state,
style,
animate,
transition,
group
transition
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -46,5 +45,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListEnterLeaveComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -8,7 +8,7 @@ import {
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -74,5 +74,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListGroupsComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -4,13 +4,12 @@ import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -55,5 +54,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListInlineStylesComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -1,3 +1,4 @@
/* tslint:disable */
import {
Component,
Input,
@ -9,7 +10,7 @@ import {
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -59,5 +60,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListKeyframesComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -6,10 +6,9 @@ import {
style,
animate,
transition,
group,
keyframes
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -53,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListMultistepComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -5,10 +5,9 @@ import {
state,
style,
animate,
transition,
group
transition
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -53,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListTimingsComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -10,7 +10,7 @@ import {
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
@ -52,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListTwowayComponent {
@Input() heroes:Heroes;
@Input() heroes: Heroes;
}

View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { Hero, Heroes } from './hero.service';
import { Heroes } from './hero.service';
import { HeroListBasicComponent } from './hero-list-basic.component';
import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
@ -52,7 +52,10 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
<div class="columns">
<div class="column">
<h4>Enter & Leave & States</h4>
<p>Enter and leave animations combined with active/inactive state animations. Different enter and leave transitions depending on state.</p>
<p>
Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state.
</p>
<hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
</div>
<div class="column">
@ -82,7 +85,10 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
</div-->
<!--div class="column">
<h4>CSS Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce. Pull in the actual keyframes from CSS keyframes in component stylesheet.</p>
<p>
Enter and leave animations with three keyframes in each, to give the transition some bounce.
Pull in the actual keyframes from CSS keyframes in component stylesheet.
</p>
<hero-list-multistep [heroes]=heroes></hero-list-multistep>
<hero-list-keyframes [heroes]=heroes></hero-list-keyframes>
</div-->
@ -124,5 +130,5 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
providers: [Heroes]
})
export class HeroTeamBuilderComponent {
constructor(private heroes:Heroes) { }
constructor(private heroes: Heroes) { }
}

View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
export class Hero {
constructor(public name:string,
class Hero {
constructor(public name: string,
public state = 'inactive') {
}
@ -10,6 +10,22 @@ export class Hero {
}
}
let ALL_HEROES = [
'Wolverine',
'Magneto',
'Emma Frost',
'Thing',
'Kitty Pryde',
'Nightcrawler',
'Juggernaut',
'Beast',
'Captain America',
'Spider-Man',
'Puck',
'Alex Wilder',
'Doctor Strange'
].map(name => new Hero(name));
@Injectable()
export class Heroes implements Iterable<Hero> {
@ -36,19 +52,3 @@ export class Heroes implements Iterable<Hero> {
}
}
var ALL_HEROES = [
'Wolverine',
'Magneto',
'Emma Frost',
'Thing',
'Kitty Pryde',
'Nightcrawler',
'Juggernaut',
'Beast',
'Captain America',
'Spider-Man',
'Puck',
'Alex Wilder',
'Doctor Strange'
].map(name => new Hero(name));