Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

Eduonix

While creating a real-world application, learn to link your Angular Frontend to NodeJS, Express, and MongoDB Backend.

Online

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Section 1 : Getting Started

Introduction
What is MEAN?
What is a Single Page Application (SPA)?
How Does the MEAN Stack Work?
Installing Node & the Angular CLI
Installing our IDE
Exploring the Project Structure
Course Outline
How To Get The Most Out Of This Course
Section Resources

Section 2 : The Angular Frontend - Understanding the Basics

Module Introduction
Understanding the Folder Structure
Understanding Angular Components
Adding our First Component
Listening to Events
Outputting Content
Getting User Input
Installing Angular Material
Adding a Toolbar
Outputting Posts
Diving Into Structural Directives
Creating Posts with Property & Event Binding
Creating a Post Model
Adding Forms
Getting Posts from Post-Create to Post-List
Calling GET Post
More About Observables
Working on our Form
Section Resources

Section 3 : Adding NodeJS to our Project

Module Introduction
Connecting Node & Angular - Theory
What is a RESTful API?
Adding the Node Backend
Adding the Express Framework
Improving the server.js Code
Fetching Initial Posts
Using the Angular HTTP Client
Understanding CORS
Adding the POST Backend Point
Adding Angular
Section Resources

Section 4 : Working with MongoDB

Module Introduction
What is MongoDB?
Comparing SQL & NoSQL
Connecting Angular to a Database
Setting Up MongoDB
Using MongoDB Atlas & IP Whitelist
Adding Mongoose
Understanding Mongoose Schemas & Models
Creating a POST Instance
Connecting our Node Express App to MongoDB
Storing Data in a Database
Fetching Data From a Database
Transforming Response Data
Deleting Documents
Updating the Frontend after Deleting Posts
Adding Posts with an ID
Section Resources

Section 5 : Enhancing the App

Module Introduction
Adding Routing
Styling Links
Client Side vs Server Side Routing
Creating the "edit" Form
Finishing the "edit" Feature
Updating Posts on the Server
Re-Organizing Backend Routes
Adding Loading Spinners
Section Resources

Section 6 : Adding Image Uploads to our App

Module Introduction
Adding the File Input Button
Converting the Form from a Template Driven to a Reactive Approach
Adding Image Controls to Store the Image
Adding an Image Preview
Starting with the Mime-Type Validator
Finishing the Image Validator
Adding Server Side Upload
Uploading Files
Working with the File URL
Fetching Images on the Frontend
Updating Posts with Images
Wrap Up
Section Resources

Section 7 : Adding Pagination

Module Introduction
Adding the Pagination Component
Working on the Pagination Backend
Connecting the Angular Paginator to the Backend
Fetching Posts Correctly
Finishing Touches
Section Resources

Section 8 : Adding User Authentication

Module Introduction
Adding the Login Input Fields
Handling User Input
Adding the Signup Screen
Creating the User Model
Creating a New User Upon Request
Connecting Angular to the Backend
Understanding SPA Authentication
Implementing SPA Authentication
Sending the Token to the Frontend
Adding Middleware to Protect Routes
Adding the Token to Authenticate Requests
Improving the UI Header to Reflect the Authentication Status
Improving the UI Messages to Reflect the Authentication Status
Connecting the Logout Button to the Authentication Status
Redirecting Users
Adding Route Guards
Reflecting the Token Expiration in the UI
Saving the Token in the Local Storage
Section Resources

Section 9 : Authorization

Module Introduction
Adding a Reference to the Model
Adding the User ID to Posts
Protecting Resources with Authorization
Passing the User ID to the Frontend
Using the User ID on the Frontend
Section Resources

Section 10 : Handling Errors

Module Introduction
Testing Different Places to Handle Errors
The Error Interceptor
Displaying the Basic Error Dialog
Adding an Error Dialog
Returning Error Messages on the Server
Finishing Touches
Section Resources

Section 11 : Optimizations

Module Introduction
Using Controllers
Separating the Middleware
Creating an Angular Material Module
Splitting the App Into Feature Modules
Fixing an Update Bug
Creating the Auth Module
Adding Lazy Loading
Using a Global Angular Config
Using Node Environment Variables
Section Resources

