Angular and Node.js - The MEAN Stack Guide [Video]

Preview Online

Code Files

Angular and Node.js - The MEAN Stack Guide [Video]

Maximilian Schwarzmüller

Monday, October 29, 2018

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

Quick links: > Table of contents > What will you learn? > Preview

Packt Subscription

FREE

$9.99/m after trial

Video

$110.50

RRP $129.99

Save 14%

What do I get with a Packt subscription?

Exclusive monthly discount - no contract
Unlimited access to entire Packt library of 6500+ eBooks and Videos
120 new titles added every month, on new and emerging tech

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

$0.00

$110.50

$0 p/m after trial

RRP $129.99

Subscription

Video

Start a FREE 10-day trial

Frequently bought together

Angular and Node.js - The MEAN Stack Guide [Video]

$ 129.99

$ 110.50

Angular and Node.js - The MEAN Stack Guide [Video]

Oct 2018

12 hours 35 minutes

$ 110.50

Full Stack Web Development with Vue.js and Node.js [Video]

$ 124.99

$ 106.25

Full Stack Web Development with Vue.js and Node.js [Video]

Jan 2019

2 hours 40 minutes

$ 106.25

Buy 2 for $216.75
Save $38.23

Add to Cart

Video Details

ISBN 13 9781789959741

Course Length 12 hours 35 minutes

Getting Started

Introduction

What is MEAN?

What is a Single Page Application (SPA)?

How Does the MEAN Stack Work?

Installing Node & the Angular CLI

Installing our IDE

Exploring the Project Structure

Course Outline

How To Get The Most Out Of This Course

The Angular Frontend - Understanding the Basics

Module Introduction

Understanding the Folder Structure

Understanding Angular Components

Adding our First Component

Listening to Events

Outputting Content

Getting User Input

Installing Angular Material

Adding a Toolbar

Outputting Posts

Diving Into Structural Directives

Creating Posts with Property & Event Binding

Creating a Post Model

Adding Forms

Getting Posts from Post-Create to Post-List

Calling GET Post

More About Observables

Working on our Form

Adding NodeJS to our Project

Module Introduction

Connecting Node & Angular – Theory

What is a RESTful API?

Adding the Node Backend

Adding the Express Framework

Improving the server.js Code

Fetching Initial Posts

Using the Angular HTTP Client

Understanding CORS

Adding the POST Backend Point

Adding Angular

Working with MongoDB

Module Introduction

What is MongoDB?

Comparing SQL & NoSQL

Connecting Angular to a Database

Setting Up MongoDB

Adding Mongoose

Understanding Mongoose Schemas & Models

Creating a POST Instance

Connecting our Node Express App to MongoDB

Storing Data in a Database

Fetching Data From a Database

Transforming Response Data

Deleting Documents

Updating the Frontend after Deleting Posts

Adding Posts with an ID

Enhancing the App

Module Introduction

Adding Routing

Styling Links

Client Side vs Server Side Routing

Creating the "edit" Form

Finishing the Edit Feature

Updating Posts on the Server

Re-Organizing Backend Routes

Adding Loading Spinners

Adding Image Uploads to our App

Module Introduction

Adding the File Input Button

Converting the Form from a Template Driven to a Reactive Approach

Adding Image Controls to Store the Image

Adding an Image Preview

Starting with the Mime-Type Validator

Finishing the Image Validator

Adding Server Side Upload

Uploading Files

Working with the File URL

Fetching Images on the Frontend

Updating Posts with Images

Wrap Up

Adding Pagination

Module Introduction

Adding the Pagination Component

Working on the Pagination Backend

Connecting the Angular Paginator to the Backend

Fetching Posts Correctly

Finishing Touches

Adding User Authentication

Module Introduction

Adding the Login Input Fields

Handling User Input

Adding the Signup Screen

Creating the User Model

Creating a New User Upon Request

Connecting Angular to the Backend

Understanding SPA Authentication

Implementing SPA Authentication

Sending the Token to the Frontend

Adding Middleware to Protect Routes

Adding the Token to Authenticate Requests

Improving the UI Header to Reflect the Authentication Status

Improving the UI Messages to Reflect the Authentication Status

Connecting the Logout Button to the Authentication Status

Redirecting Users

Adding Route Guards

Reflecting the Token Expiration in the UI

Saving the Token in the Local Storage

Authorization

Module Introduction

Adding a Reference to the Model

Adding the User ID to Posts

Protecting Resources with Authorization

Passing the User ID to the Frontend

Using the User ID on the Frontend

Handling Errors

Module Introduction

Testing Different Places to Handle Errors

The Error Interceptor

Displaying the Basic Error Dialog

Adding an Error Dialog

Returning Error Messages on the Server

Finishing Touches

Optimizations

Module Introduction

Using Controllers

Separating the Middleware

Creating an Angular Material Module

Splitting the App Into Feature Modules

Fixing an Update Bug

Creating the Auth Module

Adding Lazy Loading

Using a Global Angular Config

Using Node Environment Variables

Deploying our App

Module Introduction

Deployment Options

Deploying the REST Api

Angular Deployment - Finishing the Two App Setup

Using the Integrated Approach

Course Roundup

Video Description

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

Style and Approach

This course follows a hands-on approach, which means that the whole course is structured around one big application and the different concepts are explained in detail as they are introduced in this application.

Video Preview

What You Will Learn

Build real Angular and Node.js applications
Connect any Angular frontend with a Node.js backend
Use MongoDB with Mongoose to interact with data on the backend
Use Express.js as a Node.js framework
Provide a great user experience by using Optimistic Updating on the frontend
Improve any Angular (and Node.js) application by adding error handling
Use Node.js and Express efficiently
Build reusable components in Angular and create a reactive user experience with the tools provided by Angular
Connect your Node.js (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 such as file upload and pagination

Authors

Maximilian Schwarzmüller

Academind GmbH - Online Education

Bundling the courses and knowhow of successful instructors, Academind strives to deliver high-quality online education. Online Education, Real-Life Success—that's what Academind stands for. Learn topics like web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller - Professional Web Developer and Instructor

Since the age of 13, Maximilian Schwarzmüller has never stopped learning new programming skills and languages. In the early days, he started creating websites for friends and for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. The success and fun he has in this job is immense and really keeps that passion alive. Although he started web development on the back end (PHP with Laravel and NodeJS), he has increasingly become a front-end developer using modern frameworks such as React, Angular, or VueJS 2 in a lot of projects. He loves both worlds nowadays! As a self-taught developer, he had broadened his horizon by studying Business Administration, resulting in a Master's degree. This enabled him to work in a major strategy consultancy as well as a bank. Whilst learning and developing his skills, he realized that he enjoyed development more than these fields.

As a self-taught professional, Max is familiar with the difficult topics when learning new or improving on already-known languages. This background and experience enables him to focus on the most relevant key concepts and topics. His track record is the best proof of that. Whether working as development instructor or teaching Business Administration, he always receives great feedback. The most rewarding experience is to see how people find new and better jobs, build awesome web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Getting Started

Introduction

What is MEAN?

What is a Single Page Application (SPA)?

How Does the MEAN Stack Work?

Installing Node & the Angular CLI

Installing our IDE

Exploring the Project Structure

Course Outline

How To Get The Most Out Of This Course

The Angular Frontend - Understanding the Basics

Module Introduction