Should AngularJS modules be in their own file?

Question

Fairly simple question, I can't seem to find a definitive answer. At the minute I've my module declared in one file :

var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ui.bootstrap"]);

and my controller in another :

angular.module("app").controller("mainCtrl", ["$scope", "$timeout", "dateFilter", "$http", "shareDataService", "getDataService", function ($scope, $timeout, dateFilter, $http, shareDataService, getDataService) {

Is this good structure or a waste of time and space?

Mawuli Adzoe · Accepted Answer · 2015-11-20 05:08:18Z

2

Single Responsibility

Define 1 component per file.

The following example defines the app module and its dependencies, defines a controller, and defines a factory all in the same file.

Avoid this

angular
    .module('app', ['ngRoute'])
    .controller('SomeController', SomeController)
    .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

The same components are now separated into their own files.

Do this

// app.module.js
angular
    .module('app', ['ngRoute']);

// some.controller.js
angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() { }

// someFactory.js
angular
    .module('app')
    .factory('someFactory', someFactory);

function someFactory() { }

https://github.com/johnpapa/angular-styleguide#style-y001

edited Nov 20, 2015 at 5:08

answered Nov 19, 2015 at 13:23

Mawuli Adzoe

9591 gold badge6 silver badges9 bronze badges

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

Comments

Rabi · Accepted Answer · 2015-11-19 11:27:49Z

1

It's a good practice to keep them separate. This way, you don't end up mixing the module(s) definition and controllers / services / directives.

here you get some of the best practices in angular js -

Instead of slicing your app across horizontals that can't be broken up, group your code into related bundles. This way if you remove a module, your app still works.

https://github.com/angular/angular.js/wiki/Best-Practices

answered Nov 19, 2015 at 11:27

Rabi

2,23019 silver badges18 bronze badges

2 Comments

notAChance Over a year ago

Thanks, I'll accept this as an answer seeing as it is definitive!

georgeawg Over a year ago

Bundling vs slicing. I always hated slicing.

Tarun Dugar · Accepted Answer · 2015-11-19 11:25:41Z

1

Having separate files for each type of component is ideal. I follow the structure in development:

app.js //where the module resides
routes.js //consists of routes
controllers/
services/ 
factories/
filters/
directives/

Define your module:

var app = angular.module();

Then use 'app' to declare other nested js in separate files, example:

app.directive()

However, in production, it is preferable to use task runner (eg gulp) to combine all the files and minify the final file.

edited Nov 19, 2015 at 11:25

answered Nov 19, 2015 at 11:20

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

2 Comments

notAChance Over a year ago

Yeah this is the structure I'm currently following, declaring my module in a separate file and using it for nested files, services, controllers etc etc. I have been reading a basic but good tutorial on best practices though (trochette.github.io/Angular-Design-Patterns-Best-Practices/#/…) and in it it notes a better structure (for growing Angular projects) would be to have a modular structure, so each dependency used for "Login" (it's controller, service etc) are in the same folder.

Tarun Dugar Over a year ago

Yes for very large projects, functionality based modularity, that is, controllers, services etc related to a functionality in a separate folder is ideal.

Collectives™ on Stack Overflow

Should AngularJS modules be in their own file?

3 Answers 3

Single Responsibility

Avoid this

Do this

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Single Responsibility

Avoid this

Do this

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related