MEAN Stack Cheat-Sheet

Deprecated !!!

It has been 2 years since I have updated this article, Please refer respective documents to learn latest changes.

MEAN Stack Cheat Sheet Github Repository

Those who want to become a Full Stack Developer their first choice is MEAN Stack because it has a lot of scopes and easy to learn as well but preparing is hard so Here's a Cheat Sheet - Inspired by The Technical Interview Cheat Sheet.md

This list is meant to be both a quick guide and reference for further research into these topics. It's basically a summary of important topics, there's no way it can cover everything in depth. It also will be available as on Github for everyone. Please feel free to rise a issue or PR if anything missing or any correction required.

What the heck is MEAN Stack

• MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js
• One of the main benefits of the MEAN stack is that a single language, JavaScript, runs on every level of the application, making it an efficient and modern approach to web development.

MongoDB

MongoDB Introduction

What is MongoDB and where to be used ?

MongoDB is a type of NoSQL DB and used in the following applications such as unstable schema, need highly scalability and availability. Read More

Difference between NoSQL and SQL ?

Read more detailed comparison on MongoDB vs MySQL

Install MongoDB

How to Install MongoDB and Robo 3T?

Install MongoDB and Robo 3T (Robo 3T -formerly Robomongo is the free lightweight GUI for MongoDB enthusiasts)

How to Install the mongoose node module?

Mongoose is MongoDB driver which connects MongoDB and Node.JS Read Document

Work with Mongoose

Start with Schema?

Everything in Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.

 var mongoose = require('mongoose');
  var Schema = mongoose.Schema;

  var blogSchema = new Schema({
    title:  String,
    author: String,
    body:   String,
    comments: [{ body: String, date: Date }],
    date: { type: Date, default: Date.now },
    hidden: Boolean,
    meta: {
      votes: Number,
      favs:  Number
    }
  });

Creating a Model?

To use our schema definition, we need to convert our blogSchema into a Model we can work with. To do so, we pass it into mongoose.model(modelName, schema)

var Blog = mongoose.model('Blog', blogSchema);

Read More Mongoose guide

Basic CURD functions

Mongoose models provide several static helper functions for CRUD operations.

create()

Save one or more Documents to the database

insertMany()

Shortcut for validating an array of documents and inserting them into MongoDB if they're all valid. This function is faster than .create() because it only sends one operation to the server, rather than one for each document.

findOne()

Finds one document

find()

Finds documents

updateOne()

Updates one document in the database without returning it.

update()

Same as update(), except it does not support the multi or overwrite options.

updateMany()

Same as update(), except MongoDB will update all documents that match filter

deleteOne()

Deletes the first document that matches conditions from the collection.

deleteMany()

Deletes all of the documents that match conditions from the collection

Read more about Mongoose Queries

Aggregation

Aggregations are operations that process data records and return computed results

These are operations like sum, count, average, group etc where we need to generated grouped results out of collection.
MongoDB exposes a pipeline based framework for aggregations, which looks something like below and Read more

Model.aggregrate([
   pipe1_operator : {...},
   pipe2_operator : {...},
   pipe3_operator : {...}
])

$group

Count the number of Users Belonging To A Particular Region

$match

$match acts as a where condition to filter out documents.

$project

$project is used to add columns dynamically to the collection and use it for further aggregation.

count

Count Number of User who belong to a certain region

distinct

Find all distinct regions

There are many more pipeline operators than dicussed above, which can be seen here

Node.JS

What is Node.JS

• Node.js is a server-side platform (JavaScript runtime) built on Chrome's V8 JavaScript engine
• It is an open source server environment and free
• It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)

Why Node.js

Asynchronous and Event Driven

All APIs of Node.js library are asynchronous, that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call.

Very Fast

Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very fast in code execution.

Single Threaded but Highly Scalable

Node.js uses a single threaded model with event looping. Event mechanism helps the server to respond in a non-blocking way and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests. Node.js uses a single threaded program and the same program can provide service to a much larger number of requests than traditional servers like Apache HTTP Server

No Buffering

Node.js applications never buffer any data. These applications simply output the data in chunks.

Where to use Node.js

Following are the areas where Node.js is proving itself as a perfect technology partner.

• I/O bound Applications
• Data Streaming Applications
• Data Intensive Real-time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

*** It is not advisable to use Node.js for CPU intensive applications ***

NPM

NPM is a package manager for the JavaScript programming language. It is the default package manager for Node.js and it is the world's largest Software Registry. It contains more than one million packages.

Install Node.js and NPM

Simply download the Installer directly from the nodejs.org web site or follow the instructions for platform specific.

Linux

Debian based distributions

Such as Debian, Ubuntu, Linux mint and Raspbian

sudo apt-get install nodejs npm

Arch Linux

pacman -S nodejs npm

MacOS

brew install node

Windows

Simply download the Windows Installer directly from the nodejs.org web site.

Techical Depth

Single thread

Single threaded processes contain the execution of instructions in a single sequence. In other words, one command is processed at a time. Read more about single thread vs multi thread

Event Loop

The event loop is what allows Node.js to perform non-blocking I/O operations — despite the fact that JavaScript is single-threaded — by offloading operations to the system kernel whenever possible.

Since most modern kernels are multi-threaded, they can handle multiple operations executing in the background. When one of these operations completes, the kernel tells Node.js so that the appropriate callback may be added to the poll queue to eventually be executed

Read the following links to learn more about Event Loop

The Node.js Event Loop

What the heck is the event loop anyway? by Philip Roberts - JSConf EU

