Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 24

UNIT-1

MEAN STACK WEB DEVELOPMENT


Angular 8 tutorial in tamil| Angular basics| Angular course in tamil| Codebinx

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.

MEAN Stands for:

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.

Popular Apps Using NodeJS

Pre-requisites to learn Node.js- JavaScript/TypeScript


Event-Driven, non-blocking I/O model

•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.

 Server-side rendering for SPA


As a server-side technology for modern web applications, Node.JS works well with Single-Page
Applications (SPAs) that are powered by JavaScript on the front end.

Data-Intensive Real-Time Apps

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.

• It is an open-source framework developed by Google and used by most of the developers


across the globe.

• 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.

• AngularJS changes static HTML to dynamic HTML. It extends the ability of


HTML by adding built-in attributes and components and also provides an ability to
create custom attributes using simple JavaScript.

• It provides the capability to create Single Page Application(SPA)


4. MongoDB
• These are a NoSQL database, which is cross-platform document-oriented
developed for high performance, high availability, and easy scalability.
• Collection and document are the two primarily used terms/concepts in MongoDB.
• Collection is referred to a group of these documents, which is like an RDBMS table.
• It uses the BSON (Binary Javascript Object Notations) format for document
storage and communication with its client. BSON is a binary form of JSON
(JavaScript Object Notions).

You might also like