Unit1 Introduction To Mean Stack

UNIT 1.
INTRODUCTION TO MEAN STACK

Introduction
✓ Stack is a collection of technologies used to create web application
✓ Stack is a combination of coding language, tools, framework and database used to create
software product for their clients.
What is Mean Stack:

The MEAN stack is JavaScript based framework for developing web application.
MEAN stack includes following open-source component MongoDB, Express, Angular and Node,
these four key technologies made up the layer of the stack.
1. Mongo DB: Document database.
2. Express(.js): Node js web Frame work
3. Angular (.js) a client-side JavaScript framework
4. Node (.Js) the premier JavaScript web server.
MEAN stack architecture

The MEAN architecture is designed to make building web applications in JavaScript.
Mean stack allows you to develop 3-tier architecture (frontend, backend, database) using
JavaScript and JSON.
Benefits of using mean stack:

1) Flexibility
The MEAN Stack is written in one single programming language (JavaScript) and MongoDB
make the stack particularly adaptable.
The universal code will run on both the client and the server. That offers developers greater
flexibility if they decide to change frameworks during development. You can also host the project
to the cloud through MongoDB.
Additionally, developers can easily add new features and modules during or after development.
2) Cost-Friendly: MEAN is free, which is a definite advantage to businesses. you do not have to
hire many experts to do a single task a full stack JavaScript developer is sufficient.
3) Time-Saver
The main reason is that you don’t have to create any modules from scratch because you already
have Node.js with its huge collection of module libraries.
Additionally, the automatic testing feature sends a notification when a particular feature has an
error, so you can correct it before moving on.
4) Supports MVC architecture

The productivity of the development team stays strong, thanks to the MEAN stack’s capability of
complying with the MVC or Model-View-Controller architecture. This gives them the freedom
from dealing with a variety of programming languages.
5) Highly flexible
You can test your app even during the development process, and host it on the cloud. And if you
want to add new information any time in the future, just a new field to add in the form, and its
done.
6) Cloud compatible
The M in MEAN stack is the reason for cloud compatibility. If your app needs to implement cloud
functionalities, then MongoDB is the ideal solution. It lets you develop, test and deploy those
functionalities with ease.
7) You could potentially lose records

The claim is that MongoDB is strongly consistent, but sometimes, this could change. When
network partitioning occurs, especially in heavy load scenarios, there is a chance that you could
lose records that has been successfully written by MongoDB.
8) Poor isolation of server from business logic

Express.js has poor isolation of server from business logic and this prevents the reuse of certain
services like batching operations.
9) A universal programming language

JavaScript, being a programming language, gives the developer team the advantage of adapting to
a new comer if he happens to join in mid-project. It eases the new developer into the work schedule,
especially if he is comfortable with the language.
Technologies used in Mean Stack:
MEAN Stand for Mongo DB, Express angular and Node.
1) Mongo DB:
✓ Mongo DB is used for high volume data storage.
✓ It is open-source document-oriented database therefor easy to index document
✓ It stored data in JSON format.
✓ It can be easily used with node.
✓ Mongo DB uses BSON to query database.
✓ Document containing key value pair are the basic units of data in Mongo DB.
✓ Mongo DB uses JavaScript
Database Concepts
Relational Database Mongo DB
Table Collection
Row Documents
Index Index
Join $lookup
Foreign Key Reference
2) Express(.js)
✓ It provides easy routing of requests based on HTTP methos and URL
✓ It allows to set up middleware to response to HTTP requests.
✓ It allows dynamically render the HTML Page by passing arguments to templates.
3) Angular(.js)
✓ Angular is typescript based free and open-source single page and web application framework
✓ It is component-based framework for building web app.
✓ A collection of well integrated libraries that covers a wide variety of features, including
routing, form management, client server communication and more.
4) Node(.js)
✓ Node allows us to run JavaScript on the server.
✓ It is free and open source
✓ Node runs single threaded non blocking asynchronous programming which is very memory
efficient.
✓ Node used in single page application, API, I/O bound apps, high scalable and real time apps.
Installing and Configuring the MEAN Stack:
1) Install Advanced text editor to make change in our application Visual Studio Code
(VSCode)
Step 1: Visit the Official Website of the Visual Studio Code https://code.visualstudio.com
using any web browser like Google Chrome, Microsoft Edge, etc.
Step 2: Press the “Download for Windows” button on the website to start the download of the
Visual Studio Code Application.
Step 3: When the download finishes, then the Visual Studio Code Icon appears in the downloads
folder.
Step 4: Click on the Installer icon to start the installation process of the Visual Studio Code.
Step 5: After the Installer opens, it will ask you to accept the terms and conditions of the Visual
Studio Code. Click on I accept the agreement and then click the Next button.
Step 6: Choose the location data for running the Visual Studio Code. It will then ask you to
browse the location. Then click on the Next button.
Step 7: Then it will ask to begin the installation setup. Click on the Install button.
Step 8: After clicking on Install, it will take about 1 minute to install the Visual Studio Code on
your device.
Step 9: After the Installation setup for Visual Studio Code is finished, it will show a window
like this below. Tick the “Launch Visual Studio Code” checkbox and then click Next.
Step 10: After the previous step, the Visual Studio Code window opens successfully.
Now you can create a new file in the Visual Studio Code window and choose a language
of yours to begin your programming journey!
Installation of Node JS on Windows

