4.62 out of 5
4.62
5490 reviews on Udemy

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.1) and Angular (v6) from start to finish
Instructor:
Neil Cummings
22,828 students enrolled
English [Auto-generated] More
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...

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.  

Introduction

1
Introduction

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

2
Setting up the development environment

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

1
Introduction

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

2
Creating the DotNet Core WebAPI using the DotNetCLI

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

3
Reviewing the Project files in the DotNet Web API

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

4
Running the DotNet Core application

In this lesson we will review the application startup 

5
Environment settings and using dotnet watch

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

6
Creating the first Model and DataContext

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

7
Creating the Database using Entity Framework migrations

In this lesson we create our database using Entity Framework

8
Retrieving data from the Database

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

9
Making our code asynchronous

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

10
Creating the Angular application using AngularCLI

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

11
The Angular bootstrapping and running the Angular app
12
Adding VS Code extensions used in this course

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.

13
Making HTTP requests in Angular

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

14
Adding CORS support to the 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.

15
Displaying data from the API on the HTML page

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

16
Adding Bootstrap and Font-Awesome to our Angular app

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

17
Adding GIT for source control

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.

18
Summary of Section 2

Summary of what we have achieved in this section

Security

1
Intoduction

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

2
Storing passwords in the Database

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.

3
Creating the User model

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

4
The Repository pattern

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

5
Creating an Interface for the Repository

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.

6
Creating the concrete Auth Repository and Register Method

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

7
Creating the Login repository method
8
Registering services in the Startup class

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.

9
Creating the Register method in our Auth Controller

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

10
Using DTOs (Data Transfer Objects)

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

11
Validation in the API

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

12
Token Authentication

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

13
Creating the Login method in the API

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.

14
Using the Authentication middleware

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.

15
Summary of Section 3

Client side login and register

1
Introduction

Introduction to what's coming up in this section

2
Creating the Navigation and Login form

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

3
Introduction to Angular template forms

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

4
Introduction to Angular Services

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

5
Injecting the Angular services in our Components

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.

6
Using *ngIf to conditionally display HTML Elements

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.

7
Adding a component so users can Register to our site

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

8
Parent to Child Component communication using Input properties
9
Component Communication Child to Parent using Output properties
10
Adding the register method to the Auth Service

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

11
Summary of Section 4

Error Handling

1
Introduction

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

2
Handling exceptions in the API

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.

3
Setting up the Global exception handler in the API
4
Handling errors in Angular

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

5
Summary of Section 5

Adding 3rd party components to our app

1
Introduction
2
Wrapping 3rd party libraries as an Angular service

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

3
Using the Angular JWT library to improve token handling

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 

4
Using the Angular JWT library to decode tokens

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.  

5
Adding Ngx Bootstrap to power our Bootstrap components

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

6
Bringing some color to our app with a theme from Bootswatch

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

7
Summary of Section 6

Routing in Angular

1
Introduction

Introduction to routing and why we need it in Angular

2
Setting up routing in Angular

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

3
Setting up our links in the nav component
4
Using routing in our components

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.

5
Protecting our routes with a route guard

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

6
Protecting multiple routes with a single route guard using dummy routes

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.

7
Summary of Section 7

Extending the API

1
Introduction

Whats coming up in this section.

2
Extending the User Model

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.

3
Exploring Entity Framework migrations

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

4
Entity Framework Relationships

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.

5
Seeding Data to the Database - Part 1

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

6
Seeding Data to the Database Part 2

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

7
Creating a new repository for our API

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

8
Creating the Users Controller

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

9
Shaping the data to return with DTOs

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

10
Using AutoMapper Part 1

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

11
Using AutoMapper Part 2

In this lesson we configure AutoMapper profiles

12
Summary

Building a great looking User Interface

1
Introduction

Whats coming up in this section

2
Introduction to Interfaces in Typescript

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.

3
Adding Interfaces to our Typescript code

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

4
Creating another Angular service

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

5
Retrieving the Members into the Member List Component

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

6
Creating Member Cards to display on our Member list page

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

7
Giving our Members some style with CSS

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

8
Adding animated buttons to the member cards

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

9
Using Auth0 JwtModule to send up jwt tokens automatically

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

10
Creating the Member Detailed View component class

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

11
Designing the Member detailed view template - left hand side

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

12
Adding a tabbed panel for the right hand side of the Member detailed 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

13
Using Route Resolvers to retrieve data

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

14
Adding a photo gallery to our application

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

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
5490 Ratings

Detailed Rating

Stars 5
3491
Stars 4
1623
Stars 3
320
Stars 2
42
Stars 1
21
080b178fbcc5c2b3cbc077e26893d1bf
30-Day Money-Back Guarantee

Includes

28 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion