Angular on Providers

Test with the angular's providers

by de Montalembert Jonathan

HTML

<div ng-controller='provider'>
     <h1>Controller 1</h1>

    <div data-ng-bind="'Constant: '+constant"></div>
    <div data-ng-bind="'Value: '+value"></div>
    <div data-ng-bind="'Service: '+service"></div>
    <div data-ng-bind="'Factory: '+factory"></div>
    <div data-ng-bind="'Factory: '+factory2"></div>
    <div data-ng-bind="'Provider: '+provider"></div>
</div>
<div ng-controller="provider2">
     <h1>Controller 2</h1>

    <div data-ng-bind="'Constant: '+constant"></div>
    <div data-ng-bind="'Value: '+value"></div>
    <div data-ng-bind="'Service: '+service"></div>
    <div data-ng-bind="'Factory: '+factory"></div>
    <div data-ng-bind="'Factory: '+factory2"></div>
    <div data-ng-bind="'Provider: '+provider"></div>
</div>

CSS

/* 
    Understanding angular providers
    Source: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs

    Value returns a simple value that CAN be modified in decorator
    Constant returns a simple value that CANNOT be modified in decorator
    Service takes a constructor, good to use with prototypes
    Factory takes a function
    Provider, all the above call the provider method (see: http://iffycan.blogspot.fr/2013/05/angular-service-or-factory.html)
    return an object with a $get key. For Instance
    app.factory('factory', function myF(){}) is equal to         
    app.provider('factory', { $get: function myF(){}})
*/

JavaScript

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

app.value('value', 'I\'m a value');
app.constant('constant', 'I\'m a constant');
// called with new
app.service('service', function () {
    this.name = 'I\'m a service';
});
// called like a normal function
app.factory('factory', function () {
    return 'I\'m a factory';
});


app.provider('provider', function () {
    var name = 'provider';
    return {
        setName: function (newName) {
            name = newName;
        },
        // also accept a constructor
        $get: function () {
            return {
                name: name
            }
        }
    };
});

// the above can also be called like follow
app.config(function ($provide, providerProvider) {
    $provide.factory('factory2', function () {
        return {
            name: 'I\'m a new factory'
        };
    });

    $provide.decorator('value', function ($delegate) {
        return $delegate + ' modified by a decorator';
    });
    /*
    $provide.decorator('constant', function($delegate){
        return $delegate + ' and I cannot be modified by a decorator';
    });
    */

    providerProvider.setName('modified provider name')
});


app.controller('provider', function ($scope, constant, value, service, factory, factory2, provider) {
    $scope.constant = constant;
    $scope.value = value;
    $scope.service = service.name;
    $scope.factory = factory;
    $scope.factory2 = factory2.name;
    $scope.provider = provider.name;

    constant = 'Modified in controller 1';
    value = 'Modified in controller 1';
    service.name = "Modified in controller 1";
    factory = 'Modified in controller 1';
    factory2.name = 'Modified in controller 1';
    provider.name = 'Modified in controller 1';
});

app.controller('provider2', function ($scope, constant, value, service, factory, factory2, provider) {
    $scope.constant = constant;
    $scope.value = value;
    $scope.service = service.name;
    $scope.factory = factory;
    $scope.factory2 =...