Angular.Apps.Fast

HTML

<body ng-app="App">
    <new-app module="'App.Numbers'">
        <div numbers>
            <div>{{numbers.length}}</div>
            <span ng-repeat="number in numbers">{{number}},</span>
        </div>
    </new-app>
    <new-app module="'App.Mover'">
        <div mover ng-mousemove="OnMouseMove($event)">
            X:{{X}}, Y: {{Y}}
        </div>
    </new-app>
</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('newApp', function () {
    return{
        restrict: 'EA',
        transclude: true,
        scope: {
            module: '='
        },
        link: function (scope, element, attr, ctrl, trasclude) {
            var _transclude = trasclude;
            var div = document.createElement('app');

            var module = angular.module(scope.$id, [scope.module]).run(['$rootScope', function ($rootScope) {
                scope.$on('$destroy', function() {
                    $rootScope.$destroy();
            });
            _transclude($rootScope, function (el) {
                angular.element(div).append(el);
                element.append(div);
            });
        }]);
    angular.bootstrap(div, [scope.$id]);
}
    };});
    angular.module('App.Numbers',[]).directive('numbers', function () {
        return {
            restrict: "EA",
            link: function (scope) {
                scope.numbers = [];
                    for (var i = 0; i < 20000; i++) {
                        scope.numbers.push(i);
                    }
            }
        }
    });

    angular.module('App.Mover',[]).directive('mover', function () {
        return {
            restrict: "EA",
            link: function (scope) {
                scope.X = 0; scope.Y = 0;
                scope.OnMouseMove = function ($event) {
                    scope.X = $event.clientX;
                    scope.Y = $event.clientY;
                }
            }
        }
    });