Anatomy of a Webapp Project

A Webapp project is meant to be deployed as a Web application/Web page.

Project Structure

├── src
│   ├── app                                - App configuration files go here
│   │   ├── app.js                         - module declaration file
│   │   ├── app.scss                       - global CSS/SCSS can be written here
│   ├── assets                             - Custom assets: fonts, images, etc…
│   ├── routes                             - Route feature directories go here.
│   │   ├── main                           - App configuration files go here
│   │   │   ├── index.js                   - The index.js of a route file, declares that route
│   │   │   ├── main.controller.js         - routename.controller.js declares a controller for that route
│   │   │   ├── main.controller.spec.js    - test file for the route controller
│   │   │   ├── main.html                  - html template for the route
│   │   │   ├── main.scss                  - a feature dir can encapsulate it's styles
│   │   │   ├── test-directive             - any feature directory can contain child feature directories
│   │   │   │   ├── test.directive.js      - any feature directory can contain child feature directories
│   │   │   │   ├── test.directive.spec.js - any feature directory can contain child feature directories
│   │   │   │   ├── test.html              - any feature directory can contain child feature directories
│   ├── directives                         - Shared Directive feature directories go here.
│   │   ├── example                        - A very elaborate directive structure example
│   │   │   ├── example.html               - directives can optionally have their own templates
│   │   │   ├── example.controller.js      - and optionally their own controllers
│   │   │   ├── example.controller.spec.js - 
│   │   │   ├── example.directive.js       -
│   │   │   ├── example.directive.spec.js  - 
│   │   │   ├── example.directive.spec.js  - and of course encapsulate their styles
│   │   │   ├── exmple-service             - any feature directory can contain child feature directories
│   │   │   │   ├── exmple.service.js      - services just like the rest get their own file and test
│   │   │   │   ├── exmple.service.spec.js - services just like the rest get their own file and test
│   ├── services                           - Shared Services feature directories go here.
│   │   ├── resizer                        - A service example
│   │   │   ├── resizer.service.js         - 
│   │   │   ├── resizer.service.spec.js    - 
│   ├── filters                            - Shared Filters feature directories go here.
│   │   ├── colors                         - A filter example
│   │   │   ├── colors.filter.js           - 
│   │   │   ├── colors.filter.spec.js      - 

Shared "features" are Angular Feature Objects, such as directives, filters, services or the more non standard "route", which are used at the base level of the app or shared amongst other feature objects.

Child "features" are Angular Feature Objects, that belong only to one other Feature Object, and are therefore encapsulated ( their code directory lives inside the code directory of : ) their parent Feature Object ( example the User service is encapsulated inside the /login route )

All feature type directories are optional. Meaning, if the webapp has no base level filters, there is no reason to have a filter directory.

For more information on project file structure please see (this)[https://github.com/kosz/generator-modular/wiki/Issues-with-the-Google-Best-Practice-Recommendation-for-Angular-App-Structure]. Modular uses a slightly modified version of the Google Best Practice Recommendation for Angular App Structure.

Distribution Structure

A dist folder is created with a production version of the Webapp. This dist folder contains a root level index.html, and a few directories : scripts, styles, fonts, images. The scripts and styles folders contain vendor and app css/js, where all the project files are concatenated and minified.