Michał Zdunek
var name: string;
var n: number;
var active: boolean;
var i = 0; //Automatyczne typ number
function add(left: number, right: number): number {
return left + right;
}
//Równoważne deklaracje
var x: any;
var y;
var z: { a; b; }; //To samo, co z: { a: any; b: any; }
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
alert(myGenericNumber.add(myGenericNumber.zeroValue, 4)); //4
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
declare var $: any;
$ npm install typings --global
$ typings install jquery --ambient --save
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
app/main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
@Component({ ... })
@RouteConfig([
{
path:'/cats',
name: 'CatList',
component: CatListComponent
},
{
path:'/cat/:id',
name: 'CatDetail',
component: CatDetailComponent
}
])
export class AppComponent { }
@Component({
selector: 'cat-detail',
template: `
<h1>{{name}}</h1>
<button (click)="onMeow()">Meow!</button
`
})
export class CatDetailComponent {
@Input() name: Hero;
@Output() meow = new EventEmitter();
onMeow() {
this.meow.emit();
}
}
//Target
<img [src] = "catImage">
<img bind-src = "catImage">
//Event
<button (click) = "onSave()">Save</button>
<button on-click = "onSave()">Save</button>
//Two-way
<input [(ngModel)]="heroName">
<input [(ngModel)]="heroName">
//String literal
<cat-detail name="Filemon"></cat-detail>
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
...
@Component({
...
directives: [HighlightDirective]
...
})
<p *ngIf="condition">
Display cats
</p>
//lub
<template [ngIf]="condition">
<p>
Display cats
</p>
</template>
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
//Dependency Injection - opcja 1
bootstrap(AppComponent, [CatService, Logger]);
//Dependency Injection - opcja 2
@Component({
providers: [Logger]
})