AngularJS - Recommended Directory Structure for Angular Apps
Join the DZone community and get the full member experience.
Join For Free
this article represents the recommended folder structure that you would want to create/adopt for your next angular app. please feel free to comment/suggest if i missed to mention one or more important points. also, sorry for the typos.
following are the key aspects of organizing your angularjs app files into the recommended folder structure described and displayed later in this article:
-
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
:components such as following that are used in the core module:
- services
- filters
- directives
- 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.
-
app/view folders
: 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>.js file that consists of javascript related with view file
- <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.
following is the screenshot of the folder structure from taken from this
angular-seed page on github
. pay attention to the description mentioned below. you may as well want to access the github page to understand in detail.
app
AngularJS
unit test
Directory
Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments