Angular & NodeJS - The MEAN Stack Guide
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
Learn how to create modern, scalable and high-speed web applications with Angular + 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.
I'm Maximilian Schwarzmüller, an experienced web developer as well as author of many 5-star rated Udemy courses and host of the "Academind" coding channel on YouTube. I 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’t stop at the basics!
Do you know those courses which show you a "Hello World“ example and then call it an end? That won’t 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’t 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!
Please note that this course was recorded with an older version of Angular & Angular Material. The code shown in the videos might not always work with the latest versions of these packages. The general concepts & solution steps still apply, of course.
FAQ area empty
Introduction
117 Xem trướcWhat is MEAN?
635 Xem trướcJoin our Online Learning Community
Xem trướcWhat is a Single Page Application (SPA)?
128How Does the MEAN Stack Work?
178 Xem trướcMUST READ: Angular & Angular Material Versions
Installing Node & the Angular CLI
470 Xem trướcInstalling our IDE
193 Xem trướcExploring the Project Structure
242Course Outline
207How To Get The Most Out Of This Course
173 Xem trướcSection Resources
Module Introduction
100Understanding the Folder Structure
400Understanding Angular Components
159Adding our First Component
481Listening to Events
223Outputting Content
334Getting User Input
363Installing Angular Material
934Adding a Toolbar
237Outputting Posts
397Diving Into Structural Directives
340Creating Posts with Property & Event Binding
458Creating a Post Model
275Adding Forms
498Getting Posts from Post-Create to Post-List
566Calling GET Post
676More About Observables
351Working on our Form
231Section Resources
Module Introduction
123Connecting Node & Angular - Theory
277What is a RESTful API?
285Adding the Node Backend
500Adding the Express Framework
457Improving the server.js Code
280Fetching Initial Posts
357Using the Angular HTTP Client
560Understanding CORS
331Adding the POST Backend Point
327Adding Angular
307Section Resources
Module Introduction
64What is MongoDB?
108Comparing SQL & NoSQL
266Connecting Angular to a Database
127Setting Up MongoDB
314Using MongoDB Atlas & IP Whitelist
Adding Mongoose
181Understanding Mongoose Schemas & Models
345Creating a POST Instance
248Connecting our Node Express App to MongoDB
190Storing Data in a Database
351Fetching Data From a Database
334Transforming Response Data
307Deleting Documents
457Updating the Frontend after Deleting Posts
182Adding Posts with an ID
427Section Resources
Module Introduction
44Adding the File Input Button
291Converting the Form from a Template Driven to a Reactive Approach
821Adding Image Controls to Store the Image
419Adding an Image Preview
298Starting with the Mime-Type Validator
500Finishing the Image Validator
437Adding Server Side Upload
503Uploading Files
365Working with the File URL
378Beware of the Spread (...) Operator
Fetching Images on the Frontend
397Updating Posts with Images
800Wrap Up
54Section Resources
Module Introduction
59Adding the Login Input Fields
495Handling User Input
222Adding the Signup Screen
212Creating the User Model
383Creating a New User Upon Request
330Connecting Angular to the Backend
398Understanding SPA Authentication
219Implementing SPA Authentication
572Sending the Token to the Frontend
343Adding Middleware to Protect Routes
707Adding the Token to Authenticate Requests
825Improving the UI Header to Reflect the Authentication Status
443Improving the UI Messages to Reflect the Authentication Status
379Connecting the Logout Button to the Authentication Status
152Redirecting Users
265Adding Route Guards
408Reflecting the Token Expiration in the UI
372Saving the Token in the Local Storage
954Section Resources
Module Introduction
34Using Controllers
496Separating the Middleware
210Creating an Angular Material Module
260Splitting the App Into Feature Modules
314Fixing an Update Bug
151Creating the Auth Module
248Adding Lazy Loading
575Fixing the AuthGuard
Using a Global Angular Config
378Using Node Environment Variables
326Section Resources
Concepts behind NodeJS, Express and MongoDB (with Mongoose) will be refreshed in this course but as this course is focused on the connection of these technologies with Angular, basic knowledge about them is strongly recommended
It is recommended to have beginner-level Angular knowledge, though this course will provided a detailed refresher and will explain the core concepts used in detail
HTML, CSS and basic JavaScript knowledge is assumed throughout this course
NO advanced or expert knowledge about any of these topics is assumed or required
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