Angular 2 Universe

by Denis Zaichenko @MrZaYaC

Front-end Team Lead at betbull

July 2016

TypeScript
Angular 2
ngCommunity

TypeScript

TypeScript

C++

Java


TypeScript

Types

  • boolean
  • number
  • string
  • array
  • tuple
  • enum
  • any
  • void

 

TypeScript

Tuple

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

TypeScript

Enum

enum Color {Red, Green, Blue};
let c: Color = Color.Green;
// c = 1
enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green;
// c = 2
enum Key {Enter = 13, LeftArrow = 37, RightArrow = 39};

switch (event.keyCode) {
    case Key.Enter:
        // do stuff
        break;
}

TypeScript

Any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
let list: any[] = [1, true, "free"];

list[1] = 100;

TypeScript

Interfaces

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
interface ClockInterface {
    tick();
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = new DigitalClock(12, 17);
let analog = new AnalogClock(7, 32);
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

 Angular 2

  • Web components

  • Pipes
  • RxJS Observable
  • Async routes

 Angular 2

Directives

Components
@Component({
  selector: 'my-demo',
  templateUrl: 'app/my-demo.component.html',
  styleUrls:  ['app/my-demo.component.css'],
  directives: [DemoDetailComponent]
})
Structural directives
<div *ngIf="hero">{{hero}}</div>
<div *ngFor="let hero of heroes">{{hero}}</div>
<div [ngSwitch]="status"></div>
Attribute directives
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

 Angular 2

Lifecycle hooks

Directives and Components

  • ngOnInit
  • ngOnDestroy
  • ngOnChanges
  • ​ngDoCheck

Components only

  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ​ngAfterViewChecked

 Angular 2

Pipes


      <p>The hero's birthday is {{ birthday | date:"fullDate" }} </p>

<p>The hero's birthday is {{ birthday | date:"fullDate" | uppercase }} </p>

 Angular 2

Async Routes

@RouteConfig([
  { path: '/', component: Home, name: 'home' },
  new AsyncRoute({
    path: '/about',
    loader: () => System.import('./components/about/about').then(m => m.About),
    name: 'about'
  })
])
@RouteConfig([
  { path: '/', component: Home, name: 'home' },
  {
    path: '/about',
    component: componentProxyFactory({
      path: './components/about/about',
      provide: m => m.About
    }),
    name: 'about'
  }
])

ngCommunity

John Papa

Official Angular 2 style guide

Write Angular 2 with style.

ngCommunity

John Papa

Code snipets

ngCommunity

Webstorm

Live Templates

ngCommunity

Server rendering / ngUniversal

Node JS

.Net

PHP/Twig

Java

ngCommunity

Web Workers

ngCommunity

angular-cli

ngCommunity

Angular Augury

ngCommunity

Angular Mobile


        ng new --mobile

ngCommunity

Angular as platform

Links

Angular 2 Universe

By Denis Zaichenko

Made with Slides.com

Angular 2 Universe

  • 2,437