Build an app with ASPNET Core and Angular from scratch

29h 51m 36s
English
Paid

Master both ASP.NET Core and Angular by building a full-stack Web Application from the ground up. Whether you're looking to solidify your foundation or ready to tackle more advanced integration, this hands-on course will guide you from start to finish. Develop a complete application, learn crucial deployment techniques, and enhance your coding prowess with two of the most in-demand frameworks today.

Course Overview

Embark on a journey to create a fully operational web application using ASP.NET Core 3.0 and Angular v8, completely from scratch. Updated as of November 2019, this course evolves alongside the frameworks.

Highlights from Our Students

Jim describes this as "The absolute best course for building an API in .Net core and working with Angular!"

Daniyal highlights its practicality, saying, "This is a complete project-based course from start to finish with real-world experience using technologies that are currently in demand."

What You'll Learn

  • Setting up the developer environment
  • Creating the ASP.NET Core WebAPI and Angular app using DotNet and Angular CLI
  • Implementing client-side login and registration
  • Integrating 3rd party components for enhanced design
  • Establishing routing and securing routes in Angular
  • Utilizing Automapper in ASP.NET Core
  • Designing a modern UI with Bootstrap
  • Adding photo upload functionality with a gallery
  • Implementing Angular Template and Reactive forms
  • Sorting, Paging, and Filtering data
  • Developing a Private Messaging system
  • Publishing applications on IIS and Linux servers

Tools Required

The course demonstrates the use of Visual Studio Code, a versatile cross-platform editor, though you can use any editor or OS such as Windows, Linux, or Mac.

Is This Course for You?

If you're a hands-on learner eager to build a Dating Application project using ASP.NET Core and Angular, this course is ideal. A simple computer and enthusiasm to learn are all you need.

Course Prerequisites

  • Basic "Hello world" experience in ASP.NET Core and Angular
  • A keen interest in building fully functional web applications

Who Should Enroll?

  • Beginners eager to develop practical skills in ASP.NET Core and Angular
  • Students who prefer learning by doing rather than theoretical approaches

