Now, we enter a very controversial subject when it comes to applications with AngularJS. There are many ways to configure your environment for development using the framework. Interpret how to configure the environment and structure the directories in a way that allows us to scale it with ease.

Probably, if you make a brief search, you will find many ways to do this; this is totally acceptable, but for sure, you will find your own way to do it. Until then, we will present some alternatives.

The official AngularJS project has a simple boilerplate to start angular-seed; you can find it at https://github.com/angular/angular-seed.

The following screenshot shows angular-seed's structure:

Generally, the whole structure of AngularJS applications are structured in a directory called App, and there are many ways of using this directory. For now, imagine that the application is growing over time and you need to add more controllers in a single file called controllers.js and the same for services, directives, and filters quickly; you will surely be in trouble.

Not to mention keeping all controllers of an application in a single file, does not make your team productive.

Switching back to angular-seed, the most important file here and in almost all AngularJS applications is app.js, which is an alias to application.js. Let's see its content:

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Here's the heart of the application. It is pretty simple and useful to start, but not very modular, and if your application grows too big, this file can be a mess.

A good way to modularize your application is by using the following technique; note that we first define the modules of the application without any dependency:

// Modules without dependencies, an empty Array.
angular.module('UserModule', []);
angular.module('BandModule', []);
angular.module('DashboardModule', []);
angular.module('LoginModule', []);
// A main module with all modules as dependencies
angular.module('MainApp',
  [
    'UserModule',
    'BandModule',
    'DashboardApp',
    'LoginModule',
  ]
);

Then, we define a main module and place all the preceding modules as dependencies. Anyway, it's still highly recommended from the starting point; it also has a dedicated test directory, one folder for testing end to end (e2e), and another one for unit tests.

Testing is another key point of the structure of the framework; AngularJS was designed with testing in mind. This is another point that makes AngularJS an unbelievably productive tool. There are countless testing frameworks, which serve several purposes such as unit testing and TDD tests among others.

Nowadays, it is very important that you test your code; it also means that the more tests you write, the less the chances of your job failing at the end of a long journey of development.

But how we can be more modular with AngularJS?

Let's take a look at the following example; we note that the modules are each in their directory. Including submodules belonging to a module in the case of the user's account.

Here, we have the login modules, configurations, and signup within a directory named account:

Everything is modular, including the CSS files and the test files. Every folder is a module with all related files together in one place. In the next chapter, we will discuss more about this structure.