Complete Tutorial On Mean Stack Development — Devstringx

5 min readSep 23, 2022

What Is MEAN Stack Development?

Mean Stack Development is a framework that is based on JavaScript and it is used to develop web-based applications. It develops a single-page web-based application that reduces refreshing website pages hence it is more popular among developers. It is a mixture of technologies such as Mongo, Express, Angular, & Node.

MEAN Stands

M- Mongo Db– It is used to store the data of the application. MongoDB is a NO SQL database that stores the data in a different manner as compared to a relational database. Another benefit of the MongoDB database is that it maps its data structures the same way as in particular programming languages. So, it saves lots of coding time and decreases the frequency of bugs’ occurrence.

E- Express JS It is a web server framework that is used to handle HTTP requests such as GET, POST, PUT, and DELETE.

A- Angular JS or Angular — It is an open-source front-end development framework based on JavaScript.It is used to build a single-page web application. Now angular is used instead of angular JS which is based on the typescript.

N- Node JS– It is an open-source server-side application that is also based on JavaScriptlanguage.

MEAN STACK Architecture

What Is a Single-Page Web Application?

It is an application that does not require page reloading during use. Single Page Application requests the markup and data independently and renders pages straight in the browser. These applications are heavily dependent on the JavaScript framework. Some examples of SPA are — Google, Google maps, Facebook, Github, Msnagile, etc.

Basics of Angular Application

When you are working on an angular application it means you are working in a single-page web application and thus its loading is triggered by a request to the server. When we one a URL on a browser firstly the request is made to the server. The initial request is completed by an HTML page that loads the requested page on the browser.

Our web page works with transpired javascript and it is developed in javascript. To convert the typescript code to javascript we use ng serve and after that, the browser loads the page.

If we notice the structure of the angular CLI there are some major files:-

E2e
Src
component.css
component..html
component..ts
component.spec.ts
module.ts
Assets
Environment
HTML
ts
Root component
Main module
Root HTML
Entry point
Angular CLI config

Recommended to Read- Firebase Push Notification in Angular 11+

Major Files

These are some major files, as you proceed with your projects your files increase.

ROOT HTML — index.html

This file is in the src folder if you open this file you will see it is a very clean and organized file with no reference to the script. The only thing to note in the code is <app-root>.

THE ENTYR POINT- main.ts

The main.ts file is the main part of bootstrapping. The index.html is used to decide which files are to be loaded. The main.ts file is responsible to open the angular module when the application starts. It is used to change the application level configuration.

There is no need to touch any entry point as the file is generic. Its main work is to direct the angular framework at the core module of the application and then let it trigger the remaining application source code from that point.

MAIN MODULE — app.module.ts

This is the place where the application-related code resides. This module can be used as a configuration of the application, loading all the dependencies and declaring the component, and marking them when to use.

It has three important sections in its core:-

Declaration- It helps to define all the components which are to use in the HTML in the module.
Imports- We cannot create every function which is to be used in the application this import array helps you to import other library modules and thus leverage the component, service, and some other capabilities.
Bootstrap- All the component which acts as entry points are declared in the bootstrap. Here your app will not kick start if you have not added the main component.

ROOT COMPONENT — App Component

What Is Component Lifecycle?

Every component in angular has a life cycle, it goes through a number of different stages. The 8 stages of this lifecycle are known as lifecycle hook events. So to obtain control of these components we have to use the hook events in different phases. All the components should have a constructor method because a component is a typescript class. The execution of the component’s class is, first, before the lifecycle hook events execution.

If to put any components dependencies. After construction execution, the lifecycle hook methods will be executed by angular.

Basically, the Component life cycle is divided into 02 phases In the first component is linked to itself & In the second phase is linked to the children of the component.

ngOnchanges: When the value of the input control will change, the event will execute. When the value of the bound property will change the event will fire first. A data map always receives when carrying the present and the previous value of the bound wrapped in property a simple change.
ngOnInit: The initializing of this event first shows the data bound properties or when the initialization of the component is done. The use of this event is to initialize the data in the component.
ngDoCheck: Every time the input property of the components checks it’s triggered. The hook method can use by us by checking with our own logic check to implement. This is to check our own custom change detection logic.
ngAfterContinentInit: Any content projection within the component views perform by angular and then execute by this lifestyle method. When all the bindings of the components need to look after or check for the first time this method executes.
ngDoCheck(): The child component initialization link to this method.
ngAfterContentChecked: Every time the content of the component has been checked by the angular of change detection mechanism it executes.
ngAfterContentInit: It’s called on every subsequent execution.
ngAfterViewInit: When the components’ views have been fully initialized then this method is executed.

Recommended to Read- Generating Excel File In Angular Using Exceljs

Node -v. -> To check the node version.

npm -v -> Package Manager

npm install -g @angular/cli – Install angular.

ng new project_name -> Define project name.

ng serve -o. -> To start the serve side.

npm start -> To run the build .

ng generate component component_name

ng generate service service name

If you are interested in even more development-related articles and information from us here at Devstringx, then we have a lot to choose from for you.

Originally published at https://www.devstringx.com on September 23, 2022