Introduction to the MEAN STACK

MEAN is itself a combination of three technology and after combining it becomes one technology. If you hate browser refresh or browser Reload symbol then definitely you gonna love MEAN.

So lets start with very basic of MEAN.

M= Mongo
E= Express
A= Angular
N= Node.Js

Introduction to MEAN

MONGO :
Mongo is a No-SQL Database used in MEAN . It is quite fast as compare to My SQL or SQL only because of its non relation Database. It does not contain any of Joins. you cannot use join. you do not need to create schema because it will change its schema according to your Data inserted in Mongo.Mongo is counted in Fast Access database. You do not need to change whole schema even if you want to add some more new fields in your DB. Mongo is JSON (textual) format DB.
Below is the example of JSON Format data:-

[
    {
        _id: 53e367e2ec785106efe50be1,
        text: 'sometext',
        id: '53e367e2ec785106efe50be1'
    }
]

select query in Mongo
db.keywords.find( { text: ‘Master Software Solutions’} )

EXPRESS :

Express is a framework to run MEAN based web Application or Node based framework. If you want to run your App you have to install Express framework on your machine.

ANGULAR:

Angular is client side MVC Framework it has its own factory, Routing , Filter. It will create single Page Application for you.Angular can load heavy data just in a seconds without any page load. It contains directive which play very big Role in Angular to handle data in client Side.

Below are some of Directive used in Angular:

  • ng-app
  • ng-controller
  • ng-switch
  • ng-show
  • ng-hide

ng-app

ng-app will contain your application name. which required to start your Angular. Whenever you feel everything is written perfect but still you are not able to call your controller then check once that have you mention your ng-app directive.

ng-app call should be before any activity of angular. mention it in your body or html Tag.

or

ng-controller

ng-controller is a directive which will call your angular controller. To call controller you need to add reference of controller.js in your HTML file.

ng-switch

Angular view does not contain if else so ng-switch is replacement of if-else condition in View.

ng-hide

ng-hide will hide your div or any html view according to condition.

ng-show

ng-show will show your div or any html view according to condition.

Node.Js:

Node.js play big role in MEAN because node is use to write server side.It hit Mongo Database and receive response from mongo. Response is send to Angular. After receiving an response Angular decide what to do.

MEAN Installation:

Steps to Install MONGO

  1. Create folder with name Data any where in your Computer
  2. Download MongoDb from official Site Download Link
  3. Paste downloaded Database in C drive
  4. Open command prompt
  5. Type command cd mongo, cd bin
  6. mongod –dbapth (data folder path you have create in First step)
  7. Now your mongoDB server is running

EXPRESS Installation:

Steps to Install EXPRESS

  1. Open command prompt
  2. Go to your Project folder path
  3. Type below command npm install express (This command will install express Framework on your machine)
  4. Type below command to install dependency npm install (It will install all required dependency need to start Express)

ANGULAR Configuration

1) Add reference of Angular JS library in your HTML Page.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

2) Add reference of Angular Controller

<script type="text/javascript" src="yourpath/controllers/projectCtrl.js"></script>

3) Now call controller in your HTML page but before that call your ng-app. Most of the beginners do this mistake and then searching around google that why their controller is not working after everything is correct written.

<html ng-app="yourappname">
<body>
<div ng-controller="yourcontrollername">
<div>
</body>
</html>

NODE Installation

  1. Open Command prompt
  2. Access path of you MEAN or Node project
  3. Run below command

$ node app

if it gives message that App started on PORT 3002(your port number) that means project is running successfully.