make the example lintable
This commit is contained in:
parent
c0edf369f4
commit
34447904b9
|
@ -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'],
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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) { }
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
|
|
Loading…
Reference in New Issue