Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>From the AngularJS mailing list I got <a href="https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/HuZsOsMvKv4J">an amazing thread</a> that explains service vs factory vs provider and their injection usage. Compiling the answers:</p> <h1>Services</h1> <p>Syntax: <code>module.service( 'serviceName', function );</code> <br/> Result: When declaring serviceName as an injectable argument <strong>you will be provided with an instance of the function. In other words</strong> <code>new FunctionYouPassedToService()</code>.</p> <h1>Factories</h1> <p>Syntax: <code>module.factory( 'factoryName', function );</code> <br/> Result: When declaring factoryName as an injectable argument you will be provided with <strong>the value that is returned by invoking the function reference passed to module.factory</strong>.</p> <h1>Providers</h1> <p>Syntax: <code>module.provider( 'providerName', function );</code> <br/> Result: When declaring providerName as an injectable argument <strong>you will be provided with</strong> <code>(new ProviderFunction()).$get()</code>. The constructor function is instantiated before the $get method is called - <code>ProviderFunction</code> is the function reference passed to module.provider.</p> <p>Providers have the advantage that they can be configured during the module configuration phase.</p> <p>See <a href="http://jsbin.com/ohamub/1/edit">here</a> for the provided code.</p> <p>Here's a great further explanation by Misko:</p> <pre><code>provide.value('a', 123); function Controller(a) { expect(a).toEqual(123); } </code></pre> <p>In this case the injector simply returns the value as is. But what if you want to compute the value? Then use a factory</p> <pre><code>provide.factory('b', function(a) { return a*2; }); function Controller(b) { expect(b).toEqual(246); } </code></pre> <p>So <code>factory</code> is a function which is responsible for creating the value. Notice that the factory function can ask for other dependencies.</p> <p>But what if you want to be more OO and have a class called Greeter?</p> <pre><code>function Greeter(a) { this.greet = function() { return 'Hello ' + a; } } </code></pre> <p>Then to instantiate you would have to write</p> <pre><code>provide.factory('greeter', function(a) { return new Greeter(a); }); </code></pre> <p>Then we could ask for 'greeter' in controller like this</p> <pre><code>function Controller(greeter) { expect(greeter instanceof Greeter).toBe(true); expect(greeter.greet()).toEqual('Hello 123'); } </code></pre> <p>But that is way too wordy. A shorter way to write this would be <code>provider.service('greeter', Greeter);</code></p> <p>But what if we wanted to configure the <code>Greeter</code> class before the injection? Then we could write</p> <pre><code>provide.provider('greeter2', function() { var salutation = 'Hello'; this.setSalutation = function(s) { salutation = s; } function Greeter(a) { this.greet = function() { return salutation + ' ' + a; } } this.$get = function(a) { return new Greeter(a); }; }); </code></pre> <p>Then we can do this: </p> <pre><code>angular.module('abc', []).config(function(greeter2Provider) { greeter2Provider.setSalutation('Halo'); }); function Controller(greeter2) { expect(greeter2.greet()).toEqual('Halo 123'); } </code></pre> <p>As a side note, <code>service</code>, <code>factory</code>, and <code>value</code> are all derived from provider.</p> <pre><code>provider.service = function(name, Class) { provider.provide(name, function() { this.$get = function($injector) { return $injector.instantiate(Class); }; }); } provider.factory = function(name, factory) { provider.provide(name, function() { this.$get = function($injector) { return $injector.invoke(factory); }; }); } provider.value = function(name, value) { provider.factory(name, function() { return value; }); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload