Angular & NodeJS – The MEAN Stack Guide

Angular & NodeJS – The MEAN Stack Guide
Angular & NodeJS – The MEAN Stack Guide
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 12.5 Hours | 7.22 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 Section Resources
3 What is MEAN
4 What is a Single Page Application (SPA)
5 How Does the MEAN Stack Work
6 Installing Node & the Angular CLI
7 Installing our IDE
8 Exploring the Project Structure
9 Course Outline
10 How To Get The Most Out Of This Course

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

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

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

Enhancing the App
59 Module Introduction
60 Adding Loading Spinners
61 Section Resources
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

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

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

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

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

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

127 Module Introduction
128 Using Node Environment Variables
129 Section Resources
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 Using a Global Angular Config

Deploying our App
138 Module Introduction
139 Deployment Options
140 Deploying the REST Api
141 Angular Deployment – Finishing the Two App Setup
142 Using the Integrated Approach
143 Section Resources

Course Roundup
144 Course Roundup