O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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