JSFiddle - React, Tailwind, and code Playground

by koitoer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-mocks.js"></script>

<html ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="load()">Click to load</button>
        <button ng-click="loadFromService()">Click to load from service</button>
            <br>
            {{myVar}}
            <br>
            DATA: {{data2}}
            <br>
            Was invalid {{invalid}}
    </div>
</html>

JavaScript

(function () {
    'use strict';

    var myApp = angular.module('myApp',['ngMockE2E']);
    
    /** Adding mock responses */
	myApp.run(function($httpBackend) {			 $httpBackend.whenGET('http://localhost:8080/person').respond(function(method, url, data) {
					var people = [
					{id : 0, name : "Mauricio1", nick : "koitoer", description : "desc1", nick2 : "reotiok", date :  "01/01/2015"},
					{id : 1, name : "Mauricio", nick : "shipto", description : "desc1", nick2 : "reotipk", date :  "01/02/2015"}
				 ];
					console.log("This is received by the service " + angular.toJson(people));
					return [200, people];
				 });
			});
    
    
    myApp.controller('myController', function($scope, $http, myService){

        $scope.invalid = "No call yet";
        $scope.myVar = "var";
        
        //Implementation from the controller, I guess this is not ideal
        //as I have highly coupled the logic for the service in the controller.
        $scope.load = function(){
            $http.get('http://localhost:8080/person').then(function(response){
                $scope.data2 = response.data;
                $scope.invalid = false;
            }, function(response2){
                $scope.invalid = true;
            });
        }
        
        //Using a service how this implementation should be ??
        $scope.loadFromService = function(){
        		myService.loadFromService();
        }
        
    });
    
    // Define the factory on the module.
    // Inject the dependencies.
    // Point to the factory definition function.
    myApp.factory('myService', [myService]);

    // service definition goes here
    function myService(){

        //#region Internal Properties

        //#endregion

        //#region Internal Methods
		function loadFromService(){
        	//Call from the service
            console.log("Service call");
        }
        //#endregion


        // Define the functions and properties to reveal.
        var service = {
          ...