JSFiddle - React, Tailwind, and code Playground

by militellovincenzo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<div ng-app="app" class="container">
  <div id="target" ng-controller="MainController">
    <div>Controller with explicit function</div>
    <div controller-name></div>
  </div>
  <hr/>
  <div ng-controller="AnonymousController">
    <div>Controller with scope</div>
    <div controller-name></div>
  </div>
  <hr/>
  <div ng-controller="AnonymousControllerAs as $ctrl">
    <div>ng-controller as</div>
    <div controller-name></div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

angular.module('app', [])
  .controller('MainController', [
    '$q',
    function MainController($q) {
      this.$q = $q;
      this.description = "Full Controller";
      this.viewData = {
        name: 'Skynet'
      };
    }

  ])
  .controller('AnonymousController', function($scope) {
    $scope.description = "Anonymous with scope";
  })
  .controller('AnonymousControllerAs', function() {
    var self = this;
    self.description = "Anonymous CtrlAs with scope";
  })
  .directive('controllerName', function($timeout) {
    return {
      restrict: 'A',
      scope: {},
      template: `<div>My controller name is: {{cName}} </div>
					   <div>Description from controller: {{cDescription}} </div>
					   <div>Description from scope: {{cDescriptionByScope}} </div>					   						   <div>Controller exists: {{ctrlIsNotUndefined}} </div>
						<div>Ctr: {{elemCtr|json}} </div>
						<div>Scope: {{elemScope|json}} </div>
					   <div>Scope exists: {{scopeIsNotUndefined}} </div>`,
      link: function($scope, elem, attrs) {
        $timeout(function() {
          var name;
          $scope.elemCtr = elem.controller();
          $scope.elemScope = elem.scope();
          $scope.ctrlIsNotUndefined = !angular.isUndefined($scope.elemCtr);
          $scope.scopeIsNotUndefined = !angular.isUndefined($scope.elemScope);
          $scope.cName = $scope.elemCtr.constructor.name || 'none';
          $scope.cDescription = $scope.elemCtr.description;
          $scope.cDescriptionByScope = $scope.elemScope.description;
        });
      }
    };
  });