Angular Provider/Factory/Service Demo

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script> <script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script> 
<div ng-app="myApp">
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
</div>

<!--
See https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/VxECXKbn3gsJ

Services
Syntax: module.service( 'serviceName', function );
Result: When declaring serviceName as an injectable argument you will be provided the actual function reference passed to module.service.
Usage: Could be useful for sharing utility functions that are useful to invoke by simply appending () to the injected function reference. Could also be run with injectedArg.call( this ) or similar.

Factories
Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided the value that is returned by invoking the function reference passed to module.factory.
Usage: Could be useful for returning a 'class' function that can then be new'ed to create instances.

Providers
Syntax: module.provider( 'providerName', function );
Result: When declaring providerName as an injectable argument you will be provided the value that is returned by invoking the $get method of the function reference passed to module.provider.
Usage: Could be useful for returning a 'class' function that can then be new'ed to create instances but that requires some sort of configuration before being injected. Perhaps useful for classes that are reusable across projects? Still kind of hazy on this one.
-->

JavaScript

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

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

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World1!"
        }
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory2', function() {
    return {
        sayHello() {
            return "Hello, World2!"
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

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

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

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

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromFactory2, helloWorldFromService) {
    
    $scope.hellos = helloWorldFromFactory2.sayHello();
}

myApp.controller('MyCtrl',MyCtrl);