Understanding syntax in Angular

Question

I have been coding in Angular for a little bit of time now and I have created Modules, Controller and Services so far but I recently just came across a piece of code which I am just not able to understand. It is someone else's code and I think author has tried to define a service but not like I have created. Normally when I create a service it looks like below:

app.factory('portabilityService', [
    '$resource', '$state', '$rootScope', function ($resource, $state, $rootScope) {
        return { //definition      };
    }
]);

To me it is simple specify service name as the first argument inside Factory followed by all the dependencies and there you go.

Now, I came across some other code which looks like following:

(function () {
    /*
     * Manages which samples have been selected
     */


'use strict';

    angular.module('maintenance.portability.module')
        .factory('selectedSamplesSvc', service);

    service.$inject = [];

function service()
{
 //other function definitions
};

     })();

Now, this raises a lot of questions:

First of all, is this really a service?
If yes, what is service.$inject = []?
Where should I add the dependencies?
What is the purpose of the constructor service() here?
Is it just a different way to create a service or there is a specific reason why we should define a service in this particular way?

you have a few too many question here. It's not a bad thing to ask about the parts you are confused about, but the way you have presented the question, you'll likely get a lot of comments rather than answers, and the answers you do get may only cover parts of your concerns. This might be something that using Stack Overflow Chat would be better for. — Claies
– Claies, Commented Feb 3, 2017 at 0:48
that being said, I'll still make an attempt at answering the question. — Claies
– Claies, Commented Feb 3, 2017 at 0:50
All your questions are answered here ~ docs.angularjs.org/guide/di#dependency-annotation — Phil
– Phil, Commented Feb 3, 2017 at 1:09

Claies · Accepted Answer · 2017-02-03 01:06:48Z

I'll try to address your questions in order:

First, yes, this is definitely a way to declare a service. It's not entirely far off from what you are normally used to using.

The normal syntax for declarations in angular is:

typeOfDeclaration('stringNameOfDeclaration', functionDeclaration);

function functionDeclaration(){..};

In JavaScript, a function is an object, so an anonymous function can be used in place of the functionDeclaration, for example:

typeOfDeclaration('stringNameOfDeclaration', function(){..});

This inline declaration is usually easier to write when you are only making a single declaration, and is the defacto standard for most tutorial examples.

Note that these rules apply to all angular components (providers, filters, directives, controllers, etc.)

By declaring the function as a separate object rather than inline, the declaration and the function are more easily managed. You could, in theory, put the function itself into a different file (though this is not common). Also, if you are declaring multiple functions, this syntax allows you to group the declarations together and the functions together, which is mostly a matter of preference and coding style.

The optional array of dependencies in your example are a way to manage Dependency Injection in cases where the code will be minified. In this case, another alternate DI method is used, service.$inject = [];. This array can be used instead of the inline array, i.e. service.$inject = ['$resource', '$state', '$rootScope']; Again, this gives you a way to group your declarations in one place, your dependencies in another.

ChiefTwoPencils · Accepted Answer · 2017-02-03 01:27:20Z

2

All the answers boil down to this: They're equivalent with equivalent definitions of the function passed to .factory.

Yes, it's a service (based on the prior statement)
$inject is an alternative to your [ names..., function(dependencies...) {...}] syntax
The same way just now your function definition is separate.
It's the function you pass anonymously
It's preference for the most part but explicit $inject is beneficial for minimizing

For additional considerations on the matter (in part) and overall good reading give this style guide a look.

edited Feb 3, 2017 at 1:27

answered Feb 3, 2017 at 1:03

ChiefTwoPencils

14k8 gold badges55 silver badges80 bronze badges

Collectives™ on Stack Overflow

Understanding syntax in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related