MEAN STACK - UNIT-1-Introduction
MEAN STACK - UNIT-1-Introduction
By
Mrs. P.SHYAMALA
Unit 1: TypeScript & Installation of Angular
CLI
TypeScript:
Node/ NPM Installation,
Different Types (TypeScript Types)
Understanding Interfaces, Implementing Classes, Implementing Modules,
Understanding Functions
Introduction to Angular:
Why Angular, Introduction of Angular, Separation of Responsibilities,
Adding Angular to your Environment,
using Angular CLI, Creating a basic Angular Application.
AJAX - Asynchronous JavaScript and XML.
• It is a set of web development to build more responsive websites and applications.
• AJAX allows web pages to update their content without users having to reload the page.
1) JavaScript creates, adds, and manages dynamic structure by monitoring which content requires
real-time updates while a visitor is accessing a website.
2) Extensible Markup Language (XML) transports the data between the web server and the browser.
Aside from XML, other formats like plain text and JSON (Java Script Object Notation) are frequently used for
exchanging data.
AJAX Real Time Examples
Facebook: Ajax Technologies has been integrated on our facebook page for making it more interactive.
For e.g. When we like or comment any post on the facebook without loading. It permits live chat without reloading page
Google Search Engine: When we are pressing any character on URL, On the bases of that character, Google automatically
fetches data from the server and suggests. This whole process happens through the integrated AJAX functionality.
Button: In buttons, when we select one option, on the bases of that specific option, by default character will display
without refreshing page.
For e.g. On clicking button of CSE, the default subjects can be automatically displayed without reloading page.
LAMP was introduced in 1998, meaning that it incorporates older technologies.
On the other hand,
MEAN is fairly young and uses newer technologies to function.
Introduction to MEAN Stack Development
MEAN Stack is one of the most popular Technology Stack. MEAN is a full stack of open-source JavaScript
components that together, offer an end-to-end framework for building dynamic web applications; starting from the
user interface till database
Although it is a Stack of different technologies, all of these are based on JavaScript language.
1. M – MongoDB
2. E – Express JS
3. A – Angular JS
4. N – Node JS
The core strength of MEAN stack is in its centralization of JavaScript as its primary programming language.
Every component in this web stack is written in JavaScript and the database stores data in JavaScript Object
Notation (JSON) format.
This stack leads to faster development as well as the deployment of the Web Application.
Angular is Frontend Development Framework whereas Node.js, Express, and MongoDB are used for Backend
development
Architecture of Mean Stack
1. Node.js
• Node JS is open-source, cross-platform JavaScript runtime code that runs built on Google
Chrome’s V8 engine on servers which makes it fast and efficient to develop apps.
• Node.js is not a programming language or not a Framework
• It utilizes an Event-Driven, non-blocking I/O model that makes it lightweight, efficient and
excellent for data-intensive real-time applications that run across shared devices.
•Clients send requests to the webserver to interact with the web application. Requests can be non-blocking or
blocking:
•Querying for data, Deleting data , Updating the data
•Node.js retrieves the incoming requests and adds those to the Event Queue
•The requests are then passed one-by-one through the Event Loop. It checks if the requests are simple enough not to
require any external resources
•The Event Loop processes simple requests (non-blocking operations), such as I/O Polling, and returns the
responses to the corresponding clients
A single thread from the Thread Pool is assigned to a single complex request. This thread is responsible for
completing a particular blocking request by accessing external resources, such as computation, database, file
system, etc.
Once the task is carried out completely, the response is sent to the Event Loop that sends that response back to the
client.
Node.js
Data Streaming Apps
NodeJS allows developers to take advantage of HTTP requests to stream data from the client to the
server and vice versa, without having to buffer the information in the memory beforehand.
NodeJS is also a great tool for building apps that transmit large volumes of data simultaneously between
multiple users in real-time, such as online multiplayer games or stock market trackers.
On-demand applications
On-demand services like Uber are great examples of what NodeJS is best at: rapidly changing data and
thousands of concurrent connections all happening at once.
2. Express.js
Node JS is a fast JavaScript runtime environment that we use to build server-side applications, but it does not
know how to perform serving files, handling requests, and handling HTTP methods, so this is where
express js comes in.
• Express is a node js web application framework that provides broad features for building web and mobile
applications. It's a layer built on the top of the Node js that helps manage servers and routes.
• Express.js web application framework for Node.js Which means that most of the code is already written for
programmers to work with .
• We can build single page, multi-page or hybrid web applications using express.js.
• It is lightweight and helps to organize web applications on the serve-side into a more organized MVC,(Model
View Controller) architecture
• It is used for designing and building web applications quickly and easily.
• Express.js is a backend part and manages routing , session, HTTP request, error handling etc
REST (Representational State Transfer) is an API that
defines a set of functions that programmers can use to send
requests and receive responses using the HTTP protocol
methods such as GET and POST.
3. AngularJS
• AngularJS provides an excellent JavaScript front-end framework for building
interactive websites.
• The MEAN stack includes AngularJS to help developers build the user-facing side of the
application.
•Because the backend, frontend and database are all built on JavaScript, there’s a smooth flow
of information between all parts of your application.
•
• AngularJS has the ability to simultaneously develop for desktop and mobile use,
its well-tuned performance and its easy-to-use templates make it the ideal front end
to build cloud-native applications.