JSFiddle - React, Tailwind, and code Playground

by waxolunist

HTML

<div ng-app="app">
    <div ng-controller="LoginController">
        Get a Message:
        <button ng-click="someFunc()">someFunc</button>
        <button ng-click="anotherFunc()">anotherFunc</button>
        <button ng-click="yetAnotherFunc()">yetAnotherFunc</button>
        
        <div>Answer: {{answer}}</div>
    </div>
</div>

CSS

body {
    font-family:sans-serif;
    background-color: #f5f5f5;
}
div {
    margin:20px 5px;
}

JavaScript

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

app.controller('LoginController', function($scope, LoginFactory) {

    $scope.someFunc = function() {
        $scope.answer = LoginFactory.someFunc();
    }

    $scope.anotherFunc = function() {
        $scope.answer = LoginFactory.anotherFunc();
    }
    
    $scope.yetAnotherFunc = function() {
        $scope.answer = LoginFactory.yetAnotherFunc();
    }
});

app.factory('LoginFactory', [function() {
    return {
        someFunc: function() {
            return 'abc'
        },
        anotherFunc : function(){
            var msg = this.someFunc();
            return 'Msg is '+ msg;
        },
        yetAnotherFunc : function(){
            var msg = this.someFunc();
            return 'Another msg is '+ msg;
        }
    }
}]);