Step 1: Downloading the Node.js ‘.msi’ installer the first step to install Node.js on Windows is
to download the installer. Visit the official Node.js website i.e) https://nodejs.org/en/download/
Step-2: Running the Node.js installer.
Now you need to install the node.js installer on your PC. You need to follow the following
steps for the Node.js to be installed: -
• Double click on the .msi installer.
• After clicking “Next”, End-User License Agreement (EULA) will open.

Set the Destination Folder where you want to install Node.js & Select “Next”
Do not close or cancel the installer until the install is complete
Complete the Node.js Setup Wizard.
Verify that Node.js was properly installed or not.

Open terminal of vs code and check version
node -v
or
node—version
Install Angular CLI
Angular CLI stands for Command Line Interface. It is a command line tool for creating and
managing Angular applications. Angular CLI will help you to install and configure all required
dependencies.
From Node.Js command prompt execute the following command
npm install -g @angular/cli
Steps to Create Angular Application using VS Code

1. VS Code Integrated Terminal
Open Visual Studio Code -> Terminal -> New Terminal. It shows a terminal at the bottom of
VS Code window. Using this terminal, you can execute Angular CLI commands.
2. ng new FirstAngularApp
In this step, you will create an Angular application.
You will see a question - Would you like to add angular routing? Enter 'Y' to add a routing
module to the application.
The next question will be - Which StyleSheet format would you like to use? Select CSS by arrow
keys and press enter.
This will take few minutes to install all required dependencies, once it is done you should be able
to compile and execute FirstAngularApp application.
3. Launch FirstAngularApp
Now your application is ready with default configuration, Angular Component, Angular
directives, modules. Using below command you will navigate to application directory.
cd FirstAngularApp
Following Angular CLI command will launch your application in your default browser. Execute
this command in the terminal.
ng serve
How To Fix Error PS1 Can Not Be Loaded Because Running Scripts Is Disabled On This
System In Angular
set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Install Bootstrap:
npm install bootstrap
Install express:
npm install express

Unit1 Introduction To Mean Stack

Uploaded by

Copyright:

Available Formats

Unit1 Introduction To Mean Stack

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit1 Introduction To Mean Stack

Uploaded by

Copyright:

Available Formats

UNIT 1.

INTRODUCTION TO MEAN STACK

What is Mean Stack:

MEAN stack architecture

Benefits of using mean stack:

4) Supports MVC architecture

7) You could potentially lose records

8) Poor isolation of server from business logic

9) A universal programming language

Installation of Node JS on Windows

• After clicking “Next”, End-User License Agreement (EULA) will open.

Verify that Node.js was properly installed or not.

Steps to Create Angular Application using VS Code

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.