About me

• I am Waqar Ahmad
• Having 13 year experience in software development
• Microsoft Certified Professional
• Microsoft Specialist in HTML5, javascript & CSS3
• Worked in AIS, Netsolace, UNDP, UNODC, Aplitivity
• Currently working in US Based Company Rapticore
• Developed ERP solution, Franchise management, Landrecords and Tax
Calculation System for Wisconsin State US.
• [email protected]
• 03469662844
JavaScript/FullStack
Prerequisites for MERN/MEAN stack
• HTML
• CSS
• JavaScript
• Knowledge of database.
Introduction
MERN stands for MongoDB, Express, React, Node, after the four key
technologies that make up the stack that is used for easier and faster
deployment of full-stack web
applications.
MongoDB - document database
Express(.js) - Node.js web framework
React(.js) - a client-side JavaScript library
Node(.js) - the premier JavaScript web server
How does the MERN Stack work?
• The MERN architecture allows you to easily construct a 3-tier
architecture (frontend, backend, database) entirely using JavaScript
and JSON.
MongoDB
•
NoSQL database used for high-volume data storage.
Open-source document-oriented database. MongoDB is written in
C++.
It stores data in JSON format.
Can be easily used with Node.
MongoDB uses BSON to query database. Documents containing kev-
value pairs are the
Express.js
• Flexible Node.js framework that provides robust set of features for
web for web and mobile
application.
It provides easy routing of requests based on HTTP methods and
URLs.
It allows to set up middlewares to respond to HTTP Requests.
Allows to dynamically render HTML Pages based
React js
A JavaScript library for building user interfaces for web and mobile
applications.
React is used to build single-page applications.
React allows us to create reusable UI components.
React-router to handle the front-end routing.
React was created by Jordan Walke, Software Engineer at Facebook
Node Js
• Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications.
• Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time
applications that run across distributed devices.
• angular uses Node.js as its base for a largepart of its build environment.
• Thus, to get started with Angular, you will need to have
Node.js installed on your environment.
• You can confirm your versions after installing by running the following
commands:
• Download nod.js from this link
• https://nodejs.org/en/

• 42339300

node --version
npm --v
TypeScript
• TypeScript is an open-source object-oriented language developed and
maintained by Microsoft
• TypeScript extends JavaScript by adding data types, classes, and other
object-oriented features with type-checking.
• It is a typed superset of JavaScript that compiles to plain JavaScript.
• TypeScript is installed as an NPM package, and thus can be simply
installed with the
following command:
npm install typescript -g
npm i typescript -g
What is NPM?
• NPM is a package manager for Node.js packages, or modules
Set execution policy
• Select Start > All Programs > Windows PowerShell version > Windows
PowerShell.
• Type Set-ExecutionPolicy RemoteSigned to set the policy to
RemoteSigned.
• Type Set-ExecutionPolicy Unrestricted to set the policy to
Unrestricted.
• Type Get-ExecutionPolicy to verify the current settings for the
execution policy.
Create TypeScript Program
• Select “c:\angular” folder and enter the filename as “first.ts”.

• Installing TypeScript
Type npm install typescript -g in the Command prompt
• tsc --init

• npm install lite-server --save-dev

Variables
• Variable is a named memory location in RAM, to store a value at run time.

• Syntax: var variable : datatype = value;

• • Example: var a : number = 100;
• • TypeScript supports “optional static typing”. That means it is optional to specify datatype
• for the variable in TypeScript.
• o Static Typing: If you specify the data type for the variable, it is not possible assign
• other data type of value into the variable; if you do so, “tsc” compiler will generate
• coding-time and compile-time errors; but the code will be compiled and executed also, even though it is
having errors.
• o Dynamic Typing: If you don’t specify the data type for the variable, we can assign any
• type of value into the variable.
• • In TypeScript, we have “optional static typing”. That means it is optional to specify datatype
• for the variable in TypeScript
Data Types
• “Data type” specifies what type of value that can be stored in a
variable.
• • List of TypeScript Data Types:
• 1. number: All types of numbers (integer / floating-point numbers).
Ex: 10, 10.3498
• 2. string: Collection of characters in double quotes or single quotes.
Ex: “hello”
• 3. boolean: true or false
• 4. any: Any type of value
Compilation and Execution
• Open Command Prompt
• cd c:\angular tsc datatypes.ts
• node datatypes.js

c:\angular\datatypes.ts
• var a: number = 10;
• var b: string = "Hello";
• var c: boolean = true;
• var d: any = 100;
• console.log(a); console.log(b);console.log(c);console.log(d);
What is Object
• Object is the primary concept in OOP (Object Oriented Programming).
• • “Object” represents a physical item, that represents a person or a
thing.
• • Object is a collection of properties (details) and methods
(manipulations).
• • For example, a student is an "object".
• • We can create any no. of objects inside the program
What is Method
• Methods are the operations / tasks of the object, which manipulates /
calculates the data
• and do some process.
• • Method is a function in the object. In other words, a function which
is stored inside the
• object is called as "Method".
• • Methods are stored inside the object.
Class
• “Class” represents a model of the object, which defines list of properties and
methods of
• the object.
• • Ex: “Student” class represents structure (list of properties and methods) of
every student
• object.
• • We can create any no. of objects based on a class, using "new" keyword.
• • All the objects of a class, shares same set of properties & methods of the class.
• • We can store the reference of the object in "reference variable"; using which
you can access
• the object.
example
• class classname {
• property: datatype = value; …
• methodname( parameter1: datatype, parameter2: datatype, … ) :
returntype {
• code here } … }
Interfaces
• Interface is the model of a class, which describes the list of properties and methods of a
• class.
• • Interfaces doesn’t contain actual code; contains only list of properties and methods.
• • Interfaces doesn’t contain method implementation (method definition); it contains method
• declaration only, which defines method access modifier, method name, method arguments
• and method return type.
• • The child class that implements the interface must implement all the methods of the
• interface; if not, compile-time error will be shown at child class. The method name,
• parameters, return type and access modifier must be same in between "interface method
• (method at the interface)" and "class method (method at the class)
Enumerations
• Enumeration is a collection of constants.
• • Enumeration acts as a data type.
• • We can use "enumeration" as a data type for the "enumeration variable"
or "enumeration
• property".
• • The enumeration variable or enumeration property can store any one of
the constants of
• the same enumeration.
• • Every constant of enumeration is represented with a number (starts from
0).