Angular2 vs Angular1

Apr 14 2016

Angular 2 is built as "lego bricks", where every view and it's model (MVC talking) are a "component" that can define it's own onInit, onChange and onDestroy callbacks, giving it an atomic nature from one hand, and callbacks such as afterContentInit or afterViewInit which gives it a container nature from the other hand.
Giving each component it's own life-cycle and giving each component the possibility to contain or be contained, makes it much easier to dynamically build an application, or a "lego castle" if you wish. Opposed to angular 1 where the controller is the major parent and it mainly contains a large html and directives.

Here is an example from angular's official website's tutorial on angular 2 in typescript:

@Component({
    selector: 'my-app',
    template:`
      <h1>{{title}}</h1>
      <div *ngIf="selectedHero">
        ...
        ...
        ...
      </div>
    `,
    styles:[`
      .selected{
        background-color: #CFD8DC !important;
        color: white;
      }

      .heroes{
        margin: 0 0 2em 0;
        list-style-type: none;
        padding: 0;
        width: 15em;
      }
      ...
      ...
      ...
  `]
})


export class AppComponent{
  title = 'Tour of Heroes';
  selectedHero: Hero;
  onSelect(hero: Hero){
    this.selectedHero = hero;
  }
}

You can see that it has a template and styles properties (the view), and an AppComponent class that is used as the controller, Basically a unified view and controller.

The directive's role is much smaller because the component is basically taking their job from angular 1. There are basically 2 reasons to use them in angular 2: to alternate an element's attribute (such as ngStyle for example in angular 1), or\and to alternate an element's structure (such as ngRpeat in angular 1). Creating that type of directive is pretty much like you would in angular 1 except the use of the