Key Learning Outcomes

  • Build and publish a web application using ASP.NET Core and Angular
  • Gain a practical understanding of Angular and ASP.NET Core
  • Follow best practices in Angular application structuring
  • Integrate 3rd party components into Angular projects
  • Maximize your workflow with Visual Studio Code
  • Implement advanced features like Photo Upload and Private Messaging
  • Integrate JWT for Authentication and manage errors effectively
  • Utilize Entity Framework Core for data persistence

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 263 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 263 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction to the course
All Course Lessons (263)
#Lesson TitleDurationAccess
1
Introduction to the course Demo
07:18
2
Setting up the developer environment
05:11
3
Getting help
02:54
4
Course assets and source code
02:16
5
Introduction
02:27
6
Creating the .Net API Project using the dotnet CLI
07:22
7
Setting up VS code to work with C#
07:18
8
.Net 6 update - switching to the classic hosting model
10:06
9
Getting to know the API project files
12:42
10
Creating our first Entity
05:45
11
Introduction to Entity Framework
06:35
12
Adding Entity Framework to our project
03:40
13
Adding a DbContext class
08:42
14
Creating the Connection string
11:57
15
Creating the database using Entity Framework Code first migrations
04:45
16
Adding a new API Controller
11:01
17
Making our code Asynchronous
06:22
18
Saving our code into Source control
10:31
19
Section 2 Summary
02:41
20
Introduction
01:57
21
Creating the Angular application
08:01
22
Running the angular project and reviewing the bootstrap of the app
10:23
23
Adding VS Code extensions to work with Angular
02:53
24
Making HTTP requests in Angular
13:14
25
Adding CORS support in the API
04:34
26
Displaying the fetched users in the browser
05:11
27
Adding bootstrap and font-awesome
09:32
28
Using HTTPS in angular - MAC
06:32
29
Using HTTPS in angular - WINDOWS
06:36
30
Saving into source control
02:17
31
Section 3 summary
01:21
32
Introduction
03:11
33
Safe storage of passwords
07:18
34
Updating the user entity
02:52
35
Creating a base API controller
03:58
36
Creating an Account Controller with a register endpoint
11:03
37
Using the debugger
09:18
38
Using DTOs
07:25
39
Adding validation
03:38
40
Adding a login endpoint
10:40
41
JSON web tokens
05:43
42
Adding a token service
07:16
43
Adding the create token logic
06:51
44
Creating a User DTO and returning the token
05:46
45
Adding the authentication middleware
06:48
46
Adding extension methods
06:59
47
Section 4 summary
03:47
48
Introduction
01:45
49
Creating a nav bar
10:03
50
Introduction to Angular template forms
06:08
51
Introduction to Angular services
05:49
52
Injecting services into components
04:01
53
Using conditionals to show and remove content
06:06
54
Using the angular bootstrap components - dropdown
06:49
55
Introduction to observables
09:00
56
Persisting the login
12:30
57
Using the async pipe
05:18
58
Adding a home page
06:16
59
Adding a register form
05:39
60
Parent to child communication
10:08
61
Child to parent communication
05:35
62
Hooking up the register method to the service
09:55
63
Section 5 summary
01:57
64
Introduction
01:50
65
Creating some more components
07:45
66
Adding the nav links
03:35
67
Routing in code
02:43
68
Adding a toast service for notifications
09:40
69
Adding an Angular route guard
08:53
70
Adding a dummy route
04:22
71
Adding a new theme
05:40
72
Tidying up the app module by using a shared module
05:38
73
Section 6 summary
02:24
74
Introduction
01:10
75
Creating an error controller for testing errors
09:46
76
Handling server errors
07:23
77
Exception handling middleware
11:38
78
Testing errors in the client
08:08
79
Adding an error interceptor
13:18
80
Validation errors
06:20
81
Handling not found
03:44
82
Adding a server error page
10:51
83
Section 7 summary
03:10
84
Introduction
01:59
85
Extending the user entity
03:49
86
Adding a DateTime extension to calculate age
04:15
87
Entity Framework relationships
08:38
88
Generating seed data
06:40
89
Seeding data part one
11:08
90
Seeding data part two
07:18
91
The repository pattern
07:26
92
Creating a repository
06:52
93
Updating the users controller
05:10
94
Adding a DTO for Members
02:33
95
Adding AutoMapper
03:36
96
Using AutoMapper
05:37
97
Configuring AutoMapper
02:44
98
Using AutoMapper queryable extensions
13:31
99
Section 8 summary
02:04
100
Introduction
01:47
101
Using TypeScript
07:39
102
Creating the member interface
02:59
103
Adding a member service
08:23
104
Retrieving the list of members
05:51
105
Creating member cards
04:46
106
Adding some style to the cards
06:11
107
Adding animated buttons
05:20
108
Using an interceptor to send the token
07:44
109
Routing to the detailed page
05:45
110
Styling the member detailed page
06:10
111
Styling the member detailed page part two
06:30
112
Adding a photo gallery
13:08
113
Section 9 summary
01:50
114
Introduction
02:18
115
Creating a member edit component
05:32
116
Creating the edit template form
07:57
117
Adding the update functionality
08:50
118
Adding a Can Deactivate route guard
07:24
119
Persisting the changes in the API
08:45
120
Updating the user in the client app
02:39
121
Adding loading indicators
10:05
122
Using the service to store state
09:53
123
Section 10 summary
01:22
124
Introduction
07:12
125
Cloudinary Account
06:17
126
Configuring cloudinary in the API
04:58
127
Adding a photo service
10:53
128
Updating the users controller
09:10
129
Testing the photo upload
07:47
130
Using the Created At Route method
06:01
131
Adding a photo editor component
04:06
132
Adding a photo uploader
10:28
133
Adding a photo uploader part two
08:25
134
Setting the main photo in the API
06:41
135
Adding the main photo image to the nav bar
09:34
136
Setting the main photo in the client
07:37
137
Deleting photos - API
06:34
138
Deleting photos - Client
05:25
139
Section 11 summary
01:35
140
Introduction
02:00
141
Reactive forms introduction
06:03
142
Client side validation
02:50
143
Adding custom validators
06:12
144
Validation feedback
08:31
145
Creating a reusable text input
13:11
146
Using the form builder service
02:32
147
Expanding the register form
05:17
148
Adding a reusable date input
13:19
149
Updating the API register method
06:46
150
Client side registration
12:18
151
Section 12 summary
02:05
152
Introduction
05:40
153
Adding a paged list class
09:01
154
Adding helper classes for pagination
08:50
155
Using the pagination classes
11:38
156
Setting up client pagination
10:50
157
Using the angular bootstrap pagination component
05:18
158
Adding filtering to the API
06:55
159
Adding additional filters
05:59
160
Cleaning up the member service
11:29
161
Adding filter buttons to the client
10:39
162
Adding sorting functionality
04:32
163
Adding an action filter
08:37
164
Making the Last Active action filter more optimal
05:26
165
Sorting on the client
06:51
166
Formatting dates
05:32
167
Restoring the caching for members
09:20
168
Restoring caching for member detailed
10:19
169
Remembering the filters for a user in the service
06:14
170
Section 13 summary
02:00
171
Introduction
02:33
172
Adding a likes entity
08:19
173
Adding a likes repository
04:45
174
Implementing the likes repository
07:40
175
Controller methods for the likes feature
11:00
176
Setting up the likes functions in the Angular app
07:11
177
Adding the likes component
07:29
178
Adding pagination for the likes
07:34
179
Paginating the likes on the client
06:09
180
Section 14 summary
02:12
181
Introduction
01:42
182
Setting up the entities for messaging
05:48
183
Setting up the message repository
06:07
184
Setting up the automapper profiles
02:40
185
Adding a message controller
08:26
186
Getting the messages from the Repo
10:20
187
Getting the message thread for 2 users
09:41
188
Setting up the Angular app for messaging
12:51
189
Designing the inbox
12:19
190
Adding the message thread in the client
05:31
191
Styling the message thread
11:01
192
Activating the message tab
07:33
193
Using query params
09:23
194
Using route resolvers
08:23
195
Sending messages
08:04
196
Fixing the photo weirdness
02:48
197
Deleting messages on the API
05:58
198
Deleting messages on the client
07:40
199
Section 15 summary
01:54
200
Introduction
04:11
201
Setting up the entities
06:20
202
Configuring the DbContext
06:34
203
Configuring the startup class
04:37
204
Refactoring and adding a new migration
05:46
205
Updating the seed method
06:33
206
Updating the account controller
06:12
207
Adding roles to the app
06:13
208
Adding the roles to the JWT token
08:42
209
Adding policy based authorisation
05:06
210
Getting the users with roles
04:12
211
Editing user roles
05:58
212
Adding an admin component
02:13
213
Adding an admin guard
09:35
214
Adding a custom directive
09:02
215
Adding the edit roles component
07:35
216
Setting up modals
09:15
217
Editing roles in the client
05:38
218
Editing roles part two
11:17
219
Section 16 summary
01:26
220
Introduction
04:30
221
Adding a presence hub
05:07
222
Authenticating to SignalR
04:03
223
Client side SignalR
10:30
224
Adding a presence tracker
11:38
225
Displaying online presence
07:51
226
Creating a message hub
09:05
227
Adding the send message method to the hub
04:38
228
Adding the hub connection to the message service
04:06
229
Refactoring the message components to use the hub
06:08
230
Sending messages via the hub
07:08
231
Tracking the message groups
10:03
232
Updating the message hub with group tracking
06:51
233
Dealing with UTC date formats
05:26
234
Notifying users when they receive a message
11:02
235
Optimizing the presence
06:50
236
Optimizing the messages
12:36
237
Section 17 summary
01:39
238
Introduction
03:29
239
Implementing the unit of work
06:19
240
Refactoring the controllers to use the unit of work
07:55
241
Optimizing queries part one
09:16
242
Fixing UTC dates again
05:48
243
Optimizing queries part two
05:18
244
Adding a confirmation service to the angular app
07:46
245
Getting the data from the confirmation modal
07:34
246
Tidying up the member message component
04:19
247
Section 18 summary
02:46
248
Photo management challenge
06:58
249
Introduction
06:50
250
Preparing the angular app and serving this from the API server
05:44
251
Adding a fallback controller
05:11
252
Creating an angular production build
04:59
253
Switching the DB Server to PostGres
07:42
254
Changing the DB Server in our app
08:18
255
Setting up Heroku
07:44
256
Deploying the app to Heroku
11:16
257
Using branches in git and connecting Heroku to GitHub
11:11
258
Merging changes and redeploying
04:44
259
End of course summary
05:18
260
How to update .Net 5 to .Net 6
11:22
261
.Net 6 new features and how to update the project to use them
19:08
262
Updating Angular to v12
14:03
263
How to update Bootstrap to v5
21:22
Unlock unlimited learning

Get instant access to all 262 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription