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

Maximilian Schwarzmüller

October 2018

12 hours 35 minutes

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

Quick links:

Description
Table of Contents
Reviews
Authors

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Watch Now

Description

More Information
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
About	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.
Features	Learn to connect your Angular frontend to a Node.js Understand how Angular works and how it interacts with backends
Course Length	12 hours 35 minutes
ISBN	9781789959741
Date Of Publication	29 Oct 2018

Table of contents

1 Getting Started

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

2 The Angular Frontend - Understanding the Basics

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

3 Adding NodeJS to our Project

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

4 Working with MongoDB

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

5 Enhancing the App

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

6 Adding Image Uploads to our App

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

7 Adding Pagination

Adding the Pagination Component
Working on the Pagination Backend
Connecting the Angular Paginator to the Backend
Fetching Posts Correctly
Finishing Touches

8 Adding User Authentication

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

9 Authorization

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

10 Handling Errors

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

11 Optimizations

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

12 Deploying our App

Deployment Options
Deploying the REST Api
Angular Deployment - Finishing the Two App Setup
Using the Integrated Approach

13 Course Roundup

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.

Feefo Reviews