JSFiddle - React, Tailwind, and code Playground

by stevenhollidge

HTML

<div ng-app="app"  ng-controller="MyCtrl">
    {{serviceOutput}}
    <br/><br/>
    {{serviceUsageOutput}}
    <br/><br/>
    {{factoryOutput}}
    <br/><br/>
    {{providerOutput}}
</div>

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

    var MyFunc = function() {
    
        this.name = "default";
    
        this.$get = function() {
            this.name = "updated"
            return this.name;
        };
    
        return this.name;
    };
    
    // returns the actual function
    app.service( 'myService', MyFunc );

    // returns the function's return value
    app.factory( 'myFactory', MyFunc );
    
    // returns the output of the function's $get function
    app.provider( 'myProv', MyFunc );
    
    function MyCtrl( $scope, myService, myFactory, myProv ) {
        $scope.serviceOutput = "myService = " + myService;
        $scope.serviceUsageOutput = "myService usage = " + myService.name;
        $scope.factoryOutput = "myFactory = " + myFactory;
        $scope.providerOutput = "myProvider = " + myProv;
    }
</script>