Angular 2

Angular2 - Mikä se on?

Framework joka on tarkoitettu Single page application (SPA)-kehitykseen
Tarjoaa webapplikaatioiden yleisimmin tarvitsemat osat
- Http / AJAX
- Data binding (Yhdistä View ja Modelin data)
- Tapahtumakäsittely
- Router
Antaa ohjelmalle rakenteen jota on helppo noudattaa
Ohjelmoidaan käyttäen TypeScriptia

Angular2 ohjelman osat

Component
- Sisältää komponentin pohjan (template) ja tyylit
- Pääsääntöisesti ei pitäisi sisältää logiikkaa
Service
- Palvelut sisältävät datan käsittelyyn liittyvän logiikan
  esim. Tee API-kutsu -> käsittele vastaus -> palauta kutsujalle
- Käytetään esim. komponenteista
Router
- Huolehtii oikean sivun näyttämisestä (esim. saattaa “post/:id” näyttää viestin jolle kuuluu annettu id)
Muita osia:
- Pipes, Directives ym.

Component

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1>'
})
export class AppComponent { 
    title = "Hello world!"
}

... 
<body>
    <my-app>Loading...</my-app>
</body>
...

Service

import {Injectable} from 'angular2/core';
import {Observable} from 'Rxjs/Observable';


@Injectable()
export class HelloWorldService {
    getHelloWorld() {
        return Observable.of("Hello world");
    }
}

import {Component, OnInit} from 'angular2/core';
import {HelloWorldService} from './hello-world.service';

@Component({
    selector: 'my-app',
    template: '<h1 *ngIf="title">{{title}}</h1>'
})
export class AppComponent implements OnInit { 
    title;
    constructor(private helloService: HelloWorldService) {}

    ngOnInit() {
        this.helloService.getHelloWorld().subscribe(hello => this.title = hello);
    }
}

Tapahtumakäsittely

import {Component, OnInit} from 'angular2/core';
import {HelloWorldService} from './hello-world.service';

@Component({
    selector: 'my-app',
    template: '
        <h1 *ngIf="title">{{title}}</h1>
        <div *ngFor="#hello of hellos">{{hello}}</div>
        <button (click)="addHello()">add hello </button>
    '
})
export class AppComponent implements OnInit { 
    title: string;
    hellos: string[] = [];
    constructor(private helloService: HelloWorldService) {}

    ngOnInit() {
        this.helloService.getHelloWorld().subcribe(hello => this.title = hello);
    }

    addHello() {
        this.helloService.getHelloWorld().subsribe(hello => this.hellos.push(hello));
    }
}

HTTP

import {Injectable} from 'angular2/core';
import {Observable} from 'Rxjs/Observable';
import 'rxjs/map';

import {Http} from 'angular2/http'

@Injectable()
export class HelloWorldService {
    constructor(http: Http) {}
    private helloWorldApi: string = ...
    getHelloWorld() {
        return http.get(this.helloworldApi)
            .map(response => response.json().hello)
            .catch(Observable.throw(error || "Server error");
    }
}

//  Hello world API response
//  {
//      hello: "Hello world!"
((  }

Demo

http://olemstrom.me:3000/