MEAN js Application structure

It's a continuation of previous post.

Lets discuss about the application structure in a MEAN.js Application. Actually MEAN follows a MVC(Model-View-Controller). There are mainly two types of application structure for MVC.

1. Horizontal Folder Structure
       This type of structure follows the division on functional role rather than the feature.The files and folders will kept inside a application folder .  There will be one controller folder for all application controllers. Horizontal structure is for simple projects where the features were limited. An example for this structure is

app
----controllers
----models
----routes
----views
config
----env
----strategies
----config.js
----express.js
public
----config
----controllers
----directives
----css
----filters
----images
----views
----services
server.js
package.json

app folder consists of all the express.io files or the server side files. app/controllers folder holds all express controller logic. app/models folder holds the express model logic. app/routes folder holds all the express middleware. app/views holds all the express app view files.

The config folder holds all the configuration files for the express application including the environment files for node.js.

The public folder holds the AngularJS files or the client side files. public/config holds the Angular config files. public/controllers holds the AngularJS controller files. public/css holds the css files. public/images holds the images .

2.Vertical Folder Structure
      This type of folder structure follows the division on basis of feature. In this structure each feature has it's own folder which consists of MVC pattern . These type of structre is for complex and very large projects. A sample structure is like

core
----client
--------Config
--------controllers
--------models
--------views
--------services
--------images
--------application.js
----server
--------controllers
--------config
--------routes
--------views
--------models
feature 1
----client
--------Config
--------controllers
--------models
--------views
--------services
--------images
--------application.js
----server
--------controllers
--------config
--------routes
--------views
--------models
articles
----client
--------Config
--------controllers
--------models
--------views
--------services
--------images
--------application.js
----server
--------controllers
--------config
--------routes
--------views
--------models
server.js
package.json

In this folder structure each feature has it's own folder which consists each features server as well as the client files. Each folder(core, feature, articles) is  feature and inside each feature folder there is client and server folder. feature/client folder consists the client side files and folders. Mostly the AngularJS controllers , model , view and config files. The feature/server folder consists all the express application folders in MVC format.
MEANjs had build in a way that it can follow any structure according to the complexity and size of the project. Even it can combine both structure also.
Lets check the previously created application structure.

app
----controllers
----models
----routes
----views
config
----env
----strategies
----config.js
----express.js
----passport.js
----init.js
node_modules
public
----lib
----modules
--------articles
------------config
------------controllers
------------services
------------views
------------articles.client.module.js
--------core
------------config
------------controllers
------------services
------------views
------------core.client.module.js
--------users
------------config
------------controllers
------------services
------------views
------------users.client.module.js
----application.js
----config.js
.bowerrc
bower.json
Procfile
server.js
package.json

This folder structure follows horizontal structure but in the clientside it folows a vertical structure . Lets check each folder.

app : as we saw above in horizontal structure it consists of the server side express application files.
config : It holds the configuration files for the server side express application.
config/strategies : It consiste the authentication strategy files of passport .
node_modules :  The node framework files like express , passport, bower etc..
public :  This folder holds the frontend AngularJS files and folders. Unlike the horizontal structure above stated aboveit follows a vertical pattern.
public/lib:  This folder consists the frontend libraries wher kept like Jquery, Angular etc
public/modules :  This is where the client side feature based files and folders kept. Each feature has it's own folder which contain the AngularJS files.
bower.json:  Bower is client side dependencies manager. This is configuration file foe bower.
procfile:  Process file for heroku implementation
package.json:  npm definition file where the server side dependencies configured
.bowerrc :  Tbower configuration file for setting the folder to download the frontend libraries.

Next we can look how we can create and change a new module using the yo generator.