Wstęp do Angular2

Michał Zdunek

Angular2

  • Obecnie w wersji beta
  • Dostępny w wersjach dla Javascript, Typescript oraz Dart
  • Napisany w Typescript

Typescript - typy

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; }

Typescript - interfejsy

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);

Typescript - typy generyczne

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

Typescript - dekoratory

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;
    }
}

Typescript - definicje

declare var $: any;
  • Definicje dla popularnych bibliotek dostępne na definitelytyped.org
  • Można użyć również narzędzia typings
$ npm install typings --global
$ typings install jquery --ambient --save

Angular2 - bootstrap

  • 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);

Angular2 - Routing

@Component({ ... })
@RouteConfig([
  {
    path:'/cats', 
    name: 'CatList', 
    component: CatListComponent
   },
  {
    path:'/cat/:id',
    name: 'CatDetail',
    component: CatDetailComponent
  }
])
export class AppComponent { }

Angular2 - Komponenty

@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();
  }
}

Angular2 - Data binding

//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>

Angular2 - dyrektywy

@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}
...
@Component({
  ...
  directives: [HighlightDirective]
  ...
})

Angular2 - dyrektywy cd.

<p *ngIf="condition">
  Display cats
</p>
//lub
<template [ngIf]="condition">
  <p>
    Display cats
  </p>
</template>

Angular2 - serwisy

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]
})

Koniec

  • angular.io
  • https://github.com/angular/angular