Complete Tutorial On Mean Stack Development — Devstringx
What Is MEAN Stack Development?
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.
MEAN STACK Architecture
What Is a Single-Page Web Application?
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.
If we notice the structure of the angular CLI there are some major files:-
- Root component
- Main module
- Root HTML
- Entry point
- Angular CLI config
Recommended to Read- Firebase Push Notification in Angular 11+
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