Connect Angular 2+ Frontend with a NodeJS Backend Video Course

Curriculum For This Course

• 1. Getting Started 7 Videos 00:23:28
  • Introduction 02:03
  • What is NodeJS? 01:54
  • What is Angular 2? 01:46
  • How Angular 2 and NodeJS Work Together 03:58
  • About the Course Structure 02:56
  • Setting up the Course Project 04:26
  • Understanding the Project Structure 06:27
• 2. NodeJS Basics 6 Videos 00:24:40
  • Introduction 00:56
  • Understanding the Flow of a Request 09:37
  • Working with Requests and Responses 03:55
  • Creating Routes and Passing Data 05:26
  • Knowledge Injection: Http Methods 01:51
  • Knowledge Injection: Data Formats 02:56
• 3. MongoDB Basics 10 Videos 00:33:26
  • Introduction 01:52
  • Setting up MongoDB 02:33
  • Starting a MongoDB Server 01:28
  • Using the MongoDB Shell Client 02:09
  • Using Mongoose to work with Data and Models 01:21
  • Using Mongoose in NodeJS 02:28
  • Creating the Project Models with Mongoose 10:44
  • Storing Data in the Database 06:12
  • Fetching Data from the Database 04:04
  • Wrap Up 00:35
• 4. Creating the Frontend with Angular 2 32 Videos 02:23:28
  • Introduction 01:18
  • Rendering an Angular 2 App with NodeJS / Express 03:13
  • Knowledge Injection - Components 01:51
  • Starting an Angular 2 App 06:51
  • Understanding Decorators 00:58
  • Outputting Data with String Interpolation 02:30
  • Working with Templates and Styles 04:53
  • Two-Way-Binding 03:48
  • Adding Custom Models 07:57
  • Improving the Folder Structure 01:29
  • Multiple Components 06:32
  • Knowledge Injection - Property and Event Binding 04:10
  • Using Property Binding 04:02
  • Using Event Binding 06:17
  • Knowledge Injection - Directives 02:39
  • Understanding Attribute Directives 03:17
  • Using NgFor to Output a List 03:56
  • Adding Input and List Components 08:05
  • Knowledge Injection - Services & Dependency Injection 02:11
  • Creating a Service 02:54
  • Adding Messages with a Service 04:43
  • Getting Messages via a Service 04:25
  • One Instance to Rule them All 02:54
  • Enabling Default HTML Validation in Angular 4 11:04
  • Adding Messages with a Template-Driven Form 05:33
  • Creating a Header & Re-Structuring the Project 05:58
  • Setting Up Routing 03:21
  • Routing & Navigation 02:05
  • Routing and the Server 04:03
  • Creating User-related Components 07:44
  • Adding Child Routes 12:52
  • User Signup with Reactive (Data-Driven) Forms 03:31
• 5. Connecting the Angular 2 Frontend with the NodeJS Backend 10 Videos 01:11:06
  • Introduction 02:38
  • Backend - Saving Messages 09:08
  • Knowledge Injection - Angular 2 & Http 02:51
  • Saving Messages - Wiring Up Frontend and Backend 17:24
  • Backend - Getting Messages 03:45
  • Getting Messages - Wiring Up Frontend and Backend 07:22
  • Editing Messages - Preparing the Frontend 12:57
  • Backend - Updating Messages 04:28
  • Editing Messages - Wiring Up Frontend and Backend 05:48
  • Deleting Messages 04:48
• 6. Users and Authentication 15 Videos 01:21:15
  • Introduction 01:16
  • How Authentication works in a MEAN Application 02:49
  • Backend - Signing Up 07:02
  • Signing Up Users - Wiring Up Frontend and Backend 10:53
  • Backend - Sign In 12:16
  • User Sign In - Wiring Up Frontend and Backend 06:49
  • Logging Users Out 02:45
  • Checking the Login State 03:20
  • Backend Route Protection with JWT 06:11
  • Connecting Users with Messages 08:41
  • Sending Requests with a Token 05:24
  • Handle User Authorization 03:21
  • Passing the User Object with Messages 02:36
  • Frontend Authorization Check 06:10
  • Wrap Up 01:44
• 7. Error Handling 5 Videos 00:19:55
  • Introduction 00:53
  • Setup 02:34
  • The Error Component 07:51
  • The Error Service 02:37
  • Using an Error Service & Passing Data 06:00
• 8. App Optimizations and Deployment 8 Videos 00:28:26
  • Introduction 01:02
  • Creating a Message Module 04:32
  • Using an Auth Module and Lazy Loading 07:12
  • Compiling the Compilation Ahead of Time (AoT) 02:21
  • Deployment Preparations 01:18
  • Deployment Disclaimer 03:53
  • Setting up MongoLab to Host the MongoDB 08:08
  • Deploying to Heroku 09:18
• 9. Creating a Custom Seed Project 9 Videos 00:44:08
  • Introduction 00:28
  • Setting up NodeJS & Express 01:57
  • Preparing the Backend 05:03
  • Installing Production Dependencies and Types 02:55
  • Installing Development Dependencies and Setting up a Common Webpack Config 08:31
  • Setting up a Development Workflow with Webpack 02:39
  • Creating the Angular 2 Frontend 06:17
  • Adding a Development Workflow Script 02:46
  • Setting up the Production Workflow (using AoT Compilation) 13:34
• 10. Updating Angular 2 1 Videos 00:08:41
  • Angular 2 Update from Beta to RC Version 08:41