Angular.Apps.Fast

by garmashnikolay

HTML

<body ng-app="App">
    <div numbers>
        <div>{{numbers.length}}</div>
        <span ng-repeat="number in numbers">{{number}},</span>
    </div>
    <div mover>
        X:{{X}}, Y: {{Y}}
    </div>
</body>

CSS

html, body {
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    div[numbers], div[mover] {
        position: absolute;
        width: 100%;
        height: 50%;
        background: lightgray;
    }
    div[mover]{
        top: 50%;
    }

JavaScript

angular.module('App',[]).
    directive('numbers', function () {
        return {
            restrict: "EA",
            link: function (scope) {
                scope.numbers = [];
                    for (var i = 0; i < 20000; i++) {
                        scope.numbers.push(i);
                    }
            }
        }
    }).
    directive('mover', function () {
        return {
            restrict: "EA",
            scope: true,
            link: function (scope, element) {
                scope.X = 0; scope.Y = 0;
                scope.OnMouseMove = function ($event) {
                    scope.X = $event.clientX;
                    scope.Y = $event.clientY;
                    scope.$digest();
                }
                element.on("mousemove", scope.OnMouseMove)
            }
        }
    });