Section 12 : Deploying our App

Module Introduction
Deployment Options
Deploying the REST Api
Angular Deployment - Finishing the Two App Setup
Using the Integrated Approach
Section Resources

Section 13 : Course Roundup

Course Roundup

Section 14 : OLD: Getting Started

Introduction
What is NodeJS?
What is Angular 2?
How Angular 2 and NodeJS Work Together
About the Course Structure
Setting up the Course Project
Understanding the Project Structure

Section 15 : OLD: NodeJS Basics

Introduction
Understanding the Flow of a Request
Working with Requests and Responses
Creating Routes and Passing Data
Knowledge Injection: Http Methods
Knowledge Injection: Data Formats
More on NodeJS

Section 16 : OLD: MongoDB Basics

Introduction
Setting up MongoDB
Starting a MongoDB Server
Using the MongoDB Shell Client
Using Mongoose to work with Data and Models
Using Mongoose in NodeJS
Creating the Project Models with Mongoose
Storing Data in the Database
Fetching Data from the Database
Wrap Up
More on MongoDB

Section 17 : OLD: Creating the Frontend with Angular 2

Introduction
Rendering an Angular 2 App with NodeJS / Express
Knowledge Injection - Components
Starting an Angular 2 App
Understanding Decorators
Outputting Data with String Interpolation
Working with Templates and Styles
Two-Way-Binding
Adding Custom Models
Improving the Folder Structure
Multiple Components
Knowledge Injection - Property and Event Binding
Using Property Binding
Using Event Binding
Knowledge Injection - Directives
Understanding Attribute Directives
Using NgFor to Output a List
Adding Input and List Components
Knowledge Injection - Services & Dependency Injection
Creating a Service
Adding Messages with a Service
Getting Messages via a Service
One Instance to Rule them All
Adding Messages with a Template-Driven Form
Creating a Header & Re-Structuring the Project
Setting Up Routing
Routing & Navigation
Routing and the Server
Creating User-related Components
Adding Child Route
User Signup with Reactive (Data-Driven) Forms
Finishing the Frontend

Section 18 : OLD: Connecting the Angular 2 Frontend with the NodeJS Backend

Introduction
Backend - Saving Messages
Knowledge Injection - Angular 2 & Http
Saving Messages - Wiring Up Frontend and Backend
Backend - Getting Messages
Getting Messages - Wiring Up Frontend and Backend
Editing Messages - Preparing the Frontend
Backend - Updating Messages
Editing Messages - Wiring Up Frontend and Backend
Deleting Messages

Section 19 : OLD: Users and Authentication

Introduction
How Authentication works in a MEAN Application
Backend - Signing Up
Signing Up Users - Wiring Up Frontend and Backend
Backend - Sign In
User Sign In - Wiring Up Frontend and Backend
Logging Users Out
Checking the Login State
Backend Route Protection with JWT
Connecting Users with Messages
Sending Requests with a Token
Handle User Authorization
Passing the User Object with Messages
Frontend Authorization Check
Wrap Up

Section 20 : OLD: Error Handling

Introduction
Setup
The Error Component
The Error Service
Using an Error Service & Passing Data

Section 21 : OLD: App Optimizations and Deployment

Introduction
Creating a Message Module
Using an Auth Module and Lazy Loading
Compiling the Compilation Ahead of Time (AoT)
Deployment Preparations
Setting up MongoLab to Host the MongoDB
Deploying to Heroku
Deploying to AWS Elastic Beanstalk (AWS EC2 + AWS S3)

Section 22 : OLD: Creating a Custom Seed Project

Introduction
Setting up NodeJS & Express
Preparing the Backend
Installing Production Dependencies and Types
Installing Development Dependencies and Setting up a Common Webpack Config
Setting up a Development Workflow with Webpack
Creating the Angular 2 Frontend
Setting up the Production Workflow (using AoT Compilation)
Updating the Custom Seed to Angular 6 and Webpack 4

Popular Courses

Popular Platforms

Popular Searches

Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

Online

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

certificate availability

Who it is for

What you will learn

The syllabus