{{heroes | json}}
`
})
export class HeroListComponent implements OnInit{
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
}
```
Back to top
:marked
### Use the @Injectable() Class Decorator
#### Style 07-04
- Use the `@Injectable` class decorator instead of the `@Inject` parameter decorator when we are using types as tokens for the dependencies of a service.
**Why?**: The Angular DI mechanism resolves all the dependencies of our services based on their types declared with the services' constructors.
**Why?**: When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
```
/* avoid */
export class HeroArena {
constructor(
@Inject(HeroFactory) private heroFactory: HeroFactory,
@Inject(Http) private http: Http) {}
}
```
```
/* recommended */
@Injectable()
export class HeroArena {
constructor(
private heroFactory: HeroFactory,
private http: Http) {}
}
```
Back to top
:marked
## Data Services
### Separate Data Calls
#### Style 08-01
- Refactor logic for making data operations and interacting with data to a service. Make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
**Why?** The component's responsibility is for the presentation and gathering of information for the view. It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
**Why?** This makes it easier to test (mock or real) the data calls when testing a component that uses a data service.
**Why?** Data service implementation may have very specific code to handle the data repository. This may include headers, how to talk to the data, or other services such as `Http`. Separating the logic into a data service encapsulates this logic in a single place hiding the implementation from the outside consumers (perhaps a component), also making it easier to change the implementation.
Back to top
:marked
## Lifecycle Hooks
Use Lifecycle Hooks to tap into important events exposed by Angular.
Back to top
:marked
### Implement Lifecycle Hooks Interfaces
#### Style 09-01
- Implement the lifecycle hook interfaces.
**Why?**: We will avoid unintentionally not calling the hook if we misspell the method.
```
/* avoid */
import {Component} from 'angular2/core';
@Component({
selector: 'toh-button',
template: `