Angular 2

An Introduction

The Basics

Angular 2 is a framework for building client applications in HTML and JavaScript.

Moving parts: directives (components and other types), templates, and services

It's modular and freshly re-written (from Angular v1).

Components

Components manage a given part of the view (page).

Application logic for views are handled by a component class.

Component instances are declared using custom elements.

@Component({
  selector : 'ye-olde-component',
  template : `<p>sup</p>`
})
class YeOldeComponent {
  constructor() {
    // ...
  }
}

/*
  <ye-olde-component></ye-olde-component>
*/

This class goes from being a plain class to a component by adding metadata, typically through decorators

Directives

Structural directives let you manage control flow and rendering of the DOM: `*ngFor`, `*ngIf`, etc.

Attribute directives alter the behavior or presentation of existing elements: `ngModel`, `ngClass`, etc.

<p *ngIf='thingsAreBad'>{{warning}}</p>

<div [ng-class]='classMap'>oh hey</div>

Services

The purpose of services is to handle the 'heavy lifting' in applications: marshaling data, configuration, communication, etc.

const SPELLS = new Map()
  .set('Lightning Bolt', { damage: 'pretty-good' });

class Wizard extends PlayerClass {
  getSpell(spell) {
    return SPELLS.get(spell);
  }
}