Back To Course Home

Building a Full-stack Application Using the MEAN Stack

0% completed

Course Overview

Before We Begin

Introduction to the MEAN Stack

What is the MEAN Stack?Why Use the MEAN Stack?Node and Angular CLI Versions Course Project Overview: Course Management App Quiz: Introduction to the MEAN Stack

The Angular Frontend - Designing the App

Angular Overview Understanding the Folder Structure Services, Interceptors, and Guards Forms and Routers Create and Serve the Angular Project Adding Bootstrap 5 and Font Awesome Create Navbar Designing the Home Page Designing and Adding Forms to our Registration Page Designing and Adding Forms to our Login Page Designing the Create Course Page Designing the Edit Course Page Designing the Course List Page Add Routes to the Application Summary: Designing the Angular Application Quiz: The Angular Front-end Design

Course Assessment

MEAN Stack Assessment 1 (The Frontend)

The Backend: Adding NodeJS to our Project

Node.js Overview Understanding the Folder Structure Creating a Project Setting up the .env file and Git Ignore File Setting up the Start Scripts and Running the Server Adding CORS, Express, and Morgan Middleware Creating Error Handler Middleware Quiz: Adding Node.js to our Project Challenge: Creating a Web Server Solution Review: Creating a Web Server

Setting up Mongo DB

MongoDB Atlas Overview Setting up MongoDB & IP Whitelist Setup Schemas and Models for Users and Course Collection Connect to MongoDB Database Using Mongoose Quiz: Setting up Mongo DB

Working with RESTful API

REST API Overview Creating the Login and Register API using Express Creating REST API for the Course Management Application Create, Deploy, and Test the REST API on Heroku Quiz: Working with RESTful API Challenge: Making POST and GET Requests to a Public REST API Solution Review: Making POST and GET Requests to Public REST API

Course Assessment

MEAN Stack Assessment 2 (The Backend)

Angular Services, The HttpClient Module, Providers and Dependency

Overview of Services in Angular Overview of HTTPClient in Angular Overview of Dependency Injection Implement the User Service Implement the Course Service Quiz: Service, HttpClientModule, and Dependency Injection Challenge: Displaying Data from a REST API Solution Review: Displaying Data from a REST API

Implementing User Authentication

Create FormBuilder and Validators for the Register Page Consuming REST API for the Register Page Creating FormBuilder and Validators for the Login Page Consuming REST API for the Login Page.Implementing User Authentication Status in the Navbar Adding the canActivate Route Guard to the Router Module Adding Token Interceptors to Authenticate Requests in Angular Quiz: Implementing User Authentication Challenge: Making a Reactive Form Valid Solution Review: Making a Reactive Form Valid

Implementing CRUD Functionality in the Frontend

Implementing Functionality to Add a New Course

Fetching Courses Created from the Database

Setting up the Activated Route to Update a Course

Consuming REST API for the Edit and Delete Functionality

Quiz: Implementing CRUD Functionality in the Frontend

Toast Notifications, Preloaders and Deployment

Add Toast Notification to Components Adding Preloaders to Components Deploying the Angular Project with Netlify Quiz: Toast Notifications, Preloaders, and Deployment

Conclusion

Appendix

Installation of the MEAN Stack Technologies Installing the Express Framework and npm Packages Setting up the Express, CORS, and the Morgan Middleware Installation and Set up of an Angular Application Installation of ngx-toastr Installation of ngx-spinner Installation and Set up of Heroku CLI

Fetching Courses Created from the Database

Learn to fetch data from the database.

In this lesson, we’ll display all the courses created and saved into the database on the client-side of our application. To do that, we need to take the following steps:

Step 1: Consuming the REST API

To consume the REST API to show a list of created courses, we head to the course-list directory and open the course-list.component.ts file. Next, we integrate the code below:

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy