IIRF Online > Development > Web Development > Angular > Angular & NodeJS - The MEAN Stack Guide [2024 Edition]
Angular & NodeJS - The MEAN Stack Guide [2024 Edition] by Udemy
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
Course Highlights
- Build real Angular + NodeJS applications
- Understand how Angular works and how it interacts with Backends
- Connect any Angular Frontend with a NodeJS Backend
- Use MongoDB with Mongoose to interact with Data on the Backend
- Use ExpressJS as a NodeJS Framework
- Provide a great user experience by using Optimistic Updating on the Frontend
- Improve any Angular (+ NodeJS) application by adding Error Handling
Skills you will learn!
Curriculum
12 Topics
Introduction
What is MEAN?
Join our Online Learning Community
What is a Single Page Application (SPA)?
How Does the MEAN Stack Work?
MUST READ: Angular & Angular Material Versions
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
19 Topics
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
12 Topics
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
17 Topics
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
11 Topics
Module Introduction
Adding Routing
Styling Links
Client Side vs Server Side Routing
Possible Error
Creating the "edit" Form
Finishing the Edit Feature
Updating Posts on the Server
Re-Organizing Backend Routes
Adding Loading Spinners
Section Resources
15 Topics
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
Beware of the Spread (...) Operator
Fetching Images on the Frontend
Updating Posts with Images
Wrap Up
Section Resources
7 Topics
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
20 Topics
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
8 Topics
Module Introduction
Adding a Reference to the Model
Adding the User ID to Posts
Changed Mongoose Syntax
Protecting Resources with Authorization
Passing the User ID to the Frontend
Using the User ID on the Frontend
Section Resources
8 Topics
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
12 Topics
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
Fixing the AuthGuard
Using a Global Angular Config
Using Node Environment Variables
Section Resources
8 Topics
Module Introduction
Deployment Options
Deploying the REST API
Deploying the REST Api
Deploying Angular
Angular Deployment - Finishing the Two App Setup
Using the Integrated Approach
Section Resources
3 Topics
Thanks for being part of the course!
Possible Addition: Add Web Sockets for Realtime Refresh
Bonus: More Content!
Angular & NodeJS - The MEAN Stack Guide [2024 Edition]
Related Angular Courses
Thank You!
Your review has been submitted successfully.