Build an app with ASPNET Core and Angular from scratch
This course has been fully re-recorded and is now using Angular v6, .Net Core 2.1 and Bootstrap 4!
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 July 2018 using ASP.NET Core 2.1 and Angular v6 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.
This is an introduction to what we will be doing on this course, as well as a preview of the finished application
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
Building a Walking Skeleton
This introduction introduces the concept of a Walking skeleton and why we are using it to start out our application
In this section we will create the Web API project using the DotNet CLI
In this lesson we will take a look at the project files created by the DotNetCLI and the application startup
In this lesson we will review the application startup
In this lesson we will add DotNet Watch so that the application watches for file changes and restarts when a file change occurs
As we are using the Model First approach to creating our Database in this lesson we create the Model and the Data Context
In this lesson we create our database using Entity Framework
In this lesson we will add a method in our API controller to retrieve values from the database
We will be striving to use asynchronous code in our application, this lesson will demonstrate how to achieve this.
We will now create the Angular application and use the Angular CLI to scaffold this.
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.
We will use the Angular HTTP module to request data via our API
Our browsers prevent us from loading data from a domain external to our Angular app. Adding CORS headers to our API responses fixes this.
Now it's time to display data from our Database on our HTML page
In order to make the styling of our application easier, we will add support for Bootstrap and Font Awesome to our application
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.
Summary of what we have achieved in this section
We will take a look at whats coming up in this section
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.
In this lesson we create a User model and update our database
A very common pattern in use today is the Repository pattern. Here we look at what it is and why we should use it.
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.
Now we have an interface, we need to create the concrete repository, that will contain our methods for querying the Database.
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.
Now we create a method in a new Auth Controller that will allow users to register.
We will create DTOs in this section so that we can receive the data sent to the API method.
Whenever we receive data we should validate it. This is what we will do in this lesson for our register method.
Here we take a look at how we will authenticate users to our API with Token Authentication
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.
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.
Client side login and register
Introduction to what's coming up in this section
In this lesson we create the nav bar and login form using Bootstrap
In this lesson we create our Login form using the Angular Template Forms module.
Here we create an Angular service which will contain our methods to send and receive data from our API methods.
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.
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.
We have our login method, now let's create a register component so that users can also register.
We have our component, now we just need to create the register method in the service so we can actually register to the API.
An introduction to whats coming up in this section about error handling
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.
In this lesson we will configure error handling in our services in our Angular application
Adding 3rd party components to our app
In this lesson we will add alertifyjs and wrap it into an Angular service so we can inject it into our components.
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
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.
This is the substitute for Bootstrap JS so we can have Bootstrap functionality, without needing to install jQuery.
Say goodbye to the drab grey/black/white theme we are using. Say hello to bright orange!
Routing in Angular
Introduction to routing and why we need it in Angular
In this lesson we configure Angular router and add some new components to route to.
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.
In this lesson we will see how we can lock down areas of our site using route guards.
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.
Extending the API
Whats coming up in this section.
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.
Migrations might not always go to plan. This lesson covers what to do in circumstances where they don't.
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.
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
In this lesson we take our JSON generated data and use it to populate the database.
In this section we create the repository that will be a more general purpose repository for our API
In this lesson we create another controller that we will use for user activities
In this lesson we look at how we can control what we return to the client by shaping the data with DTOs
In this lesson we learn how to use AutoMapper to map objects from our DTOs to our Models
In this lesson we configure AutoMapper profiles
Building a great looking User Interface
Whats coming up in this section
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.
In this lesson we will see how we can add and use interfaces in our Angular application
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
It's now time to start bringing down user data into the Angular application
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
We will add a cool zoom effect to the member cards when hovering over.
Now let's add some buttons that slide up whenever someone hovers over a member that will provide some functionality.
We will make use of Angular JWT and learn how we can send the JWT for the user on every request.
In this lesson we will create a member detailed component for our members
In this lesson we design the template for the left hand side of the page
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
In this lesson we learn how to get our data before the page is loaded by using route resolvers.
In this lesson we add a photo gallery with some animation so users can browse through other users photos