by Gerard Sans | @gerardsans
800
500
AngularConnect - 27-28th Sept
ES6 (ES2015)
TypeScript
<!DOCTYPE html>
<html>
<head>
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.17?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('app');</script>
</head>
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { App } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
import { Component } from '@angular/core';
@Component({
selector: 'my-app', // <my-app>Loading...</my-app>
template: `...`
})
export class App {
constructor() { }
}
import { Component } from '@angular/core';
@Component({
selector: 'home', // <home></home>
styles: [`h1 { color: red }`],
template: `<h1>Home</h1>`
})
export class Home { ... }
import { Component, OnChanges, OnInit, OnDestroy } from '@angular/core';
@Component()
export class myComponent implements OnChanges, OnInit, OnDestroy {
/* 1 */ constructor() { }
// called when an input or output binding changes
/* 2 */ ngOnChanges(changes) { }
// after child initialisation
/* 3 */ ngOnInit() { }
// just before is destroyed
/* 4 */ ngOnDestroy() { }
}
Syntax | Binding type |
---|---|
<h1>{{title}}</h1> <input [value]="firstName"> <li [class.active]="isActive"></li> <div [style.width.px]="mySize"> |
Interpolation Property Class Style |
<button (click)="onClick($event)"> | Event |
[(ngModel)]="data.value" | Two-way |
beta12
1
2
3
Stream
//Observable constructor
let simple$ = Rx.Observable.create(observer => {
try {
//pushing values
observer.next(1);
observer.next(2);
observer.next(3);
//complete stream
observer.complete();
}
catch(e) {
//error handling
observer.error(e);
}
});
/*
a$ ---1---2---3|
*/
let a$ = Rx.Observable.of(1,2,3);
let subscription = a$.subscribe({
next: x => console.log(x),
error: x => console.log('#'),
complete: () => console.log('|')
});
let subscription = twits$.subscribe(
twit => feed.push(twit),
error => console.log(error),
() => console.log('done')
);
setTimeout(() => subscription.unsubscribe(), 5000);
Rx.Observable.of(1)
.subscribe({
next: x => console.log(x),
complete: () => console.log('3')
});
console.log('2');
// a) 1 2 3
// b) 2 1 3
// c) 1 3 2
// d) 3 2 1
Observable.of(1)
.subscribeOn(Rx.Scheduler.async)
.subscribe({
next: (x) => console.log(x),
complete: () => console.log('3')
});
console.log('2');
// a) 1 2 3
// b) 2 1 3
// c) 1 3 2
// d) 3 2 1
// app.module.ts
import { HttpModule } from '@angular/http';
@NgModule({
imports: [HttpModule], ...
})
export class AppModule {}
// usersService.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class UsersService {
constructor(private http: Http) { }
get() {
return this.http.get('/assets/users.json')
.map(response => response.json().users)
.retryWhen(errors => errors.delay(2000));
}
}
import { Component } from '@angular/core';
import { UsersService } from '../services/usersService';
@Component({
selector: 'users',
template: `<h1>Users</h1>
<tr *ngFor="let user of userslist | async">
<td>{{user.username}}</td>
</tr>`
})
export class Users {
private userslist;
constructor(users: UsersService) {
this.userslist = users.get();
}
}