Visualisation tool for event loop

JavaScript Engine vs JavaScript Runtime

A JavaScript engine is a program or interpreter which reads our JavaScript code, produces machine code, and finally runs the machine code. It is landed in JavaScript runtimes like web browsers, Node.js, or even Java Runtime Environment (JRE). Like any other interpreters, its job is to read and execute code.

JavaScript runtime is another software. It uses JavaScript Engine and provides some additional functionalities as needed. The most common example of the runtime is the web browser. Probably the second most widely used runtime is Node.js.

Read more here

ECMAScript

ECMAScript(ES) is a scripting-language specification standardized by Ecma International. It was created to standardize JavaScript and new standards is released on every year.

ES6 Features
ES7, ES8, ES9 Features

Hello World in Node.js

Refer express for hello world program.

Some Common NPM Packages

• express
• body-parser
• lodash
• async
• moment
• request

REST API

What is REST API

• A REST stands for Representational State Transfer is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.

• REST is a style of software architecture. As described in a dissertation by Roy Fielding, REST is an "architectural style" that basically exploits the existing technology and protocols of the Web.

HTTP Methods

RESTful APIs enable you to develop any kind of web application having all possible CRUD operations. REST guidelines suggest using a specific HTTP method on a specific type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged).

Use below-given information to find suitable HTTP method for the action performed by API.

HTTP GET

Use GET requests to retrieve resource representation/information only – and not to modify it in any way

HTTP POST

POST methods are used to create a new resource into the collection of resources.

HTTP PUT

Use PUT APIs primarily to update an existing resource.

HTTP DELETE

As the name applies, DELETE APIs are used to delete resources.

HTTP PATCH

PATCH requests are to make partial update on a resource

Read more HTTP Methods

Express

What is Express

The fast, unopinionated, minimalist web framework for node.

Installation

Follow this simple instruction by Express Community

Create Hello World REST API with Express

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. Read Express Guide to know more about Express Routing

Angular

Note: Always Refer Angular Docs for a detailed explanation

What is Angular

Angular is a TypeScript-based open-source web application framework for building mobile and desktop web applications

Why Angular

• Angular was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features.
• Awesome Command Line Interface (CLI)
• Develop across all platforms
• Speed, Performance, and Scalability
• Incredible tooling
• Perfect for Single Page Application

Setup Angular

Step 1: Install Node.js

Angular requires Node.js version 10.9.0 or later. To install node.js, go to Install Node

Step 2: Install the Angular CLI

npm install -g @angular/cli

that's it you have installed Angular on your machine.

Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell.

Enter the following to list commands or options for a given command (such as generate) with a short description

ng help
ng generate --help

Know more about Angular CLI

Create and Run an application

Now it is time to create your first Angular application.

Create New Angular Application

Use the new command to create a new application.

ng new my-first-project

and enter into created application cd my-first-project

Use serve to run the application.

ng serve

In your browser, open http://localhost:4200/ to see the new app run. When you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

Fundamentals

Architecture

Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Module

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping and typically has many more feature modules

Learn more about Angular Modules

Component

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Every component consists of a selector, template, and style. Template and style can be inline or separate files.

Learn more about Angular components

Services and DI

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

You can have sharable methods and data into services.

Learn more about Angular Services

Routing

Angular Routing helps to control navigation paths of an application.
which helps to retain the application state as well.

Learn more about Angular Routings

Directive

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

A component is technically a directive. However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features

• Structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM. For Example *ngFor, *ngIf, *ngSwitch and so on.

Angular structural directives

• Attribute directives

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name. For example [style.color], [color], [(ngModel)] and so on.

Angular Attribute directives

Lifecycle Hooks

• A component has a lifecycle managed by angular.

• Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroys it before removing it from the DOM.

• Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.

Lifecycle sequence

After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngOnDestroy()

Learn More about Angular Lifecycle

File Structure

You can see that your angular application has dozens of files and folders. lets see what is the purpose of them.

• e2e

the e2e folder has all unit test files and you should write unit testing inside this dir only.

• src/app

This folder contains all our application codes such as components, services and so on.

• src/asset

This folder is for asset files such as images, fonts.

• src/environments

This is for environment configurations such as Devopment mode, Production mode.

• src/polyfills

All browser compatibility stuff lies here.

• src/style.css

This style file is common for entire angular application. if you want to define a style for the whole app, you can do here, such as theming styles.

• src/karma

The unit testing configuration file

• package.json

Package.json contains all npm and script related stuff

• angular.json

This file contains meta related to the angular application

• tsconfig.json

Compiler Configuration for TypeScript

• tslint.json

Linter Configurations

• editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers

Deep Diving

Components Communication

• Parent -> Child Via @Input
• Child -> Parent Via @ViewChild
• Child -> Parent Via @Output EventEmitters
• Child <-> Parent Via with Service

Sharing Data Between Angular Components - Four Methods

Pipes

Angular pipes let you declare display-value transformations in your template HTML. A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view.

<!-- Default format: output 'Jun 15, 2015'-->

 <p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->

<p>The date is {{today | date:'fullDate'}}</p>

<!-- shortTime format: output '9:43 AM'-->

 <p>The time is {{today | date:'shortTime'}}</p>

Data Binding

One way data binding from Component to View

• Interpolation
• Property Binding - []

One way data binding from View to Component

• Event Binding - ()

Two-way data binding between Component to View

• ngModel Directive [()]

That's it. These are the most important topics of MEAN Stack, Please feel free to rise a issue or PR if anything is missing or any correction required.

Now go and Practice.