Lets consider we are building todo application.
Project structure (by file types)
angular-todo-app/
---- bower.json
---- gulpfile.js
---- package.json
---- app/
-------- index.html
-------- scripts/
------------ controllers/
---------------- main.controller.js
------------ directives/
---------------- directive.js
------------ filters/
---------------- filter.js
------------ services/
---------------- service.js
------------ app.js
-------- styles/
------------ main.css
-------- views/
------------ main.html
---- tests/
-------- e2e/
------------ main.controller.spec.js
-------- unit/
------------ todo-list.directive.spec.js
-------- protractor.e2e.config.js
-------- karma.unit.config.js
---- bower_components/
-------- vendors libraries (e.g. angular libs)
---- node_modules/
-------- dev dependencies modules
Project structure (by feature types)
angular-by-feature/
---- bower.json
---- gulpfile.js
---- package.json
---- protractor.e2e.config.js
---- karma.unit.config.js
---- app/
-------- index.html
-------- app.js
-------- common/
------------ directives/
----------------- directive.js
------------- filters/
----------------- filter.js
------------- services/
----------------- service.js
------------- styles/
----------------- main.css
-------- todo/
------------ todo-list.html
------------ todo-list.directive.js
------------ todo-list.directive.spec.js
------------ todo.filter.js
------------ todo-list.controller.js
------------ todo.service.js
------------ todo-details.html
------------ todo-details.controller.js
------------ todo-style.css
---- e2e/
-------- todo-list.controller.spec.js/
---- bower_components/
-------- vendors libraries (e.g. angular libs)
---- node_modules/
-------- dev dependencies modules
Introduction
You can arrange project structure two ways one is bye file types and other is feature types. The only difference is that in file types folder will be arrange (stored) in respective folder like all scripts file will be stored in scripts/ folder while in feature type arrangement files will be stored according to the feature like all files related to todo feature will be stored in todo/ folder. And all other files(project dependencies) will remain same.
You are seeing several files and folder information. Let’s discuss them one at a time.
bower.json
bower.json will manage application package dependencies like angular.
gulpfile.js
gulpfile.js for automate development process.
package.json
package.json for managing project version, project dependencies, dev-dependencies etc.
app (for file type)
app/ will hold all files related to application’s actual functionality. It is parent folder for your todo application.
app/index.html file is main entry file.
app/scripts/ will hold all scripts files related to application.
app/scripts/app.js will hold main script file for angular and this file play main role in application bootstrap.
app/scripts/controllers/ will hold script files related to angular controllers.
app/scripts/directives/ will hold script files related to angular directives.
app/scripts/filters/ will hold script files related to angular filters.
app/scripts/services/ will hold script files related to angular services.
app/styles/ will hold all styles files related to application.
app/views/ will hold all templates files related to application.
app (for feature type)
app/ will hold all files related to application’s actual functionality. It is parent folder for your todo application.
app/index.html file is main entry file.
app/app.js will hold main script file for angular and this file play main role in application bootstrap.
app/common/ will hold files which are used through out the application or common to most part of the application.
app/common/directives/ will hold directive files related to application.
app/common/filters/ will hold common filters files related to application.
app/common/services/ will hold common services files related to application.
app/common/styles/ will hold common styles files related to application.
app/todo/ will hold all files (scripts, templates, styles, unit tests etc) related to todo feature. In same way can create folder for other features.
tests (for file type)
tests/ will hold project’s all type of tests like unit, e2e test etc.
tests/karma.unit.config.js configuration file for karma unit tests.
tests/protractor.e2e.config.js configuration file for protractor end-to-end tests.
tests/unit/ will hold unit test related to application.
tests/e2e/ will hold end-to-end test related to application.
tests (for feature type)
e2e/ will hold end-to-end tests related to application.
bower_components
bower_components/ will hold all project dependencies like angular.
node_modules
node_modules/ will hold project’s npm dependencies like gulp.
Summary
- For small apps file type project structure suits a lot and works pretty well also. But when app is becoming larger and there is lots of feature added in app then managing that app is pretty hard work, in that scenario choosing feature type project structure is very good idea.