anchor.diff:  
     ```typescript
     // avoid
  -  export class SessionListComponent implements OnInit {
  -    sessions: Session[];
  -
  -    constructor(private _http: Http) { }
  -
  -    getSessions() {
  -      this.sessions = [];
  -      this._http.get(sessionsUrl)
  -        .map((response: Response) => <Session[]>response.json().data)
  -        .catch(this._exceptionService.catchBadResponse)
  -        .finally(() => this._spinnerService.hide())
  -        .subscribe(sessions => this.sessions = sessions);
  +  export class HeroListComponent implements OnInit {
  +    heroes: Hero[];
  +
  +    constructor(private http: Http) { }
  +
  +    getHeros() {
  +      this.heroes = [];
  +      this.http.get(heroesUrl)
  +        .map((response: Response) => <Hero[]>response.json().data)
  +        .catch(this.exceptionService.catchBadResponse)
  +        .finally(() => this.spinnerService.hide())
  +        .subscribe(heroes => this.heroes = heroes);
       }
       
   
       ngOnInit() {
  -      this.getSessions();
  +      this.getHeros();
       }
     }
     ```
       
     ```typescript
     // recommended
  -  export class SessionListComponent implements OnInit {
  -    sessions: Session[];
  -
  -    constructor(private _sessionService: SessionService) { }
  -
  -    getSessions() {
  -      this.sessions = [];
  -      this._sessionService.getSessions()
  -        .subscribe(sessions => this.sessions = sessions);
  +  export class HeroListComponent implements OnInit {
  +    heroes: Hero[];
  +
  +    constructor(private heroService: HeroService) { }
  +
  +    getHeros() {
  +      this.heroes = [];
  +      this.heroService.getHeros()
  +        .subscribe(heroes => this.heroes = heroes);
       }
   
       ngOnInit() {
  -      this.getSessions();
  -    }
  -  }
  -  ```
  -
  -<a href="#toc">Back to top</a>
  -
  +      this.getHeros();
  +    }
  +  }
  +  ```
  +
  +<a href="#toc">Back to top</a>
  +:marked
  +  ### Don't Prefix Output Properties
  +  <a id="05-15"></a>
  +  #### Style 05-15
  +
  +    - Name events without the prefix `on`.
  +
  +    - Name your event handler methods with the prefix `on` followed by the event name.
  +
  +      **Why?**: This is consistent with built-in events such as button clicks.
  +
  +      **Why?**: Angular allows for an [alternative syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
  +      
  +  ```typescript
  +  /* avoid */
  +  @Component(...)
  +  export class HeroComponent {
  +    @Output() onSavedTheDay = new EventEmitter<boolean>();
  +  }
  +
  +  <toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>
  +  ```
  +  
  +  ```ts
  +  /* recommended */
  +  @Component(...)
  +  export class HeroComponent {
  +    @Output() savedTheDay = new EventEmitter<boolean>();
  +  }
  +
  +  <toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>
  +  ```
  +
  +<a href="#toc">Back to top</a>
  +:marked
  +  ### Put Presentation Logic in the Component Class
  +  <a id="05-16"></a>
  +  #### Style 05-16
  +
  +    - Put presentation logic in the Component class, and not in the template.
  +
  +      *​*Why?**​: Logic will be contained in one place (the Component class) instead of being spread in two places.
  +      
  +      *​*Why?**​: Keeping the logic of the components in their controller, instead of template will improve testability, maintability, reusability.
  +  
  +    ```typescript
  +    /* avoid */
  +    @Component({
  +      selector: 'toh-heroes-list',
  +      template: `
  +        <section>
  +          Your list of heroes:
  +          <hero-profile *ngFor="#hero of heroes" [hero]="hero">
  +          </hero-profile>
  +          Total powers: {{totalPowers}}<br>
  +          Average power: {{totalPowers / heroes.length}}
  +        </section>
  +      `
  +    })
  +    export class HeroesListComponent {
  +      heroes: Hero[];
  +      totalPowers: number;
  +    }
  +    ```
  +    
  +    ```typescript
  +    /* recommended */
  +    @Component({
  +      selector: 'toh-heroes-list',
  +      template: `
  +        <section>
  +          Your list of heroes:
  +          <hero-profile *ngFor="#hero of heroes" [hero]="hero">
  +          </hero-profile>
  +          Total powers: {{totalPowers}}<br>
  +          Average power: {{avgPower}}
  +        </section>
  +      `
  +    })
  +    export class HeroesListComponent {
  +      heroes: Hero[];
  +      totalPowers: number;
  +      avgPower: number;
  +    }
  +    ```
  +
  +<a href="#toc">Back to top</a>
  +:marked
  +  ## Directives
  +
  +  ### Use lowerCamelCase for Directive Selectors 
  +  <a id="06-01"></a>
  +  #### Style 06-01
  +  
  +    - Use `lowerCamelCase` for naming the selectors of your directives.
  +
  +      **Why?**: Keeps the names of the properties defined in the components that are bound to the view consistent with the attribute names.
  +
  +      **Why?**: The Angular 2 HTML parser is case sensitive so `lowerCamelCase` attributes are well supported.
  +
  +    - Use custom prefix for the selector of your directives (for instance below is used the prefix `sg` from **S**tyle **G**uide).
  +
  +      **Why?**: This way you will be able to prevent name collisions.
  +
  +  ```typescript
  +  /* avoid */
  +  @Directive({
  +    selector: '[validate]'
  +  })
  +  class ValidateDirective {}
  +  ```
  +
  +  ```typescript
  +  /* recommended */
  +  @Directive({
  +    selector: '[tohValidate]'
  +  })
  +  class ValidateDirective {}
  +  ```
  +  
  +<a href="#toc">Back to top</a>
   :marked
     ## Services
   
     ### Singletons
  -  <a id="040"></a>
  -  #### Style 040
  +  <a id="07-40"></a>
  +  #### Style 07-40
   
       - Services are singletons withint he same injector. They should be used for sharing data and functionality.
   
     ```typescript
     // service  
     import { Injectable } from 'angular2/core';
  -  import { Session } from './session';
  +  import { Hero } from './hero';
   
     @Injectable()
     export class HeroService {
       getHeroes() {
  -      return this._http.get('api/sessions')
  -        .map((response: Response) => <Session[]>response.json().data)
  +      return this.http.get('api/heroes')
  +        .map((response: Response) => <Hero[]>response.json().data)
       }
     }
     ```
  
positive.code:   ```typescript
    /* recommended */
  
    // speaker-list.component.ts
    import { Component, OnInit } from 'angular2/core';
  
    import { SpeakerService } from './common/speaker.service';
    import { Speaker } from './common/speaker';
  
    @Component({
      selector: 'my-speakers',
      template: `
          <pre>{{speakers | json}}</pre>  
        `
    })
    export class SpeakerListComponent implements OnInit{
      speakers: Speaker[] = [];
  
      constructor(private _speakerService: SpeakerService) {}
  
      ngOnInit() {
        this._speakerService.getSpeakers().then(speakers => this.speakers = speakers);
      }
    }
    ```
  
negative.code:   ## Data Services
  
    ### Separate Data Calls
    <a id="08-50"></a>
    #### 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.
  
  