Gain insights into building full-stack applications using the MEAN stack. Explore Angular for frontend, Node.js, Express, and MongoDB for backend, and learn integration and deployment.

Learn the MEAN Stack by Building a CRUD APP in 2022.png

angular.tar.gz

angular

angular-new

backend

In this course, you’ll learn how to build a full-stack application using the MEAN stack. You’ll begin with the frontend by learning how to create and set up an Angular application from scratch. Furthermore, you’ll learn to implement routing, router guards, token-based authentication, authorization, error handling, and dependency Injection in an Angular application.

Next, the focus shifts to the backend. You’ll learn by using Node.js, Express, and MongoDB to create REST APIs. Additionally, you’ll learn to create middleware for handling errors, token verification, setting up models and schemas, creating a database using MongoDB, as well as the concept of separation of concern.

By the end of this course, you will have an understanding of how to connect both the backend and the frontend together to create a full-stack application, as well as how to deploy a fully functional application.

Building a Full-stack Application Using the MEAN Stack

## Solution
1. We start by importing and injecting the `ReactiveFormsModule` in the `app.module.ts` file, in **line 2** and **line 9**, respectively.
2. In the `app.component.html` file, we configure `[formGroup]`in **line 4**, `formControlName` in **line 7** and **line 12**. Then we display the status of the form validity in **line 16**.
3. In our `app.component.ts` file, we import the `FormGroup`, `FormControl`, `Validators` in **line 2**.
4. Inside the constructor in **line 13**, we configure the `FormControl` for each field and the validation requirements inside the `FormGroup` object.


# Solution
1. We start by importing and injecting the `ReactiveFormsModule` in the `app.module.ts` file, in **line 2** and **line 9**, respectively.
2. In the `app.component.html` file, we configure `[formGroup]`in **line 4**, `formControlName` in **line 7** and **line 12**. Then we display the status of the form validity in **line 16**.
3. In our `app.component.ts` file, we import the `FormGroup`, `FormControl`, `Validators` in **line 2**.
4. Inside the constructor in **line 13**, we configure the `FormControl` for each field and the validation requirements inside the `FormGroup` object.


Learn how to implement validation in Reactive forms.

Course Overview

Introduction to the MEAN Stack

The Angular Frontend - Designing the App

MEAN Stack Assessment 1 (The Frontend)

The Backend: Adding NodeJS to our Project

Setting up Mongo DB

Working with RESTful API

MEAN Stack Assessment 2 (The Backend)

Angular Services, The HttpClient Module, Providers and Dependency

Implementing User Authentication

Implementing CRUD Functionality in the Frontend

Toast Notifications, Preloaders and Deployment

Build an E-learning Website with MEAN Stack

Conclusion

Appendix

Solution Review: Making a Reactive Form Valid

Solution