AngularJS - Recommended Directory Structure for Angular Apps
Join the DZone community and get the full member experience.Join For Free
identify key angularjs elements (files/folders):
following are key elements of angularjs that need to be stored in form of files within different folders:
- core module : core module representing the angular app
:components such as following that are used in the core module:
- views :one or more views if the app is a single-page app
- tests :tests comprising of both unit tests and end-to-end tests
identify folders/files to store above elements
:next step is to identify files and folders structure which will store above elements. following are files/folders:
- top-level “app” folder : all angular files should be placed within a folder that could be named as “app”. “app” is the top-level folder.
- app/components folder: one or more components can be placed within “app/components” folder. if this is a large app where there may be multiple versions of components such as directives, you may decide to segregate these components by version. thus, the folder structure would look like “app/components/version”. for example, “app/components/1.0″, “app/components/1.1″, “app/components/2.0″. unit tests for these components could be placed within a sub-folder called as “tests” or placed within the same folder. however, it may be good idea to place it within sub-folder.
: in case, the app is a single-page app, there could be multiple view folders such as view1, view2 etc (app/view1, app/view2) with each of them consisting of following files:
- <view>.html file that consists of view.
- <view_test>.js consisting of unit tests
- at the top-level along with “app”, you could also have folder such as “e2e-tests” for consisting of e2e tests.
Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.