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.


Comments

Dinh Ha said…
đồng tâm
game mu
cho thuê nhà trọ
cho thuê phòng trọ
nhac san cuc manh
số điện thoại tư vấn pháp luật miễn phí
văn phòng luật
tổng đài tư vấn pháp luật
dịch vụ thành lập công ty trọn gói

Khuôn mặt hắn khổ não nói: “Hơn nữa, tiểu thư luôn quấn quýt với Nhị công tử, còn với Đại công tử thì vô cùng không hòa thuận. Mà Nhị công tử với Đại công tử lại đang cạnh tranh vô cùng khốc liệt. Hơn nữa hiện ở trong gia tộc thì nhân khí của Đại công tử rất cao, đang được đại đa số các vị trưởng lão ủng hộ… Nên nếu không có bất ngờ gì lớn thì người kế thừa vị trí Tộc trưởng nhất định sẽ là Đại công tử. Nếu tiểu thư… Ài, hậu quả thật khó lòng lường nổi!”


Sở Dương khẽ gật đầu, cười lạnh. Kiếp trước Mạc Khinh Vũ cũng không ở lại trong gia tộc hẳn là vì lí do này, mà trong đó hẳn còn nhiều uẩn khúc khác nữa…!


Đối với các đại gia tộc, làm gì có cái gọi là thân tình chứ. Mạc Khinh Vũ luôn luôn quấn quýt với Nhị ca nên Tam Âm mạch của nàng cũng theo đó mà vô hình tạo thế cho Nhị ca của nàng, vị Đại công tử kia sao có thể không ghi hận trong lòng đây?


Hôm nay Khinh Vũ xảy ra chuyện chẳng phải rất đúng với ý nguyện của Đại công tử sao. Lẽ nào hắn còn có thể trợ giúp người muội muội này chứ? Mà một khi quyền thế rơi vào tay hắn, chắc chắn Mạc Khinh Vũ sẽ chẳng thể sống yên ổn được như trước nữa rồi.


“Tam công tử Mạc thị gia tộc là Mạc Thiên Tinh hả?” Sở Dương cau mày suy nghĩ, cái tên này khiến hắn cảm thấy có chút quen thuộc, không nhịn được hỏi: “Vậy Đại công tử tên gọi là gì?”


Khi hỏi hai điều này, Sở Dương bỗng cảm thấy trái tim đập mạnh bồn chồn.

Popular posts from this blog

Upload Video to Facebook Using Actionscrpt 3.0

Angular4 - primeng, ngx-bootstrap

Configure PostgreSQL and phpPgAdmin in WAMP

Save image from Flash using Node.js and Socket.io

Flash FLV player using PHP