AngularJS best practices

Question

I have a large angularjs application. It is structured in a module pattern like:

./
 /search
   search.js
 /admin
   /users
       users.js
   /settings
       settings.js
   admin.js
/edit
   edit.js
/common
   /components
       /modal
           modal.js
   /services
       auth.js

and so on. currently they are all under one angularjs 'module' e.g.:

var app = var app = angular.module('myapp', []);

and then in subsequent controllers/etc I do

app.controller('SearchCtrl', function(){ ... })

but as I look around the web at examples such as Angular CRUD Demo and ngBolierplate I find most of them split up each nested module(s) into their own 'module' rather than just strap it onto the main one.

Whats the best practice here? I've seen both but not sure which is the 'angular way'.

I wondered the same about here is some helpful info [Angular Best Practices](http://stackoverflow.com/q/20802798/1959948) — Dalorzo, May 17 '14 at 22:41

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Taken from here, which was linked to on the official angular blog and referred to as best practice (emphasis mine):

Module definitions

In general, 'angular.module('foo')' should be called only once. Other modules and files can depend on it, but they should never modify it. Module definition can happen in the main module file, or in subdirectories for sections or components, depending on the application's needs.

So, I think the preferred method is to have each .js file declaring its own module, then referencing those modules in the main app.js file in the root of the project.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 20 '14 at 00:00

Ed_

18,798
8
45
71

Interesting ... thanks for the input ... it's hard to find relevant large scale examples – amcdnl Mar 20 '14 at 00:25
Yes it is. It's something I'm still trying to get right to be honest! – Ed_ Mar 20 '14 at 00:26

AngularJS best practices

1 Answers1