Building and Testing
The directory structure described here is different from the one
recommended by the AngularJS seed project (https://github.
com/angular/angular-seed). The directory layout from
the angular-seed project works well for a simple project, but the
general consensus in the AngularJS community is that larger
projects are better organized by feature.Start simple
Looking at the folder structure you will notice that some of the folders containing
functional code have a deep hierarchy. Those folders closely match hierarchical
navigation in the application itself. This is desirable since looking at the UI of the
application we can quickly understand where the corresponding code might be stored.
It is good idea to start a project with a very simple structure, and take small steps
toward the final directories' layout. For example, the sample application didn't
have any subfolders in the admin section at the beginning and contained all the
functionality for managing SCRUM projects and users in one directory. As the code
base evolved and files were growing bigger (and more numerous) new subfolders
were added. The folder structure can be refactored and evolved in several iterations,
exactly like source code.
Controllers and partials evolve together
It is rather common to see projects where files are organized into folders based on
their type. In AngularJS context JavaScript scripts and templates often get separated
into different directory structures. This separation sounds like a good idea but in
practice templates and the corresponding controllers tend to evolve at the same
pace. This is why in the sample SCRUM application templates and controllers are
kept together. Each functional area will have its own folder and both templates and
controllers will reside in one folder.
As an example here is the content of the folder related to the users'
administration functionality: