Build an app with ASPNET Core and Angular from scratch

29h 51m 36s
English
Paid

Course description

Have you learnt the basics of ASP.NET Core and Angular?  Not sure where to go next?  This course should be able to help with that.  In this course we start from nothing and incrementally build up our API and Angular front end until we have a fully functional Web Application that we then publish to IIS and a Linux server. These are 2 of the hottest frameworks right now for the 'back-end' (Microsoft's ASP.NET Core) and the 'front-end' (Google's Angular) and are well worth spending the time to learn.

Read more about the course

In this course we build a complete application from start to finish and every line of code is demonstrated and explained.

This course is right up to date as at November 2019 using ASP.NET Core 3.0 and Angular v8 and as these frameworks evolve, this course will evolve with it.  

Read some of the great reviews of the course:

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

Daniyal says: "This is a complete project based course from start to finish with real world experience using technologies that are currently in demand in the market. People interested in learning latest technologies should consider this course."

Here are some of the things you will learn about in this course:

  • Setting up the developer environment

  • Creating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLI

  • Adding a Client side login and register function to our Angular application

  • Adding 3rd party components to add some pizzazz to the app

  • Adding routing to the Angular application and securing routes.

  • Using Automapper in ASP.NET Core

  • Building a great looking UI using Bootstrap

  • Adding Photo Upload functionality as well as a cool looking gallery in Angular

  • Angular Template forms and Reactive forms and validation

  • Paging, Sorting and Filtering

  • Adding a Private Messaging system to the app

  • Publishing the application to both IIS and Linux

  • Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor.   You can of course use any code editor you like and any Operating system you like... as long as it's Windows, Linux or Mac

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project.  If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.  

On this course we will build an example Dating Application, completely from scratch using the DotNet CLI and the Angular CLI to help us get started.  All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and Angular.  

Requirements:

  • Hello world experience in ASPNET Core and Angular

  • A passion for wanting to learn how to build a fully functional Web Application

Who this course is for:
  • Beginners to ASPNET Core and Angular who want to learn practical usage of these frameworks to build a compelling and functional application
  • Students who like to learn by doing rather than learning by theory

What you'll learn:

  • Learn how to build a web application from start to publishing using ASPNET Core (v2.1), Entity Framework Core and Angular (v6)
  • Students who complete this course will have a practical understanding of Angular and ASPNET Core
  • Understand how to structure an Angular application using best practices
  • Learn how to integrate 3rd party components into the Angular application
  • Use Visual Studio code effectively to improve workflow
  • Use AutoMapper
  • Implement drag and drop photo upload integrating into a cloud platform
  • Implement a private messaging system
  • Implement filtering, sorting and paging of data
  • Display notifications in Angular via AlertifyJS
  • Implement Authentication using JWT Authentication tokens
  • Handling errors in the API and the SPA
  • Persist data using Entity Framework Core
  • And more...

Watch Online

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

Watch Online Build an app with ASPNET Core and Angular from scratch

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Full-Stack Fundamentals 2 - Backend

Full-Stack Fundamentals 2 - Backend

Sources: Mckay Wrigley (takeoff)
In the first project, we focused on the frontend, creating a personal portfolio website. Now we will take the next step towards full-stack development...
1 hour 45 minutes 49 seconds
Angular - The Complete Guide (2023 Edition)

Angular - The Complete Guide (2023 Edition)

Sources: udemy
Angular 9 simply is the latest version of Angular 2, you will learn this amazing framework from the ground up in this course! Join the most comprehensive, popu
34 hours 58 minutes 7 seconds
Neo4j: GraphDB Foundations with Cypher

Neo4j: GraphDB Foundations with Cypher

Sources: udemy
Learn what a graph database is, gain the fundamental skills to use Neo4j on your next project. Learn how some of the worlds top tech companies structure and que
4 hours 44 minutes
Web API From Start to Finish

Web API From Start to Finish

Sources: iamtimcorey.com (Tim Corey)
Application Programming Interfaces (APIs) are software that send information back and forth between a program and a user. The entire web runs on APIs! They are required for mose...
17 hours 59 minutes 54 seconds