Skip to main content

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.
prachi sara said…
Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
mean-stack-training-institute-in-chennai
Joe said…
Thanks for sharing this wonderful article. Your article is very interesting to read. Looking forward to read ur future post.
Node JS Training in Chennai
Node JS Course in Chennai
for ict 99 said…
IEEE Project Domain management in software engineering is distinct from traditional project deveopment in that software projects have a unique lifecycle process that requires multiple rounds of testing, updating, and faculty feedback. A IEEE Domain project Final Year Projects for CSE system development life cycle is essentially a phased project model that defines the organizational constraints of a large-scale systems project. The methods used in a IEEE DOmain Project systems development life cycle strategy Project Centers in Chennai For CSE provide clearly defined phases of work to plan, design, test, deploy, and maintain information systems.


This is enough for me. I want to write software that anyone can use, and virtually everyone who has an internet connected device with a screen can use apps written in JavaScript. JavaScript Training in Chennai JavaScript was used for little more than mouse hover animations and little calculations to make static websites feel more interactive. Let’s assume 90% of all websites using JavaScript use it in a trivial way. That still leaves 150 million substantial JavaScript Training in Chennai JavaScript applications.
steve said…
نجار ابواب بالرياض نجار ابواب بالرياض
تركيب ستائر بالرياض افضل شركة تركيب ستائر بالرياض
تنظيف مكيفات بالرياض شركة غسيل مكيفات بالرياض
شركة تنظيف افران الغاز بالرياض تنظيف افران بالرياض

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.


"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…

Angular - 4 year road map

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. …