UDEMY
UDEMY Logo

Angular & NodeJS - The MEAN Stack Guide 

  • Offered byUDEMY

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 
Overview

Duration

13 hours

Total fee

9,600

Mode of learning

Online

Difficulty level

Intermediate

Credential

Certificate

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 
Highlights

  • Compatible on Mobile and TV
  • Earn a certificate on successful completion
  • Get Full Lifetime Access
Details Icon

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 
Course details

Who should do this course?
  • This course is for everyone interested in putting existing Angular and NodeJS knowledge into action
  • If you're familiar with the basics of Angular and NodeJS, this course provides a detailed guide on how to connect both technologies
  • Everyone interested in building a modern, full-stack application
  • Students who want to exercise with their NodeJS and Angular skills will find a great opportunity to do so
What are the course deliverables?
  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling
More about this course
  • Create modern, scalable and high-speed Web Applications with Angular (formerly named Angular 2, now just "Angular") and Node. Js + Express + MongoDB. Angular 1 and NodeJS, together with ExpressJS (a NodeJS 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+. Benefit from the many improvements and advantages Angular offers you: Speed, ease of development, highly reactive, awesome support for asynchronous operations, great scalability and more! And combine these advantages with the power of a NodeJS + Express + MongoDB backend! Learn or refresh the Angular Basics! This course is no Angular course, but it includes detailed explanations of the core concepts used as well as about Angular in general. However, keep in mind that, as this course is no Angular course, having additional resources like my "Angular - The Complete Guide" course is recommended. In this course, Maximilian, experienced web developer as well as author of many 5-star rated Udemy courses and host of the "Academind" coding channel on YouTube, will take you on a hands-on journey to get you to build your own Angular + NodeJS Applications in no time. This course follows a hands-on approach, which means that the whole course is structured around one big application and the different concepts will be explained detailedly as they are introduced in this application. Specifically, you will learn how to: Set up a NodeJS + Express + MongoDB + Angular Application with the help of the Angular CLI Use NodeJS and Express efficiently Build reusable Components in Angular and create a reactive User Experience with the Tools provided by Angular Connect your NodeJS (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 like file upload and pagination Make your Application more secure by implementing Users, Authentication as well as Authorization Handle Errors gracefully And much more...! This hands-on concept allows you to not get stuck in the theory, but instantly see real implementation examples! Hear what students of other courses as well as viewers of my YouTube channel have to say Max has gone through great lengths to create great content and this course has been great. His teaching style covers everything from basic to advanced topics, and his explanations have been thorough on each topic Max demonstrates very good knowledge of the subject matter and great enthusiasm in delivering the lectures. Max does a wonderful job making the core concepts of Angular approachable and accessible. Don'¢'?'? stop at the basics! Do you know those courses which show you a "Hello World'¢'?'? example and then call it an end? That won'¢'?'? happen to you in this course. While beginning with a very basic app and basic features, you will quickly be able to incorporate many different Routes, Observables, Events, Authentication and Authorization, Error Handling and much more into your applications. The best thing is: You'¢'?'? ll learn all that by putting it into practice immediately! No wall of powerpoint slides, no unrealistic mini-examples '¢'?'? this is the real deal! Who should take this course? Basic NodeJS/Express and Angular Experience is strongly recommended You should be familiar with HTML, CSS and JavaScript basics, too MongoDB (+ Mongoose) knowledge is a plus as MongoDB will be used in this course but won'¢'?'? be subject of in-depth explanations NO expert or advanced knowledge on any of these topics is required or assumed By the end of this course, you will be able to create your own, awesome NodeJS + Angular applications!
Read more

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 
Curriculum

Getting Started

Introduction

Introduction

What is MEAN?

Join our Online Learning Community

What is a Single Page Application (SPA)?

How Does the MEAN Stack Work?

MUST READ: Angular CLI - Latest Version

Installing Node & the Angular CLI

Installing our IDE

Exploring the Project Structure

Course Outline

How To Get The Most Out Of This Course

Section Resources

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 the Right Version of Angular Material

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

Section Resources

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

Section Resources

Working with MongoDB

Module Introduction

What is MongoDB?

Comparing SQL & NoSQL

Connecting Angular to a Database

Setting Up MongoDB

Using MongoDB Atlas & IP Whitelist

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

Section Resources

Enhancing the App

Module Introduction

Adding Routing

Styling Links

Client Side vs Server Side Routing

Possible Error

Creating the "edit" Form

Finishing the Edit Feature

Finishing the "edit" Feature

Updating Posts on the Server

Re-Organizing Backend Routes

Adding Loading Spinners

Section Resources

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

Adding an Image Preview

Starting with the Mime-Type Validator

Finishing the Image Validator

Finishing the Image Validator

Adding Server Side Upload

Uploading Files

Working with the File URL

Beware of the Spread (...) Operator

Fetching Images on the Frontend

Updating Posts with Images

Wrap Up

Section Resources

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

Section Resources

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

Section Resources

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

Section Resources

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

Section Resources

Optimizations

Module Introduction

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

Fixing the AuthGuard

Using a Global Angular Config

Using Node Environment Variables

Section Resources

Deploying our App

Module Introduction

Deployment Options

Deploying the REST Api

Deploying Angular

Angular Deployment - Finishing the Two App Setup

Using the Integrated Approach

Section Resources

Course Roundup

Course Roundup

Bonus: More Content!

OLD: Getting Started

Why is it "OLD"?

Introduction

What is NodeJS?

What is Angular 2?

How Angular 2 and NodeJS Work Together

About the Course Structure

Setting up the Course Project

Understanding the Project Structure

OLD: NodeJS Basics

Introduction

Understanding the Flow of a Request

Working with Requests and Responses

Creating Routes and Passing Data

Knowledge Injection: Http Methods

Knowledge Injection: Data Formats

More on NodeJS

OLD: MongoDB Basics

Introduction

Setting up MongoDB

Starting a MongoDB Server

Using the MongoDB Shell Client

Connecting with Mongoose 5+

Using Mongoose to work with Data and Models

MUST READ: Mongoose Connection Changes

Using Mongoose in NodeJS

Creating the Project Models with Mongoose

Storing Data in the Database

Fetching Data from the Database

Wrap Up

More on MongoDB

OLD: Creating the Frontend with Angular 2

Introduction

Rendering an Angular 2 App with NodeJS / Express

Knowledge Injection - Components

Starting an Angular 2 App

Understanding Decorators

Outputting Data with String Interpolation

Working with Templates and Styles

Two-Way-Binding

Adding Custom Models

Improving the Folder Structure

Multiple Components

Knowledge Injection - Property and Event Binding

Using Property Binding

Using Event Binding

Knowledge Injection - Directives

Understanding Attribute Directives

Using NgFor to Output a List

Adding Input and List Components

Knowledge Injection - Services & Dependency Injection

Creating a Service

Adding Messages with a Service

Getting Messages via a Service

One Instance to Rule them All

Enabling Default HTML Validation in Angular 4

Adding Messages with a Template-Driven Form

Creating a Header & Re-Structuring the Project

Setting Up Routing

Routing & Navigation

Routing and the Server

Creating User-related Components

Adding Child Routes

User Signup with Reactive (Data-Driven) Forms

Finishing the Frontend

OLD: Connecting the Angular 2 Frontend with the NodeJS Backend

Introduction

Backend - Saving Messages

Knowledge Injection - Angular 2 & Http

Saving Messages - Wiring Up Frontend and Backend

Backend - Getting Messages

Getting Messages - Wiring Up Frontend and Backend

Editing Messages - Preparing the Frontend

Backend - Updating Messages

Editing Messages - Wiring Up Frontend and Backend

Deleting Messages

OLD: Users and Authentication

Introduction

How Authentication works in a MEAN Application

Backend - Signing Up

Signing Up Users - Wiring Up Frontend and Backend

Backend - Sign In

More Information on JWT

User Sign In - Wiring Up Frontend and Backend

Logging Users Out

Checking the Login State

Backend Route Protection with JWT

Fixing a Mongoose Bug

Connecting Users with Messages

Sending Requests with a Token

Handle User Authorization

Passing the User Object with Messages

Frontend Authorization Check

Wrap Up

OLD: Error Handling

Introduction

Setup

The Error Component

The Error Service

Using an Error Service & Passing Data

OLD: App Optimizations and Deployment

Introduction

Creating a Message Module

Using an Auth Module and Lazy Loading

Compiling the Compilation Ahead of Time (AoT)

More on Angular 2 Modules

Deployment Preparations

Deployment Disclaimer

Setting up MongoLab to Host the MongoDB

Deploying to Heroku

Deploying to AWS Elastic Beanstalk (AWS EC2 + AWS S3)

OLD: Creating a Custom Seed Project

Introduction

Setting up NodeJS & Express

Preparing the Backend

Installing Production Dependencies and Types

Installing Development Dependencies and Setting up a Common Webpack Config

Setting up a Development Workflow with Webpack

Creating the Angular 2 Frontend

Adding a Development Workflow Script

Setting up the Production Workflow (using AoT Compilation)

Updating the Custom Seed to Angular 6 and Webpack 4

Updating Angular 2

Angular 2 Update from Beta to RC Version

Updating from Release Candidate to Final Release

Other courses offered by UDEMY

649
– / –
529
– / –
– / –
– / –
529
– / –
View Other 2339 CoursesRight Arrow Icon

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 
Students Ratings & Reviews

4.7/5
Verified Icon6 Ratings
D
Divya
Angular & NodeJS - The MEAN Stack Guide
5
Other: It was knowledgeable. Got deep knowledge of the course
Reviewed on 4 Dec 2020Read More
Thumbs Up IconThumbs Down Icon
K
Keerthi
Angular & NodeJS - The MEAN Stack Guide
5
Other: The course contain hands on experience , a spa building . You will gain lot of knowledge.
Reviewed on 12 Nov 2020Read More
Thumbs Up IconThumbs Down Icon
S
Syed Ghouse
Angular & NodeJS - The MEAN Stack Guide
4
Other: Training was good, explained very well and very informative
Reviewed on 6 Nov 2020Read More
Thumbs Up IconThumbs Down Icon
A
Aditya
Angular & NodeJS - The MEAN Stack Guide
5
Other: Awesome
Reviewed on 16 Oct 2020Read More
Thumbs Up IconThumbs Down Icon
P
Prasanna D
Angular & NodeJS - The MEAN Stack Guide
4
Other: My learning experience is very good and there is good opportunity on online learning, I'll find the lots of stuff out there and I can learn anything I wanted to learn
Reviewed on 4 Jun 2020Read More
Thumbs Up IconThumbs Down Icon
View All 5 ReviewsRight Arrow Icon
qna

Angular & NodeJS - The MEAN Stack Guide
 at 
UDEMY 

Student Forum

chatAnything you would want to ask experts?
Write here...