Angular & NodeJS – The MEAN Stack Guide [2022 Edition]

Angular & NodeJS – The MEAN Stack Guide [2022 Edition]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 12h 45m | 4.16 GB

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

Create modern, scalable and high-speed Web Applications with Angular (formerly named Angular 2, now just “Angular”) and NodeJS + Express + MongoDB.

Angular 1 and NodeJS, together with ExpressJS (a NodeJS Framework) and MongoDB formed the very popular MEAN stack. Now is the time to dive into MEAN 2.0 and replace Angular 1 with Angular 2+.

Benefit from the many improvements and advantages Angular offers you: Speed, ease of development, highly reactive, awesome support for asynchronous operations, great scalability and more!
And combine these advantages with the power of a NodeJS + Express + MongoDB backend!

Learn or refresh the Angular Basics!

This course is no Angular course, but it includes detailed explanations of the core concepts used as well as about Angular in general. However, keep in mind that, as this course is no Angular course, having additional resources like my “Angular – The Complete Guide” course is recommended.

In this course, Maximilian, experienced web developer as well as author of many 5-star rated Udemy courses and host of the “Academind” coding channel on YouTube, will take you on a hands-on journey to get you to build your own Angular + NodeJS Applications in no time.

This course follows a hands-on approach, which means that the whole course is structured around one big application and the different concepts will be explained detailedly as they are introduced in this application.

Specifically, you will learn how to:

  • Set up a NodeJS + Express + MongoDB + Angular Application with the help of the Angular CLI
  • Use NodeJS and Express efficiently
  • Build reusable Components in Angular and create a reactive User Experience with the Tools provided by Angular
  • Connect your NodeJS (or any other language!) backend with your Angular App through Angular’s HttpClient service
  • Provide appropriate endpoints on your Backend, for your Frontend to consume
  • Add advanced features like file upload and pagination
  • Make your Application more secure by implementing Users, Authentication as well as Authorization
  • Handle Errors gracefully
  • And much more…!

This hands-on concept allows you to not get stuck in the theory, but instantly see real implementation examples!

What Will I Learn?

  • 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
Table of Contents

Getting Started
1 Introduction
2 What is MEAN
3 Join our Online Learning Community
4 What is a Single Page Application (SPA)
5 How Does the MEAN Stack Work
6 MUST READ Angular CLI – Latest Version
7 Installing Node & the Angular CLI
8 Installing our IDE
9 Exploring the Project Structure
10 Course Outline
11 How To Get The Most Out Of This Course
12 Section Resources

The Angular Frontend – Understanding the Basics
13 Module Introduction
14 Understanding the Folder Structure
15 Understanding Angular Components
16 Adding our First Component
17 Listening to Events
18 Outputting Content
19 Getting User Input
20 Installing Angular Material
21 Adding a Toolbar
22 Outputting Posts
23 Diving Into Structural Directives
24 Creating Posts with Property & Event Binding
25 Creating a Post Model
26 Adding Forms
27 Getting Posts from Post-Create to Post-List
28 Calling GET Post
29 More About Observables
30 Working on our Form
31 Section Resources

Adding NodeJS to our Project
32 Module Introduction
33 Connecting Node & Angular – Theory
34 What is a RESTful API
35 Adding the Node Backend
36 Adding the Express Framework
37 Improving the server.js Code
38 Fetching Initial Posts
39 Using the Angular HTTP Client
40 Understanding CORS
41 Adding the POST Backend Point
42 Adding Angular
43 Section Resources

Working with MongoDB
44 Module Introduction
45 What is MongoDB
46 Comparing SQL & NoSQL
47 Connecting Angular to a Database
48 Setting Up MongoDB
49 Using MongoDB Atlas & IP Whitelist
50 Adding Mongoose
51 Understanding Mongoose Schemas & Models
52 Creating a POST Instance
53 Connecting our Node Express App to MongoDB
54 Storing Data in a Database
55 Fetching Data From a Database
56 Transforming Response Data
57 Deleting Documents
58 Updating the Frontend after Deleting Posts
59 Adding Posts with an ID
60 Section Resources

Enhancing the App
61 Module Introduction
62 Adding Routing
63 Styling Links
64 Client Side vs Server Side Routing
65 Possible Error
66 Creating the edit Form
67 Finishing the Edit Feature
68 Updating Posts on the Server
69 Re-Organizing Backend Routes
70 Adding Loading Spinners
71 Section Resources

Adding Image Uploads to our App
72 Module Introduction
73 Adding the File Input Button
74 Converting the Form from a Template Driven to a Reactive Approach
75 Adding Image Controls to Store the Image
76 Adding an Image Preview
77 Starting with the Mime-Type Validator
78 Finishing the Image Validator
79 Adding Server Side Upload
80 Uploading Files
81 Working with the File URL
82 Beware of the Spread (…) Operator
83 Fetching Images on the Frontend
84 Updating Posts with Images
85 Wrap Up
86 Section Resources

Adding Pagination
87 Module Introduction
88 Adding the Pagination Component
89 Working on the Pagination Backend
90 Connecting the Angular Paginator to the Backend
91 Fetching Posts Correctly
92 Finishing Touches
93 Section Resources

Adding User Authentication
94 Module Introduction
95 Adding the Login Input Fields
96 Handling User Input
97 Adding the Signup Screen
98 Creating the User Model
99 Creating a New User Upon Request
100 Connecting Angular to the Backend
101 Understanding SPA Authentication
102 Implementing SPA Authentication
103 Sending the Token to the Frontend
104 Adding Middleware to Protect Routes
105 Adding the Token to Authenticate Requests
106 Improving the UI Header to Reflect the Authentication Status
107 Improving the UI Messages to Reflect the Authentication Status
108 Connecting the Logout Button to the Authentication Status
109 Redirecting Users
110 Adding Route Guards
111 Reflecting the Token Expiration in the UI
112 Saving the Token in the Local Storage
113 Section Resources

Authorization
114 Module Introduction
115 Adding a Reference to the Model
116 Adding the User ID to Posts
117 Protecting Resources with Authorization
118 Passing the User ID to the Frontend
119 Using the User ID on the Frontend
120 Section Resources

Handling Errors
121 Module Introduction
122 Testing Different Places to Handle Errors
123 The Error Interceptor
124 Displaying the Basic Error Dialog
125 Adding an Error Dialog
126 Returning Error Messages on the Server
127 Finishing Touches
128 Section Resources

Optimizations
129 Module Introduction
130 Using Controllers
131 Separating the Middleware
132 Creating an Angular Material Module
133 Splitting the App Into Feature Modules
134 Fixing an Update Bug
135 Creating the Auth Module
136 Adding Lazy Loading
137 Fixing the AuthGuard
138 Using a Global Angular Config
139 Using Node Environment Variables
140 Section Resources

Deploying our App
141 Module Introduction
142 Deployment Options
143 Deploying the REST API
144 Deploying the REST Api
145 Deploying Angular
146 Angular Deployment – Finishing the Two App Setup
147 Using the Integrated Approach
148 Section Resources

Course Roundup
149 Course Roundup
150 Possible Addition Add Web Sockets for Realtime Refresh
151 Bonus More Content

Homepage