carbonrobot/template.html

## template.html
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="main.css">

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="bower_components/angular-cache/dist/angular-cache.min.js"></script>
    <script src="bower_components/lodash/lodash.min.js"></script>
    <script>
        angular.module('app', ['ngSanitize', 'angular-cache'])
            .run(function(contentService){

            })
            .directive('cmsContent', function(contentService){
                return {
                    restrict: 'EA',
                    scope: {
                        path: '@'
                    },
                    link: function(scope, element, attrs){
                        var path = scope.path || attrs.cmsContent;
                        contentService.fetch(path).then(function(data){
                            element.html(data);
                        });
                    }
                };
            })
            .factory('contentService', function($q, $http, CacheFactory){

                CacheFactory('cs', {
                    maxAge: 15 * 60 * 1000,
                    storageMode: 'localStorage'
                });

                return {
                    fetch: fetch,
                    warmup: warmup
                };

                // fetches content for a given path
                // path follows the format {namespace}.{name}.{name}
                // the namespace corresponds to an endpoint
                function fetch(path){

                    var deferred = $q.defer(),
                        parts = path.split('.'),
                        ns = parts[0],
                        cp = parts.slice(1).join('.');

                    _fetch(ns).then(function(cache){
                        deferred.resolve(_.get(cache, cp));
                    });
                    return deferred.promise;
                }

                function warmup(ns){
                    _fetch(ns);
                }

                function _fetch(ns){
                    var deferred = $q.defer();
                     $http.get(ns + '.json', {
                         cache: CacheFactory.get('cs')
                     }).success(function(data){
                            deferred.resolve(data);
                        });
                    return deferred.promise;
                }

            })
            .controller('default', function(){

            });
    </script>
</head>

<body>
    <p>Templating Performance Test</p>
    <div ng-app="app">
        <div ng-controller="default">

            <cms-content path="content.msgs.welcome"></cms-content>
            <div cms-content="content.msgs.welcome"></div>

            <cms-content path="crumpet.msgs.welcome"></cms-content>
            <div cms-content="crumpet.msgs.welcome"></div>

        </div>
    </div>
</body>
</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="main.css">

	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
	<script src="bower_components/angular-cache/dist/angular-cache.min.js"></script>
	<script src="bower_components/lodash/lodash.min.js"></script>
	<script>
	angular.module('app', ['ngSanitize', 'angular-cache'])
	.run(function(contentService){

	})
	.directive('cmsContent', function(contentService){
	return {
	restrict: 'EA',
	scope: {
	path: '@'
	},
	link: function(scope, element, attrs){
	var path = scope.path \|\| attrs.cmsContent;
	contentService.fetch(path).then(function(data){
	element.html(data);
	});
	}
	};
	})
	.factory('contentService', function($q, $http, CacheFactory){

	CacheFactory('cs', {
	maxAge: 15 * 60 * 1000,
	storageMode: 'localStorage'
	});

	return {
	fetch: fetch,
	warmup: warmup
	};

	// fetches content for a given path
	// path follows the format {namespace}.{name}.{name}
	// the namespace corresponds to an endpoint
	function fetch(path){

	var deferred = $q.defer(),
	parts = path.split('.'),
	ns = parts[0],
	cp = parts.slice(1).join('.');

	_fetch(ns).then(function(cache){
	deferred.resolve(_.get(cache, cp));
	});
	return deferred.promise;
	}

	function warmup(ns){
	_fetch(ns);
	}

	function _fetch(ns){
	var deferred = $q.defer();
	$http.get(ns + '.json', {
	cache: CacheFactory.get('cs')
	}).success(function(data){
	deferred.resolve(data);
	});
	return deferred.promise;
	}

	})
	.controller('default', function(){

	});
	</script>
	</head>

	<body>
	<p>Templating Performance Test</p>
	<div ng-app="app">
	<div ng-controller="default">

	<cms-content path="content.msgs.welcome"></cms-content>
	<div cms-content="content.msgs.welcome"></div>

	<cms-content path="crumpet.msgs.welcome"></cms-content>
	<div cms-content="crumpet.msgs.welcome"></div>

	</div>
	</div>
	</body>
	</html>