Build an app with ASPNET Core and Angular from scratch

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

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.

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

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!

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.

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

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