Build an app with ASPNET Core and Angular from scratch
4.6 (11,691 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
49,050 students enrolled

Build an app with ASPNET Core and Angular from scratch

A practical example of how to build an application with ASP.NET Core WebAPI (v2.2) and Angular (v8) from start to finish
Bestseller
4.6 (11,691 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
49,036 students enrolled
Created by Neil Cummings
Last updated 5/2020
English
English [Auto], French [Auto], 6 more
  • German [Auto]
  • Indonesian [Auto]
  • Italian [Auto]
  • Polish [Auto]
  • Portuguese [Auto]
  • Spanish [Auto]
Current price: $132.99 Original price: $189.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 29 hours on-demand video
  • 22 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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...
Course content
Expand all 218 lectures 28:59:16
+ Introduction
2 lectures 12:34

This is an introduction to what we will be doing on this course, as well as a preview of the finished application

Preview 04:15

In this lesson we will go through the steps to install the software we need to develop the Web application.  This is shown on a Windows computer but the software is the same for Mac and Linux

Preview 08:19
+ Building a Walking Skeleton
20 lectures 02:35:55

This introduction introduces the concept of a Walking skeleton and why we are using it to start out our application

Preview 03:08

In this section we will create the Web API project using the DotNet CLI

Preview 05:04
Setting up VS Code for C# development
05:17

In this lesson we will take a look at the project files created by the DotNetCLI and the application startup

Preview 10:41
Differences between a .Net Core 2.2 Web API template and .Net Core 3.0 template
09:08

In this lesson we will review the application startup 

Preview 06:44

In this lesson we will add DotNet Watch so that the application watches for file changes and restarts when a file change occurs

Environment settings and using dotnet watch
07:23

As we are using the Model First approach to creating our Database in this lesson we create the Model and the Data Context

Creating the first Model and DataContext
13:21

In this lesson we create our database using Entity Framework

Creating the Database using Entity Framework migrations
11:16

In this lesson we will add a method in our API controller to retrieve values from the database

Retrieving data from the Database
09:50

We will be striving to use asynchronous code in our application, this lesson will demonstrate how to achieve this.

Making our code asynchronous
05:19

We will now create the Angular application and use the Angular CLI to scaffold this.

Creating the Angular application using AngularCLI
05:52
The Angular bootstrapping and running the Angular app
12:21

VS Code can become a very powerful editor with some extra help from extensions.  In this session we will install the extensions I use throughout this course.

Adding VS Code extensions used in this course
06:43

We will use the Angular HTTP module to request data via our API

Making HTTP requests in Angular
14:38

Our browsers prevent us from loading data from a domain external to our Angular app.  Adding CORS headers to our API responses fixes this.

Adding CORS support to the API
04:23

Now it's time to display data from our Database on our HTML page

Displaying data from the API on the HTML page
04:12

In order to make the styling of our application easier, we will add support for Bootstrap and Font Awesome to our application

Adding Bootstrap and Font-Awesome to our Angular app
08:14

We will be using GIT to save our code into source control.  In this lesson we set this up for our API and create a .gitignore file to be selective about what is saved into source.

Adding GIT for source control
10:49

Summary of what we have achieved in this section

Summary of Section 2
01:32
+ Security
16 lectures 02:01:09

We will take a look at whats coming up in this section

Preview 03:57

We need to store the users passwords in the Database as we need something to compare against when they log in... but how should we store them?  We look at the options in this section.

Storing passwords in the Database
03:37

In this lesson we create a User model and update our database

Creating the User model
04:04

A very common pattern in use today is the Repository pattern.  Here we look at what it is and why we should use it.

The Repository pattern
07:22

In order to use the Repository pattern we need to define an Interface that we inject into our controllers.  We will create this interface here.

Creating an Interface for the Repository
02:39

Now we have an interface, we need to create the concrete repository, that will contain our methods for querying the Database.

Creating the concrete Auth Repository and Register Method
08:54
Creating the Login repository method
07:43

In order to be able to use our new repository we need to be able to make it available for injection in our controllers we need to tell our application about it.   Back to the Startup class to do this.

Registering services in the Startup class
02:59

Now we create a method in a new Auth Controller that will allow users to register.

Creating the Register method in our Auth Controller
10:47

We will create DTOs in this section so that we can receive the data sent to the API method.

Using DTOs (Data Transfer Objects)
10:22

Whenever we receive data we should validate it. This is what we will do in this lesson for our register method.

Validation in the API
12:06

Here we take a look at how we will authenticate users to our API with Token Authentication

Token Authentication
05:00

Now that users can register, we need to give them the ability to login and get a token from our API.  We create this method in this lesson.

Creating the Login method in the API
20:04

Our application currently doesn't know about how to authenticate our users.  Let's tell it by adding some authentication middle-ware to the request pipeline.

Using the Authentication middleware
11:07
Safe storage of secrets
07:56
Summary of Section 3
02:32
+ Client side login and register
11 lectures 01:17:22

Introduction to what's coming up in this section

Preview 02:49

In this lesson we create the nav bar and login form using Bootstrap

Creating the Navigation and Login form
08:03

In this lesson we create our Login form using the Angular Template Forms module. 

Introduction to Angular template forms
10:46

Here we create an Angular service which will contain our methods to send and receive data from our API methods.

Introduction to Angular Services
09:54

So far we have been calling API methods directly in our components.  Now we inject our service and consume methods from this in our components instead.

Injecting the Angular services in our Components
06:01

In this lesson we make use of the *ngIf structural directive from Angular to conditionally show HTML elements depending on whether or not the user is logged in.

Using *ngIf to conditionally display HTML Elements
08:43

We have our login method, now let's create a register component so that users can also register.

Adding a component so users can Register to our site
10:25
Parent to Child Component communication using Input properties
06:10
Component Communication Child to Parent using Output properties
05:20

We have our component, now we just need to create the register method in the service so we can actually register to the API.

Adding the register method to the Auth Service
06:57
Summary of Section 4
02:14
+ Error Handling
5 lectures 48:18

An introduction to whats coming up in this section about error handling

Preview 01:15

In this lesson we will use the global exception handler, which will save us from having to write tedious try/catch blocks in our code.

Handling exceptions in the API
12:50
Setting up the Global exception handler in the API
12:10

In this lesson we will configure error handling in our services in our Angular application

Handling errors in Angular
19:55
Summary of Section 5
02:08
+ Adding 3rd party components to our app
7 lectures 51:23

In this lesson we will add alertifyjs and wrap it into an Angular service so we can inject it into our components.

Wrapping 3rd party libraries as an Angular service
12:20

So we are using JWT's, but we want to improve how we are handling them.  This library gives us the ability to check to see if a token has expired and decodes a token 

Using the Angular JWT library to improve token handling
08:39

We are storing information in our token that is useful to have available.  Since it's stored locally in our browser we can use the decode token method to extract the information so it can be used in our app.  

Using the Angular JWT library to decode tokens
10:27

This is the substitute for Bootstrap JS so we can have Bootstrap functionality, without needing to install jQuery.

Adding Ngx Bootstrap to power our Bootstrap components
10:19

Say goodbye to the drab grey/black/white theme we are using.  Say hello to bright orange!

Bringing some color to our app with a theme from Bootswatch
03:30
Summary of Section 6
02:34
+ Routing in Angular
7 lectures 35:01

Introduction to routing and why we need it in Angular

Introduction
03:31

In this lesson we configure Angular router and add some new components to route to.

Setting up routing in Angular
06:34
Setting up our links in the nav component
04:30

Routing is not just for anchor tags, we can also use it in our code.  We will see how to do this in this lesson.

Using routing in our components
04:08

In this lesson we will see how we can lock down areas of our site using route guards.  

Protecting our routes with a route guard
06:34

Almost all of our site needs to be protected from unauthenticated users.  Rather than add a route guard to every route, we will see how we can protect all routes with a single route guard.

Protecting multiple routes with a single route guard using dummy routes
06:42
Summary of Section 7
03:02
+ Extending the API
12 lectures 01:38:58

Whats coming up in this section.

Introduction
03:04

We are not capturing much content at the moment from our users.  In this lesson we will extend the User Model and create a new model to store photos.

Extending the User Model
08:19

Migrations might not always go to plan.  This lesson covers what to do in circumstances where they don't.

Exploring Entity Framework migrations
10:37

In this lesson we take a look at the convention based relationships in Entity Framework core, and switch our code so that it does what we want.

Entity Framework Relationships
03:39

Our goal here is to get data into the database.  In this (and the next) lesson we will see how to achieve this with the least amount of effort using a json generator

Seeding Data to the Database - Part 1
07:07

In this lesson we take our JSON generated data and use it to populate the database.

Seeding Data to the Database Part 2
14:09

In this section we create the repository that will be a more general purpose repository for our API

Creating a new repository for our API
09:16

In this lesson we create another controller that we will use for user activities

Creating the Users Controller
15:51

In this lesson we look at how we can control what we return to the client by shaping the data with DTOs

Shaping the data to return with DTOs
04:30

In this lesson we learn how to use AutoMapper to map objects from our DTOs to our Models

Using AutoMapper Part 1
10:54

In this lesson we configure AutoMapper profiles

Using AutoMapper Part 2
08:40
Summary
02:52
+ Building a great looking User Interface
15 lectures 01:42:55

Whats coming up in this section

Preview 02:44

We haven't really used many of Typescript features so far, but we want to change that.  In this lesson we look at interfaces in Typescript and what they are used for.

Introduction to Interfaces in Typescript
04:51

In this lesson we will see how we can add and use interfaces in our Angular application

Adding Interfaces to our Typescript code
04:36

In this lesson we add another service which will contain all of our Angular HTTP methods that are not registering or logging into the API

Creating another Angular service
08:01

It's now time to start bringing down user data into the Angular application

Retrieving the Members into the Member List Component
07:19

Each member will have a member card to display on the page.  We will take advantage of the bootstrap panel class and it's grid system to display members on the list page

Creating Member Cards to display on our Member list page
08:19

We will add a cool zoom effect to the member cards when hovering over.

Giving our Members some style with CSS
03:10

Now let's add some buttons that slide up whenever someone hovers over a member that will provide some functionality.

Adding animated buttons to the member cards
05:20

We will make use of Angular JWT and learn how we can send the JWT for the user on every request. 

Using Auth0 JwtModule to send up jwt tokens automatically
05:54

In this lesson we will create a member detailed component for our members

Creating the Member Detailed View component class
07:30

In this lesson we design the template for the left hand side of the page

Designing the Member detailed view template - left hand side
07:14

In this lesson we learn how to use an Ngx Bootstrap component to give us a tabbed panel to display different parts of the user profile

Adding a tabbed panel for the right hand side of the Member detailed page
06:58

In this lesson we learn how to get our data before the page is loaded by using route resolvers.

Using Route Resolvers to retrieve data
13:06

In this lesson we add a photo gallery with some animation so users can browse through other users photos

Adding a photo gallery to our application
15:32
Summary
02:21
+ Updating Resources
8 lectures 47:32

In this lesson we will add a component that will be used for members to update their profiles.

Creating a Member Edit Component
06:09

We now need to design the template for the Member edit component. 

Designing the template for the member profile edit page - part 1
07:46

Second part of designing this template.

Creating the Member Edit Template part 2
07:36

In this lesson we show how to use the CanDeactivate route guard to prevent users from leaving a page if, for example, they have made some changes to a form and accidentally click away before saving.

Adding a CanDeactivate route guard
07:08

In this lesson we add the methods to persist the user updates back to the database via the API

Persisting the Member updates
10:42

Amost there.. we just need to complete the method in the member edit component.

Finishing off the Member edit component
04:02
Summary
01:45
Requirements
  • Hello world experience in ASPNET Core and Angular
  • A passion for wanting to learn how to build a fully functional Web Application
Description

This course has been updated and is now using Angular v8 and .Net Core 3.0

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.

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.  

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