Angular: Empty Fiddle

http://angularjs.org/

by jgarrido

HTML

<script src="https://code.angularjs.org/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    {{hellos}}
</div>

JavaScript

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

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Service: Hello, World!"
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Factory: Hello, World!"
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorldFromProvider', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Provider: Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldFromProviderProvider){
    helloWorldFromProviderProvider.setName('World');
});
        

function MyCtrl($scope, helloWorldFromProvider, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorldFromProvider.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()
    ];
}