July 2016
C++
Java
Types
boolean
number
string
array
tuple
enum
any
void
Tuple
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
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;
}
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;
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;
Web components
Pipes
RxJS Observable
Async routes
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';
}
}
Directives and Components
ngOnInit
ngOnDestroy
ngOnChanges
ngDoCheck
Components only
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
<p>The hero's birthday is {{ birthday | date:"fullDate" }} </p>
<p>The hero's birthday is {{ birthday | date:"fullDate" | uppercase }} </p>
@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'
}
])
Official Angular 2 style guide
Code snipets
Live Templates
Node JS
.Net
PHP/Twig
Java
ng new --mobile
Server rendering - https://github.com/angular/universal
John Papa - style guide, snipets (video)
WebStorm live templates - github
Async routes - ProxyFactory
Angular as platform - video
Universal Windows App - github
Angular Universal - universal.angular.io (video)
Angular CLI - cli.angular.io (video)
Angular Mobile - mobile.angular.io (video)
Angular Augury - augury.angular.io (video)