Blog- AngularJS-Simple-service

by Victa

HTML

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message}}<br/>
        <a href="#" ng-click="updateMessage()">update</a>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message}}<br/>
        <a href="#" ng-click="updateMessage()">update</a>          
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var getMessages = function() {
            var deferred = $q.defer();
            
            $timeout(function() {
                message = 'Hello world!';
                deferred.resolve(message);
            }, 2000);
            
            return deferred.promise;
        };
    
      return {
        getMessages: getMessages
      };

    })

function ControllerA($scope, myService) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function(){
        $scope.message = 'Hello Max';        
    };
}
    
function ControllerB($scope, myService) {
    $scope.message = myService.getMessages();
}