Refacto

data/templates.json

@@ -1,6 +1,6 @@
 {
-  "imageTemplate": "<div class='entry-photo'><h2>&nbsp;</h2><div class='entry-img'><span><a href='{{rootDirectory}}{{content.data}}'><img ng-src='{{rootDirectory}}{{content.data}}' alt='entry photo'></a></span></div><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.description}}</div></div></div>",
-  "videoTemplate": "<div class='entry-video'><h2>&nbsp;</h2><div class='entry-vid'><iframe ng-src='{{content.data}}' width='280' height='200' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.description}}</div></div></div>",
-  "noteTemplate": "<div class='entry-note'><h2>&nbsp;</h2><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.data}}</div></div></div>"
+  "image": "<div class='entry-photo'><h2>&nbsp;</h2><div class='entry-img'><span><a href='{{rootDirectory}}{{content.data}}'><img ng-src='{{rootDirectory}}{{content.data}}' alt='entry photo'></a></span></div><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.description}}</div></div></div>",
+  "video": "<div class='entry-video'><h2>&nbsp;</h2><div class='entry-vid'><iframe ng-src='{{content.data}}' width='280' height='200' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.description}}</div></div></div>",
+  "notes": "<div class='entry-note'><h2>&nbsp;</h2><div class='entry-text'><div class='entry-title'>{{content.title}}</div><div class='entry-copy'>{{content.data}}</div></div></div>"
 }
 

js/app.js

@@ -16,13 +16,44 @@ app.factory('DataService', function ($http, URL) {
     };
 });
 
-app.factory('TemplateService', function ($http, URL) {
-    var getTemplates = function () {
-        return $http.get(URL + 'templates.json');
+app.factory('TemplateService', function ($http, $compile, $q, URL) {
+
+    var deferred    = $q.defer(),
+        templates   = null,
+        loadPromise = deferred.promise;
+
+    var loadTemplates = function () {
+        $http.get(URL + 'templates.json').then(function(res){
+            templates = res.data;
+            deferred.resolve();
+        });
+    };
+
+    var getTemplate = function (name) {
+        return templates[name] || '';
     };
 
     return {
-        getTemplates: getTemplates
+        load: function(){
+            loadTemplates();
+
+            return this;
+        },
+
+        compile:function(params){
+            var _compile = function(){
+                params.element.html( getTemplate(params.templateName) );
+
+                $compile( params.element.contents() )(params.scope);
+            }
+
+            if(null !== templates){
+                _compile();
+            }
+            else{
+                loadPromise.then(_compile);
+            }
+        }
     };
 });
 
@@ -40,35 +71,22 @@ app.controller('ContentCtrl', function (DataService) {
     ctrl.fetchContent();
 });
 
-app.directive('contentItem', function ($compile, TemplateService) {
+app.directive('contentItem', function (TemplateService) {
     var getTemplate = function (templates, contentType) {
-        var template = '';
-
-        switch (contentType) {
-            case 'image':
-                template = templates.imageTemplate;
-                break;
-            case 'video':
-                template = templates.videoTemplate;
-                break;
-            case 'notes':
-                template = templates.noteTemplate;
-                break;
-        }
-
-        return template;
+        return templates[contentType] || '';
     };
 
     var linker = function (scope, element, attrs) {
         scope.rootDirectory = 'images/';
 
-        TemplateService.getTemplates().then(function (response) {
-            var templates = response.data;
-
-            element.html(getTemplate(templates, scope.content.content_type));
+        TemplateService
+            .load()
+            .compile({
+                templateName    : scope.content.content_type,
+                scope           : scope,
+                element         : element
+            });
 
-            $compile(element.contents())(scope);
-        });
     };
 
     return {