Benchmark ng-repeat options

Test ng-repeat for long lists

by Owen Hancock

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js"></script>
<div id='Apps'></div>

<ul id='cycleResults'>

</ul>
<div id="result">

</div>
<br>
<button id="btn">
Run Tests
</button>

JavaScript

function TestController () {
    var $ctrl = this;

    angular.extend($ctrl, {
        book: {
            page: 0,
            words: ['Home','Learn','Develop','Discuss'],
            pages: [
            ['Home', 'Learn'],
            ['Develop', 'Discuss']
            ],
            htmlList: (function () {
                var ret = '';
                ['Home','Learn','Develop','Discuss'].forEach(function (item) {
                    ret += '<li>' + item + '</li>';
                });
                return ret;
            })()
        }
    });
}

angular.module('tests', ['ngSanitize'])
.component('longList', {
    template: '<ul><li ng-repeat="word in $ctrl.book.words">{{word}}</li></ul>',
    controller: TestController
})
.component('pageList', {
    template: '<ul><li ng-repeat="word in $ctrl.book.pages[$ctrl.page]">{{word}}</li></ul>',
    controller: TestController
})
.component('htmlList', {
    template: '<ul ng-bind-html="$ctrl.book.htmlList"></ul>',
    controller: TestController
});


function AngularTester (appId) {
    var $ctrl = this,
    apps, appNode, $rootScope, $injector;

    apps = angular.element('#Apps');
    appNode = angular.element('<div>');
    apps.append(appNode);
    angular.bootstrap(appNode, ['tests']);

    $injector = appNode.injector();
    $rootScope = $injector.get('$rootScope');

    angular.extend($ctrl, {
        addModule: addModule,
        digest: digest,
        destroy: destroy
    });

    function addModule (moduleName) {
        var module = angular.element('<' + moduleName + '>'),
        $compile = $injector.get('$compile');

        $compile(module)($rootScope);
        appNode.append(module);
    }

    function digest () {
        $rootScope.$digest();
    }

    function destroy () {
        $rootScope.$destroy();
        appNode.remove();
        
        $ctrl = null;
        appNode = null;
        $rootScope = null;
        $injector = null;
    }
}

function setupTest (appId, module) {
    var ret =...