JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<div ng-app="myModule">
    
    <div ng-controller="cleanController">
        <button ng-click="behavior()">Bad Behavior</button>
    </div>
    
    <div ng-controller="cleanController1">
        <button ng-click="behavior()">Good Behavior</button>
        
    </div>
    
    <div ng-controller="cleanController2">
        <button ng-click="behavior()">Something different</button>
    </div>
    
</div>

JavaScript

angular.module('myModule', [])
//The start of cleaner
.service('reqData1', [function(){
    //Decoupled into the module the data
    return ["string1", "AHHH", "string3"]
}])
.service('reqData2', [function(){
    //A different model if you will
    return ["string1", "Quiet", "string3"]
}])
.service('reqBehavior', [function(){
    //Decoupled into the module the behavior
    return function(coolInfo) {
        return {
            'scream': function(){
                 alert(coolInfo);   
            }
        }
    };
}])
.controller('cleanController1', ['$scope', 'reqData1', 'reqBehavior', function($scope, reqData, reqBehavior){
    //A first version
    $scope.blah = "here"
    $scope.behavior = function(){
        reqBehavior(reqData[1]).scream()   
    }
    
}])
.controller('cleanController2', ['$scope', 'reqData2', 'reqBehavior', function($scope, reqData, reqBehavior){
    //an extention if you will. code copying but you get the idea, a different setup with injections being different,
    //I can modify by injecting new stuff and using the controller for what it is... the link between the view and model
    $scope.behavior = function(){
        reqBehavior(reqData[1]).scream()   
    }
    
}])