JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div>
    <div ng-controller="VanillaController" ng-include="'vanilla_view.html'"></div>
    {{'test' | example:1:2}}
    <ul ng-controller="TreeController">
    	<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ul>
    <box title="testing">hello</box>
</div>

CSS

box {
 color: #ff0000;   
}

JavaScript

var Application = angular.module('Application', []);

Application.run(function($templateCache) {
    // register recursive template
    $templateCache.put('tree_item_renderer.html', '{{data.name}}<button ng-click="add(data)">Add node</button><button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button><ul><li ng-repeat="data in data.nodes" ng-include="\'tree_item_renderer.html\'"></li></ul>');
    
    $templateCache.put('vanilla_view.html', '{{userName | uppercase}}');
    
    $templateCache.put('box.html', '<h2>{{title}}</h2><div ng-transclude></div>');
});

Application.directive('box', function () {
    return {
	    restrict: 'E',
        scope: {title: '@'},
        transclude: true,
        templateUrl: 'box.html',
        link: function ($scope, element, attrs) {
        }
    };
});

Application.factory('Factory', function () {
    function Factory () {
    }
    Factory.prototype.getPhotos = function () {
    	return [1,2,3]; 
    };
    return Factory;
});

Application.service('Service', function () {
    this.getPhotos = function () {
     return [1,2,3];   
    };
});

Application.filter('example', function() {
    return function(input, one, two) {
		return one + input + two;
	}
});

Application.controller('VanillaController', function($scope, Factory, Service) {
    $scope.userName = 'wtf';
});

Application.controller('TreeController', function($scope, Factory, Service) {
    //console.log(Service.getPhotos);
    //console.log(Factory.getPhotos);
	console.log(new Factory().getPhotos);
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.tree = [{name: "Node", nodes: []}];
});


window.onload = function() {
  var $rootElement = angular.element(window.document);
  var modules = ['ng', 'Application', function($provide) {
  ...