Unboxing Angular 2

alpha 26

Raúl Jiménez

Frontend Architect

elecash@gmail.com

http://twofuckingdevelopers.com

http://www.videogular.com

@elecash

@2fdevs

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
</head>
<body>
    <my-app></my-app>

    <script>System.import('app');</script>
</body>
</html>

Bootstrapping

import {Component, View, NgFor, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'app.html'
})
class MyApp {
    constructor() {
        console.log('Hello World!');
    }
}

bootstrap(MyApp);
import {Component, View, ElementRef} from 'angular2/angular2';
import {Inject} from 'angular2/di';

@Component({
    selector: 'my-component'
})
@View({
    templateUrl: 'my-component/my-component.html'
})
export class MyComponent {
    elem:HTMLElement;

    constructor(@Inject(ElementRef) ref:ElementRef) {
        this.elem = ref.domElement;
    }
}

Creating a component

import {Component, View, ElementRef, bootstrap} from 'angular2/angular2';

import {MyComponent} from 'my-component/my-component';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'app.html',
    directives: [MyComponent]
})
export class MyApp {
    myComp:MyComponent;

    constructor() {
        console.log('Hello World!');
    }
}

bootstrap(MyApp);

Nesting components

<!-- inside app.html -->

<my-component></my-component>
import {Component, View, ElementRef} from 'angular2/angular2';
import {Inject} from 'angular2/di';

@Component({
    selector: 'my-component',
    events: ['onInit']
})
@View({
    templateUrl: 'my-component/my-component.html'
})
export class MyComponent {
    elem:HTMLElement;

    onInit:EventEmitter = new EventEmitter();

    constructor(@Inject(ElementRef) ref:ElementRef) {
        this.elem = ref.domElement;

        setTimeout(() => this.onInitComponent(), 16);
    }

    onInitComponent() {
        this.onInit.next({message: "I'm alive! MWAHAHAHAHA!!!"});
    }
}

Communicating components (sending)

import {Component, View, ElementRef, bootstrap} from 'angular2/angular2';

import {MyComponent} from 'my-component/my-component';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'app.html',
    directives: [MyComponent]
})
export class MyApp {
    myComp:MyComponent;

    constructor() {
        console.log('Hello World!');
    }

    onInitMyComp(event) {
        console.log(event.message);
    }
}

bootstrap(MyApp);

Communicating components (receiving)

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)"></my-component>
import {Directive} from 'angular2/angular2';

@Directive({
    selector: 'my-directive'
})
export class MyDirective {
    constructor() {
        console.log('Hello World!');
    }
}

Creating a directive

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)"></my-component>
<my-directive></my-directive>
import {Directive} from 'angular2/angular2';

@Directive({
    selector: 'my-directive',
    properties: [
        'text: message'
    ]
})
export class MyDirective {
    constructor() {
        console.log('Hello ' + this.text);
    }
}

Adding properties to a directive

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)"></my-component>
<my-directive text="MediterraneaJS"></my-directive>
import {Directive} from 'angular2/angular2';

@Directive({
    selector: 'my-directive',
    properties: [
        'text: message'
    ],
    hostListeners: {
        mouseover: 'onMouseOver()'
    }
})
export class MyDirective {
    constructor() {
        console.log('Hello');
    }

    onMouseOver() {
        console.log(this.text);
    }
}

Host listeners

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)"></my-component>
<my-directive text="MediterraneaJS"></my-directive>
import {Component, View, ElementRef, bootstrap} from 'angular2/angular2';
import {MyComponent} from 'my-component/my-component';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'app.html',
    directives: [MyComponent]
})
export class MyApp {
    myComp:MyComponent;
    myMessage:string;

    constructor() {
        console.log('Hello World!');
        this.myMessage = 'MediterraneaJS';
    }

    onInitMyComp(event) {
        console.log(event.message);
    }
}

bootstrap(MyApp);

Bindable properties

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)"></my-component>
<my-directive [text]="myMessage"></my-directive>
import {Component, View, ElementRef, bootstrap} from 'angular2/angular2';
import {MyComponent} from 'my-component/my-component';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'app.html',
    directives: [MyComponent]
})
export class MyApp {
    myComp:MyComponent;
    myMessage:string;

    constructor() {
        console.log('Hello World!');
        this.myMessage = 'MediterraneaJS';
    }

    onInitMyComp(event) {
        console.log(event.message);
    }

    onClickComponent(event) {
        console.log(event);
    }
}

bootstrap(MyApp);

Events

<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)" (click)="onClickComponent($event)"></my-component>
<my-directive [text]="myMessage"></my-directive>
<!-- inside app.html -->

<my-component (on-init)="onInitMyComp($event)" (click)="onClickComponent($event)"></my-component>
<my-directive [text]="myMessage"></my-directive>

<div>
    <div class="play-button" (click)="myVideo.play()"></div>
    <video #myVideo src="http://static.videogular.com/assets/videos/videogular.mp4" controls>
</div>

References

export class MyService {
    medias:Object = {};

    constructor(){
        super();
    }

    getUsers() {
        return fetch('https://api.github.com/users').then(
            function(response) {
                return response.json();
            }
        );
    }
}

Services

import {Component, View, ElementRef} from 'angular2/angular2';
import {Inject} from 'angular2/di';
import {MyService} from 'services/my-service';

@Component({
    selector: 'my-component',
    events: ['onInit'],
    appInjector: [MyService]
})
@View({
    templateUrl: 'my-component/my-component.html'
})
export class MyComponent {
    elem:HTMLElement;
    service:MyService;
    users:Array;

    onInit:EventEmitter = new EventEmitter();

    constructor(@Inject(ElementRef) ref:ElementRef, service:MyService) {
        this.elem = ref.domElement;
        this.service = service;

        this.service.getUsers.then((users) => { this.users = users; });

        setTimeout(() => this.onInitComponent(), 16);
    }

    onInitComponent() {
        this.onInit.next({message: "I'm alive! MWAHAHAHAHA!!!"});
    }
}

Injecting services

And even more cool things!!

  • Web Components support
  • Router
  • Revamped directives (NgFor, NgIf, etc...)
  • Amazing Dependency Injection
  • Pipes
  • New Forms
  • And more!!

THANK YOU!

QUESTIONS?