Angular ngInclude vs Template Directive (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<div ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="item in includeItems">
        <div ng-include="item.template"></div>
    </div>
    <div ng-repeat="item in directiveItems">
        <div item-directive="item"></div>
    </div>
</div>

<script>
    angular
        .module("testApp", [])
        .directive("itemDirective", function() {
            return {
                restrict: "A",
                scope: false,
                replace: false,
                transclude: false,
                template: "id: {{ item.id }}",
                link: function($scope, $element, $attributes) {
                }
            };
        })
        .controller("testCtrl", function($scope, $templateCache) {
            $scope.items = [];
            $scope.includeItems = [];
            $scope.directiveItems = [];

            for (var i = 0; i < 10; i ++)
                $scope.items.push({ id: i, template: "item.tmpl" });

            $templateCache.put("item.tmpl", "id: {{ item.id }}");

            window.testScope = $scope;
        });
</script>

Setup

window.testScope.includeItems = [];
    window.testScope.directiveItems = [];
    window.testScope.$digest();

Teardown


    window.testScope.includeItems = [];
    window.testScope.directiveItems = [];
    window.testScope.$digest();

Test runner

Ready to run.

Testing in
TestOps/sec
ngInclude
window.testScope.includeItems = window.testScope.items;
window.testScope.$digest();
window.testScope.$apply(function() {
    deferred.resolve();
});
ready
Template Directive
// async test
window.testScope.directiveItems = window.testScope.items;
window.testScope.$digest();
window.testScope.$apply(function() {
    deferred.resolve();
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.