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/

Angular2

By Oscar Lemström

Made with Slides.com

Angular2

  • 792

More from Oscar Lemström