JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myModule">
<div ng-controller="ItemCtrl">
    <ul>
        <li ng-repeat="item in items">{{item.name}}</li>
    </ul>
</div>
</div>

JavaScript

function ItemCtrl($scope, DataLoader) {
    $scope.items = DataLoader.loadAllItems();
}
    
angular.module('myModule', ['notify'], function($provide) {
    // as notifier dependency I must spcify its type.
    // is there any way how I would configure after its definition
    // which notifier implementation should be used?
    $provide.factory('DataLoader', function(AlertNotifier) {
        var loader = {
            loadAllItems: function() {
                AlertNotifier.messageMe('Loading items');
                // let's asume there is ajax call and promise object return
                return [ 
                    {name: 'Item1'},
                    {name: 'Item2'}
                ];
            }
        }
        return loader;
    });
});

// there is two implementation of the same thing but with different implementation
// if it wasn't javascript LogNotifier and AlertNotifier should implement the same
// interface with method "messageMe(message)"
angular.module('notify', [], function($provide) {
    $provide.factory('LogNotifier', function($window) {
        return {
            messageMe: function(message) {
                $window.console.log(message);
            }
        }
        
    });
    $provide.factory('AlertNotifier', function($window) {
        return {
            messageMe: function(message) {
                $window.alert(message);
            }
        }
    });
});