Build an app with ASPNET Core and Angular from scratch

29h 51m 36s
English
Paid
March 15, 2024

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.

More

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 Build an app with ASPNET Core and Angular from scratch

Join premium to watch
Go to premium
# Title Duration
1 Introduction to the course 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

Similar courses to Build an app with ASPNET Core and Angular from scratch

DuckDB - The Ultimate Guide

DuckDB - The Ultimate Guideudemy

Duration 5 hours 56 minutes 13 seconds
Reactive Angular Course (with RxJs)

Reactive Angular Course (with RxJs)udemy

Duration 5 hours 33 minutes 49 seconds
Angular 2 Fundamentals

Angular 2 Fundamentalsultimatecourses.com

Duration 5 hours 6 minutes 53 seconds
Angular 7 + Spring Boot and Cloud Microservices(Inc. Docker)
Accelerating Through Angular 2

Accelerating Through Angular 2codeschool

Duration 1 hour 4 minutes 35 seconds
Full Stack: Angular and Spring Boot

Full Stack: Angular and Spring Bootudemy

Duration 25 hours 49 minutes 54 seconds
Advanced Angular Forms

Advanced Angular FormsDmytro Mezhenskyi (decodedfrontend.io)

Duration 13 hours 38 minutes 40 seconds
Angular 9 Firebase Project Course

Angular 9 Firebase Project Coursefireship.io

Duration 2 hours 46 minutes 56 seconds
Database Design & Implementation

Database Design & Implementationamigoscode (Nelson Djalo)

Duration 2 hours 7 minutes 49 seconds
React, Angular, Node In-Depth Guide: Beginner to Pro

React, Angular, Node In-Depth Guide: Beginner to Proudemy

Duration 80 hours 1 minute 57 seconds