component

markup and functionality

import { Component } from '@angular/core';

@Component({
  selector: 'animal',
  template: `<h1>{{name}}</h1>`
})
export class AnimalComponent { name = 'Zebra'; }

anatomy of a

component class

export class AnimalComponent { 
    private name: string = 'Zebra'; 

    private isMammal: boolean = true;

    private speak(): void {
        alert(this.name);
    }
}

logic

template

<h1>{{name}}</h1>

<p *ngIf="isMammal">I'm a mammal!</p>

view

metadata

@Component({
  selector: 'animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css'],
  providers: [AnimalService]
})

imports and dependencies

services

@Component({
  selector: 'animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css'],
  providers: [AnimalService]
})

generic logic

data-binding

hook in your data

<!-- interpolation -->
<p>Hi {{user.firstName}}!</p>


<!-- property binding -->
<user-profile [user]="userData"></user>

<!-- property binding -->
<button (click)="initBlinkingMarquee()">
    Gimme some marquee
</button>

<!-- two-way binding -->
<input [(ngModel)]="hero.name" />

structural directives

<li *ngFor="let hero of heroes"></li>

<hero-detail *ngIf="selectedHero"></hero-detail>

alter layout by adding, removing, and replacing elements in DOM

attribute directives

<input [(ngModel)]="hero.name">

<button myBlinkingBg bgColor="red"></button>

alter the appearance or behavior of an existing element

Angular CLI

based on ember CLI

• scaffold out a project
• generate boilerplate for components, services, modules, etc.
• serve & test
• use webpack to create a dist build

TypeScript

makes Javascript fun/tolerable???

• ES6/7 transpiles to ES5
• static typing
• generics
• arrow functions
• promises