Code seperation in AngularJS

Question

I'm quite new to AngularJS so please bear that in mind when reading this question...

I have some functions that I would like to make globally available to different modules within my website, plan is to have pages performing their own functions in a single page app style (so a user list / create / modify would be one page, and a product list / create / modify would be another). I would like to have some shared logic, say utility functions, and also user authorisation that can be shared between the different page modules.

This leads to my question.

Assuming I have all the account functions encapsulated within a service (app.factory('account, etc etc...') for example) and separated into it's own JS file, is it better to place it within it's own module and using dependency injection like so:

var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);

Or just assume the name of the app variable will always be app and express it like so:

app.factory('account', ['dependencies', function (...) { }]);

Functionally both of these work, but I am trying to use best practices. The second option seems limited, I have never been keen on assuming variable are the same name throughout, for me the dependency injection method seems better but I have seen many examples of both styles out there!

Any help is much appreciated!

each module should be independent in general, its easy to test... — harishr
– harishr, Commented Mar 13, 2015 at 10:48
Excellent, so will go with keeping modules separate and use DI! Many thanks!! — Graham Whitehouse
– Graham Whitehouse, Commented Mar 13, 2015 at 10:50

Omkara · Accepted Answer · 2015-03-13 11:17:37Z

1

Really nice question. There are subtle things in this. I think it would helpful to use following code, which is using module.

var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);

However with help of angular provider and adding module level config we can mock object or service. Eventually this will increase the test ability of code.
If there are multiple services under accounting, then I would prefer to group them inside module.

These are my aspect of to look at it. Please add more if you found.

Thanks.

answered Mar 13, 2015 at 11:17

Omkara

4344 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Graham Whitehouse Over a year ago

Thank you for your answer! I agree with you about this method making the code more testable and think I'll head down this route to see where I end up!

Dan Mindru · Accepted Answer · 2015-03-27 15:39:16Z

1

Just my 2 cents on your code examples. The following approach is not recommended:

var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);

A best practice is to only have 1 component per file, therefore no need to define a variable. Take a look at this: https://github.com/johnpapa/angular-styleguide#definitions-aka-setters

If you are just starting out with Angular, I recommend that you go through the rest of John Papa's Style Guide.

edited Mar 27, 2015 at 15:39

answered Mar 13, 2015 at 11:41

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

1 Comment

Graham Whitehouse Over a year ago

Thats a great article! Thanks for pointing me in that direction! I am amazed how many permutations there are, I guess it's finding the one that suits my style! I liked the organisation of having the module assigned to the variable then adding the controllers and factories to it but can see how this might be deemed overkill... One of the advantages of doing it using a variable seems to be the use of DI as part of constructing instead of having to use the injector directly. I will read the style guide in detail later!! Thanks for the tip!

davidpaquipalla · Accepted Answer · 2015-03-13 11:53:12Z

0

I love the structure that angular fullstack generator for yeoman has.

https://github.com/DaftMonk/generator-angular-fullstack

You can see how each module and component is separated and inside, de factory, services, directives, etc. and their associate test are split in one file per functionality.

This probably is overkilling for your propose, you can take only the angular idea.

answered Mar 13, 2015 at 11:53

davidpaquipalla

1831 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

Code seperation in AngularJS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related