Angular 2

y la madre que lo parió

"use strict";
angular.module('com.2fdevs.videogular', []).directive('vgPlayer',
    [function () {
        return {
            restrict: 'E',
            template: '<video ng-click="ctrl.playPause()" controls>'+
                '<source ng-repeat="video in sources" src="{{video.src}}" type="{{video.type}}">'+
            '</video>',
            scope: {sources: '='},
            controllerAs: 'ctrl',
            controller: ['$scope', function($scope) {
                this.isPlaying = false;

                this.playPause = function playPause() {
                    if (this.isPlaying) {
                        $scope.video[0].pause();
                    }
                    else {
                        $scope.video[0].play();
                    }

                    this.isPlaying = !this.isPlaying;
                };
            }],
            link: function (scope, elem, attr) {
                scope.video = elem.find("video");
            }
        }
    }]
);

Directives en Angular 1.X

import {Component, Template, For} from 'angular2/angular2';

@Component({
    selector: 'vg-player',
    bind: {
        'src': 'src'
    }
})
@Template({
    url: 'scripts/com/2fdevs/videogular/core/vg-player.html',
    directives: [For]
})
export class VideogularPlayer {
    src:String;
    isPlaying:Boolean = false;
    element:HTMLElement;

    constructor() {
        this.element = document.querySelector("vg-player video");
    }

    playPause() {
        this.isPlaying = !this.isPlaying;

        if (this.isPlaying) this.element.play();
        else this.element.pause();
    }
}

WebComponents en Angular 2.X

<video ng-click="ctrl.playPause()" controls>
    <!-- more shit -->
</video>

ng-click

<video (click)="playPause()" controls>
    <!-- more shit -->
</video>

(events)

<video ng-click="ctrl.playPause()" controls>
    <source ng-repeat="video in sources" src="{{video.src}}" type="{{video.type}}">
</video>

ng-repeat

<video (click)="playPause()" controls>
    <source template="for #video of src" [src]="video.src" [type]="video.type">
</video>

template="for #objeto of Array"

<head>
    <link href="styles/vg-player.css">
</head>

<!-- more shit -->

<video ng-click="ctrl.playPause()" controls>
    <source ng-repeat="video in sources" src="{{video.src}}" type="{{video.type}}">
</video>

styles

<style>@import 'styles/videogular.css';</style>

<video (click)="playPause()" controls>
    <source template="for #video of src" [src]="video.src" [type]="video.type">
</video>

<style> @import 'url.css'</style>

DEMO

¡basta de bullshit!

Links para empezar

!GRACIAS!

¿preguntas?

Angular 2 y la madre que lo parió

By Raúl Jiménez

Angular 2 y la madre que lo parió

Un vistazo a la Alpha de Angular 2

  • 2,051

More from Raúl Jiménez