Angular and Node.js - The MEAN Stack Guide

Video Description

Learn how to connect your Angular frontend to a Node.js, Express, and MongoDB backend by building a real application

About This Video

  • Learn to connect your Angular frontend to a Node.js
  • Understand how Angular works and how it interacts with backends

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

Table of Contents

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

Product Information

  • Title: Angular and Node.js - The MEAN Stack Guide
  • Author(s): Maximilian Schwarzmüller
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789959741