w3docs logo
Connexion

Angular & NodeJS - The MEAN Stack Guide

Learn how to connect your Angular frontend to a NodeJS & Express & MongoDB backend by building a real application

Start
  1. Courses
  3. Angular & NodeJS - The MEAN Stack Guide

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, I (Maximilian), an experienced web developer as well as author of many top-rated 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!

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 features like 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!

Section: Getting Started

1. Introduction (1:54) Preview
2. What is MEAN? (10:35) Preview
3. What is a Single Page Application (SPA)? (2:08) Preview
4. How Does the MEAN Stack Work? (2:58) Preview
5. Installing Node & the Angular CLI (7:50) Preview
6. Join our Online Learning Community (1:00) Preview
7. Installing our IDE (3:13) Preview
8. Exploring the Project Structure (4:02) Preview
9. Course Outline (3:27) Preview
10. How To Get The Most Out Of This Course (2:47) Preview
11. Section Resources (1:00) Preview

Section: The Angular Frontend - Understanding the Basics

12. Module Introduction (1:40)
13. Understanding the Folder Structure (6:40)
14. Understanding Angular Components (2:39)
15. Adding our First Component (8:01)
16. Listening to Events (3:43)
17. Outputting Content (5:34)
18. Getting User Input (6:03)
19. Installing Angular Material (15:34)
20. Adding a Toolbar (3:57)
21. Outputting Posts (6:37)
22. Diving Into Structural Directives (5:40)
23. Creating Posts with Property & Event Binding (7:38)
24. Creating a Post Model (4:35)
25. Adding Forms (8:18)
26. Getting Posts from Post-Create to Post-List (9:26)
27. Calling GET Post (11:14)
28. More About Observables (5:51)
29. Working on our Form (3:51)
30. Section Resources (1:00)

Section: Adding NodeJS to our Project

31. Module Introduction (2:03)
32. Connecting Node & Angular - Theory (4:37) Preview
33. What is a RESTful API? (4:45) Preview
34. Adding the Node Backend (8:20)
35. Adding the Express Framework (7:37)
36. Improving the server.js Code (4:40)
37. Fetching Initial Posts (5:57)
38. Using the Angular HTTP Client (9:20)
39. Understanding CORS (5:31)
40. Adding the POST Backend Point (5:27)
41. Adding Angular (5:07)
42. Section Resources (1:00)

Section: Working with MongoDB

43. Module Introduction (1:04)
44. What is MongoDB? (1:48)
45. Comparing SQL & NoSQL (4:26)
46. Connecting Angular to a Database (2:07)
47. Setting Up MongoDB (5:14)
48. Adding Mongoose (3:01)
49. Understanding Mongoose Schemas & Models (5:45)
50. Creating a POST Instance (4:08)
51. Connecting our Node Express App to MongoDB (3:10)
52. Storing Data in a Database (5:51)
53. Fetching Data From a Database (5:34)
54. Transforming Response Data (5:07)
55. Deleting Documents (7:37)
56. Updating the Frontend after Deleting Posts (3:02)
57. Adding Posts with an ID (7:07)
58. Section Resources (1:00)

Section: Enhancing the App

59. Module Introduction (1:11)
60. Adding Routing (10:12)
61. Styling Links (3:59)
62. Client Side vs Server Side Routing (2:44)
63. Creating the "Edit" Form (10:38)
64. Finishing the Edit Feature (11:09)
65. Updating Posts on the Server (9:21)
66. Re-Organizing Backend Routes (5:54)
67. Adding Loading Spinners (9:05)
68. Section Resources (1:00)

Section: Adding Image Uploads to our App

69. Module Introduction (0:44)
70. Adding the File Input Button (4:51)
71. Converting the Form from a Template Driven to a Reactive Approach (13:41)
72. Adding Image Controls to Store the Image (6:59)
73. Adding an Image Preview (4:58)
74. Starting with the Mime-Type Validator (8:20)
75. Finishing the Image Validator (7:17)
76. Adding Server Side Upload (8:23)
77. Uploading Files (6:05)
78. Working with the File URL (6:18)
79. Fetching Images on the Frontend (6:37)
80. Updating Posts with Images (13:20)
81. Wrap Up (0:54)
82. Section Resources (1:00)

Section: Adding Pagination

83. Module Introduction (1:04)
84. Adding the Pagination Component (7:18)
85. Working on the Pagination Backend (8:08)
86. Connecting the Angular Paginator to the Backend (5:24)
87. Fetching Posts Correctly (6:09)
88. Finishing Touches (4:48)
89. Section Resources (1:00)

Section: Adding User Authentication

90. Module Introduction (0:59)
91. Adding the Login Input Fields (8:15)
92. Handling User Input (3:42)
93. Adding the Signup Screen (3:32)
94. Creating the User Model (6:23)
95. Creating a New User Upon Request (5:30)
96. Connecting Angular to the Backend (6:38)
97. Understanding SPA Authentication (3:39)
98. Implementing SPA Authentication (9:32)
99. Sending the Token to the Frontend (5:43)
100. Adding Middleware to Protect Routes (11:47)
101. Adding the Token to Authenticate Requests (13:45)
102. Improving the UI Header to Reflect the Authentication Status (7:23)
103. Improving the UI Messages to Reflect the Authentication Status (6:19)
104. Connecting the Logout Button to the Authentication Status (2:32)
105. Redirecting Users (4:25)
106. Adding Route Guards (6:48)
107. Reflecting the Token Expiration in the UI (6:12)
108. Saving the Token in the Local Storage (15:54)
109. Section Resources (1:00)

Section: Authorization

110. Module Introduction (1:09)
111. Adding a Reference to the Model (3:28)
112. Adding the User ID to Posts (7:02)
113. Protecting Resources with Authorization (8:19)
114. Passing the User ID to the Frontend (7:24)
115. Using the User ID on the Frontend (5:11)
116. Section Resources (1:00)

Section: Handling Errors

117. Module Introduction (1:14)
118. Testing Different Places to Handle Errors (9:49)
119. The Error Interceptor (8:01)
120. Displaying the Basic Error Dialog (5:13)
121. Adding an Error Dialog (5:26)
122. Returning Error Messages on the Server (7:10)
123. Finishing Touches (3:03)
124. Section Resources (1:00)

Section: Optimizations

125. Module Introduction (0:34)
126. Using Controllers (8:16)
127. Separating the Middleware (3:30)
128. Creating an Angular Material Module (4:20)
129. Splitting the App Into Feature Modules (5:14)
130. Fixing an Update Bug (2:31)
131. Creating the Auth Module (4:08)
132. Adding Lazy Loading (9:35)
133. Fixing the Auth Guard (1:00)
134. Using a Global Angular Config (6:18)
135. Using Node Environment Variables (5:26)
136. Section Resources (1:00)

Section: Deploying our App

137. Module Introduction (0:40)
138. Deployment Options (3:59)
139. Deploying the REST Api (13:34)
140. Angular Deployment - Finishing the Two App Setup (9:51)
141. Using the Integrated Approach (9:37)
142. Section Resources (1:00)

Section: Course Roundup

143. Roundup (2:05)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.