JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<div ng-app='setup1App'>

    <div ng-controller='setup1'>
        <button ng-click="SetupModule.get()">Add One</button>
      <h1>First: {{SetupModule.data[0]}}</h1>
      <h1>Last: {{SetupModule.data[SetupModule.data.length-1]}}</h1>
    </div>
    
    <div ng-controller='setup2'>
        <button ng-click="SetupModule.get()">Add One</button>
      <h1>First: {{SetupModule.data[0]}}</h1>
      <h1>Last: {{SetupModule.data[SetupModule.data.length-1]}}</h1>
    </div>
    
    <div ng-controller='contamination'>
        <button ng-click="combined()">Mix</button>
      <h1>Result: {{stored}}</h1>
    </div>

</div>

JavaScript

function OneEnv(){
    var self = this
    this.data = [0]
    this.get = function(){
        var r = Math.random()
        self.data.push(r)
        return r
    }
}

function TwoEnv(){
    var self = this
    this.data = [4]
    this.get = function(){
        var r = Math.random()+1
        self.data.push(r)
        return r
    }
}

angular.module('setup1App',[])
.service('One', [OneEnv])
.service('Two', [TwoEnv])
.controller('setup1', ['One', '$scope', function(One, $scope){
    $scope.SetupModule = One
}])
.controller('setup2', ['Two', '$scope', function(Two, $scope){
    $scope.SetupModule = Two
}])
.controller('contamination', ['One', 'Two', '$scope', function(One, Two, $scope){
   $scope.oneServ = One
   $scope.twoServ = Two
   $scope.stored = undefined
   $scope.combined = function(){
       $scope.stored = One.get() + Two.get()
   }
}])