Learn how to connect your Angular frontend to a Node.js, Express, and MongoDB backend by building a real application
About This Video
In Detail
This course will take you on a journey where you'll you will learn to create modern, scalable, and high-speed web applications with Angular (formerly Angular 2, now just Angular) …
Learn how to connect your Angular frontend to a Node.js, Express, and MongoDB backend by building a real application
About This Video
In Detail
This course will take you on a journey where you'll you will learn to create modern, scalable, and high-speed web applications with Angular (formerly Angular 2, now just Angular) and Node.js, Express, and MongoDB. Angular 1 and Node.js—together with Express.js (a Node.js 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+. This course is no Angular course , but it includes detailed explanations of the core concepts used as well as about Angular in general.
The code bundle for this video course is available at https://github.com/PacktPublishing/Angular-and-Node.js---The-MEAN-Stack-Guide
Chapter 1 : Getting Started
Introduction 00:01:29
What is MEAN? 00:10:36
What is a Single Page Application (SPA)? 00:02:09
How Does the MEAN Stack Work? 00:02:59
Installing Node & the Angular CLI 00:07:50
Installing our IDE 00:03:13
Exploring the Project Structure 00:04:03
Course Outline 00:03:28
How To Get The Most Out Of This Course 00:01:42
Chapter 2 : The Angular Frontend - Understanding the Basics
Module Introduction 00:01:41
Understanding the Folder Structure 00:06:40
Understanding Angular Components 00:02:39
Adding our First Component 00:08:01
Listening to Events 00:03:43
Outputting Content 00:05:34
Getting User Input 00:06:04
Installing Angular Material 00:12:16
Adding a Toolbar 00:03:57
Outputting Posts 00:06:38
Diving Into Structural Directives 00:05:41
Creating Posts with Property & Event Binding 00:07:38
Creating a Post Model 00:04:36
Adding Forms 00:08:19
Getting Posts from Post-Create to Post-List 00:09:26
Calling GET Post 00:11:16
More About Observables 00:05:51
Working on our Form 00:03:51
Chapter 3 : Adding NodeJS to our Project
Module Introduction 00:02:03
Connecting Node & Angular – Theory 00:04:38
What is a RESTful API? 00:04:46
Adding the Node Backend 00:08:21
Adding the Express Framework 00:07:38
Improving the server.js Code 00:04:40
Fetching Initial Posts 00:05:58
Using the Angular HTTP Client 00:09:21
Understanding CORS 00:05:32
Adding the POST Backend Point 00:05:28
Adding Angular 00:05:08
Chapter 4 : Working with MongoDB
Module Introduction 00:01:04
What is MongoDB? 00:01:49
Comparing SQL & NoSQL 00:04:26
Connecting Angular to a Database 00:02:07
Setting Up MongoDB 00:05:14
Adding Mongoose 00:03:02
Understanding Mongoose Schemas & Models 00:05:45
Creating a POST Instance 00:04:08
Connecting our Node Express App to MongoDB 00:03:10
Storing Data in a Database 00:05:52
Fetching Data From a Database 00:05:35
Transforming Response Data 00:05:08
Deleting Documents 00:07:37
Updating the Frontend after Deleting Posts 00:03:03
Adding Posts with an ID 00:07:08
Chapter 5 : Enhancing the App
Module Introduction 00:01:11
Adding Routing 00:10:12
Styling Links 00:04:00
Client Side vs Server Side Routing 00:02:44
Creating the “edit” Form 00:10:39
Finishing the Edit Feature 00:11:09
Updating Posts on the Server 00:09:21
Re-Organizing Backend Routes 00:05:54
Adding Loading Spinners 00:09:05
Chapter 6 : Adding Image Uploads to our App
Module Introduction 00:00:44
Adding the File Input Button 00:04:52
Converting the Form from a Template Driven to a Reactive Approach 00:13:42
Adding Image Controls to Store the Image 00:06:59
Adding an Image Preview 00:04:58
Starting with the Mime-Type Validator 00:08:20
Finishing the Image Validator 00:07:17
Adding Server Side Upload 00:08:23
Uploading Files 00:06:06
Working with the File URL 00:06:18
Fetching Images on the Frontend 00:06:37
Updating Posts with Images 00:13:21
Wrap Up 00:00:54
Chapter 7 : Adding Pagination
Module Introduction 00:01:04
Adding the Pagination Component 00:07:19
Working on the Pagination Backend 00:08:09
Connecting the Angular Paginator to the Backend 00:05:24
Fetching Posts Correctly 00:06:10
Finishing Touches 00:04:48
Chapter 8 : Adding User Authentication
Module Introduction 00:00:59
Adding the Login Input Fields 00:08:16
Handling User Input 00:03:42
Adding the Signup Screen 00:03:33
Creating the User Model 00:06:23
Creating a New User Upon Request 00:05:30
Connecting Angular to the Backend 00:06:39
Understanding SPA Authentication 00:03:40
Implementing SPA Authentication 00:09:33
Sending the Token to the Frontend 00:05:44
Adding Middleware to Protect Routes 00:11:48
Adding the Token to Authenticate Requests 00:13:45
Improving the UI Header to Reflect the Authentication Status 00:07:24
Improving the UI Messages to Reflect the Authentication Status 00:06:20
Connecting the Logout Button to the Authentication Status 00:02:33
Redirecting Users 00:04:26
Adding Route Guards 00:06:49
Reflecting the Token Expiration in the UI 00:06:12
Saving the Token in the Local Storage 00:15:54
Chapter 9 : Authorization
Module Introduction 00:01:10
Adding a Reference to the Model 00:03:28
Adding the User ID to Posts 00:07:03
Protecting Resources with Authorization 00:08:19
Passing the User ID to the Frontend 00:07:24
Using the User ID on the Frontend 00:05:12
Chapter 10 : Handling Errors
Module Introduction 00:01:14
Testing Different Places to Handle Errors 00:09:50
The Error Interceptor 00:08:01
Displaying the Basic Error Dialog 00:05:13
Adding an Error Dialog 00:05:26
Returning Error Messages on the Server 00:07:10
Finishing Touches 00:03:03
Chapter 11 : Optimizations
Module Introduction 00:00:34
Using Controllers 00:08:16
Separating the Middleware 00:03:30
Creating an Angular Material Module 00:04:20
Splitting the App Into Feature Modules 00:05:14
Fixing an Update Bug 00:02:32
Creating the Auth Module 00:04:09
Adding Lazy Loading 00:07:58
Using a Global Angular Config 00:06:18
Using Node Environment Variables 00:05:26
Chapter 12 : Deploying our App
Module Introduction 00:00:41
Deployment Options 00:04:00
Deploying the REST Api 00:13:35
Angular Deployment - Finishing the Two App Setup 00:09:51
Using the Integrated Approach 00:09:37
Chapter 13 : Course Roundup
Course Roundup 00:01:37