[app-name]/ ... |__app/ | |__components/ # stateless components (e.g. features, shared UI widgets, shared services etc.) | | |__[component-1] # component 1, e.g `auth`, `profile`, `dashboard` etc. | | | |__app.js # module definition and dependencies | | | |__config.js # component specific configuration | | | |__[name]-animation.js # component specific animation | | | |__[name]-animation_test.js # animation unit test | | | |__[name]-filter.js # component specific filter | | | |__[name]-filter_test.js # filter unit test | | | |__[name]-directive.js # component specific directive (can be a UI widget) | | | |__[name]-directive_test.js # directive unit test | | | |__[name]-model.js # component specific model | | | |__[name]-model_test.js # model unit test | | | |__[name]-service.js # component specific service | | | |__[name]-service_test.js # service unit test | | | |__[component-1].{scss|less} # component specific CSS | | | |__[image-name].{png|gif|jpg} # component specific images | | | |__data/ # component specific JSON data files and related assets | | | |__i18n/ # resource files with locale specific localization rules for this component | | | | |__en-US/ | | | | | |__[resource-name-1].json | | | | | |__[resource-name-2].json | | | | | |__... | | | | |__fr-FR/ | | | | |__... | | | | | | | |__vendor/ # 3rd party librariess used by this component | | | |__[sub-component-1.1]/ # sub-component of component 1, e.g. `signin` or `signout` | | | |__config.js # subcomponent specific config | | | |__[name]-animation.js # subcomponent specific animation | | | |__... # same structure as `component-1`, except `app.js` module definition | | |__[component-2] # component 2, e.g. `video-player`, `analytics`, etc. | | | |__... | | |__utils/ # a collection of various utilities not specific to any component, usually implemented as JS pure functions | | |__checkmark-filter.js | | |__checkmark-filter_test.js | | |__string-parser-service.js | | |__string-parser-service_test.js | | |__... ...