Angular Providers Examples

angularProviderExamples.js

/**
 * Equivalences between different AngularJS Provider constructs.
 * Related documentation:
 * - https://docs.angularjs.org/guide/providers
 * and in particular checkout the summary: https://docs.angularjs.org/guide/providers#conclusion
 * 
 * Related tutorials: 
 *  AngularJS Patterns #27-#32
 * - https://www.youtube.com/watch?v=Wrjjp_Up8K0
 * - https://www.youtube.com/watch?v=8qOI5OUommo
 * - https://www.youtube.com/watch?v=hfH2aXQOb3M 
 * - https://www.youtube.com/watch?v=yMuaJNCJX4s
 */
 
/**
 * # Value -just a value
 * 
 * Use when you only need to inject (share) a single value
 */
app.value('valueName', valueValue);
 
/**
 * Factory - the revealing pattern
 * 
 * Use when you want:
 *  - have dependencies
 *  - service initialization
 *  - delayed/lazy init
 * 
 * Singleton pattern, the `factoryNameFactory` is invoked when the factory is injected.
 */
app.factory("factoryName", function factoryNameFactory($INJECTEDSCOPE){
  // the "private", init part:
  var blah = 'blah';
  
  // the "public", injected object:
  return {
    something: blah;
  }
});

// example with dependencies:
myApp.factory('factoryName', ['valueName', function factoryFactory(valueName) {
  // ...
}]);

/**
 * # Service - the simple pattern
 * 
 * Use this when you want to deal with a custom type for OOC.
 * It is mostly the same as a factory just written differently!
 * Can also use dependencies.
 */

app.service("serviceName", function($INJECTEDSCOPE){
  // private something
  var blah = 'blah';
  
  // assign your public injected stuff into the public constructor
  this.something = blah;
})


/**
 * # Provider - the full thing
 * 
 * the core recipe type - all the other recipe types are just syntactic sugar on top of it.
 * Explicitly manage the $get singleton generator method yourself.
 * Provides an application-wide configuration, made before the application starts app.
 * 
 * Please note the naming conventions and the correct location for dependency management.
 * 
 * Injection (through `app.config()`) is done by a provider injector which is different 
 * from the regular instance injector,  in that it instantiates and wires (injects) all provider instances only.
 * 
 */ 
app.provider("providerName", function ProviderNameProvider(){
  // this is the "configuration" part- run at the app start-up
  var blah = 'blah';
  
  this.blah = function(value) {
    blah = value;
  }
  
  // the self-built 
  this.$get = ["someDependency", function providerNameProvider($INJECTEDSCOPE) {
    return Something;
    // eg: 
    // return new Constructor(params);
  }]
});

// inject the provider into our app:
app.config(["providerNameProvider", function(providerNameProvider){
 providerNameProvider.blah('blahblah');
}]);


/**
 *  # Constant - make a value available to both config and run phases
 * 
 * Since the config function runs in the configuration phase when no services are available, 
 * it doesn't have access even to simple value objects created via Value recipe. Use `Config` for that
 */
app.constant('constantName', constantValue);

Short summary of different ways to write providers in Angular: using "service", "factory", "provider" plus "value" and "constant".