{{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
### Single Responsibility
#### Style 07-42
- Services should have a [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is encapsulated by its context. Once a service begins to exceed that singular purpose, a new one should be created.
Back to top
:marked
## Data Services
### Separate Data Calls
#### Style 08-50
- 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.
```typescript
// recommended
export class HeroListComponent implements OnInit {
heroes: Hero[];
filteredHeros = this.heroes;
constructor(private heroService: HeroService) { }
getHeros() {
this.heroes = [];
this.heroService.getHeros()
.subscribe(heroes => {
this.heroes = this.filteredHeros = heroes;
},
error => {
console.log('error occurred here');
console.log(error);
},
() => {
console.log('completed');
});
}
ngOnInit() {
this.getHeros();
}
}
```
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-03
- Implement the lifecycle hook interfaces.
**Why?**: We will avoid uninteionally not calling the hook if we misspell the method.
```typescript
/* avoid */
import {Component} from 'angular2/core';
@Component({
selector: 'toh-button',
template: `...`
})
class ButtonComponent {
onInit() { // mispelled
console.log('The component is initialized');
}
}
```
```typescript
/* recommended */
import {Component, OnInit} from 'angular2/core';
@Component({
selector: 'toh-button',
template: `...`
})
class ButtonComponent implements OnInit {
ngOnInit() {
console.log('The component is initialized');
}
}
```
Back to top
:marked
## Routing
Client-side routing is important for creating a navigation flow between a component tree hierarchy, and composing components that are made of many other child components.
Back to top
:marked
### Component Router
#### Style 10-30
- Separate route configuration into a routing component file, also known as a component router.
- Use a `