JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="app">

</div>

JavaScript

angular.module('app')
.value('WidgetsConstructors', {})
.service('WidgetClock', ['WidgetsConstructors', function (WidgetsConstructors) {
	var constructor = function(descriptor) {
  	var format = descriptor.format;
  	return {
    	getFormat: function() {
      	return format;
      },
      getTemplate: function() {
      	return "<pre>widgetclock</pre>";
      }
    }
  };
  WidgetsConstructors['clock'] = constructor;
}])
.service('WidgetImage', ['WidgetsConstructors', function (WidgetsConstructors) {
	var constructor = function(descriptor) {
  	var size = descriptor.size;
    var imageId = descriptor.imageId;
  	return {
      getTemplate: function() {
      	return "<img src='imageurl'>";
      }
    }
  }
  WidgetsConstructors['image'] = constructor;
}])
.service('WidgetInstanciator', ['WidgetsConstructors', 'WidgetClock', 'WidgetImage', function(WidgetsConstructors, WidgetClock, WidgetImage) {
	return {
  	instanciateWidget: function(descriptor) {
    	var constructor = WidgetsConstructors[descriptor.type];
      if (constructor == null) {
      	throw new Error("Widget type "+descriptor.type+" unknown !");
      }
      return constructor(descriptor);
    }
  }
}])
.service('Section', ['WidgetInstanciator', function(WidgetInstanciator) {
	// widgetsDescriptors est ce que l'on obtient du serveur
	var widgetsDescriptors = [
  	{
    	type: "clock",
      format: "24h"
    },
  	{
    	type: "image",
      size: "250",
      imageId: "xxxxxxxxxxxxxx"      
    }
  ];
  var widgets = [];
  for (var i=0;i<widgetsDescriptors.length;i++) {
  	var widget = WidgetInstanciator.instanciateWidget(widgetsDescriptors[i]);
    widgets.push(widget);
  }
  return {
  	getWidget: funciton() {
    	return widgets;
    }
  }
}])