Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
ASP.NET
Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratch

Loại khoá học: Web Development

A practical example of how to build an application with ASP.NET Core API and Angular from start to finish

image
50.000 VND
90 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

This course has been refreshed and completely updated for .Net 7.0 and Angular 14.

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 2022 using .Net 7.0 and Angular v14 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 Heroku free of charge

  • Using SignalR for real time presence and live messaging between users

  • 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.  

Bạn sẽ học được gì

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

Implement Authentication using JWT Authentication tokens

Handling errors in the API and the SPA

Persist data using Entity Framework Core

Real time notifications and presence using SignalR

Yêu cầu

  • Hello world experience in ASPNET Core and Angular
  • A passion for wanting to learn how to build a fully functional Web Application

Nội dung khoá học

23 sections

Introduction

4 lectures
Introduction to the course
07:10
Setting up the developer environment
07:00
Getting help
02:53
Course assets and source code
02:15

Building a walking skeleton Part One - API

15 lectures
Introduction
02:26
Creating the .Net API Project using the dotnet CLI
11:25
Setting up VS code to work with C#
07:21
VS Code tips and troubleshooting
04:06
Getting to know the API project files
12:39
Creating our first Entity
07:45
Introduction to Entity Framework
06:34
Adding Entity Framework to our project
04:18
Adding a DbContext class
11:10
Creating the Connection string
10:23
Creating the database using Entity Framework Code first migrations
06:36
Adding a new API Controller
14:03
Making our code Asynchronous
07:50
Saving our code into Source control
16:11
Section 2 Summary
02:39

Building a walking skeleton Part Two - Angular

11 lectures
Introduction
01:56
Creating the Angular application
08:32
Running the angular project and reviewing the bootstrap of the app
09:20
Adding VS Code extensions to work with Angular
04:12
Making HTTP requests in Angular
15:16
Adding CORS support in the API
06:38
Displaying the fetched users in the browser
05:43
Adding bootstrap and font-awesome
08:41
Adding HTTPS to Angular using mkcert
07:29
Saving into source control
05:28
Section 3 summary
01:20

Authentication basics

16 lectures
Introduction
03:10
Safe storage of passwords
07:17
Updating the user entity
09:20
Creating a base API controller
05:54
Creating an Account Controller with a register endpoint
12:09
Using the debugger
12:27
Using DTOs
11:49
Adding validation
11:11
Adding a login endpoint
10:47
JSON web tokens
05:42
Adding a token service
09:42
Adding the create token logic
09:14
Creating a User DTO and returning the token
06:36
Adding the authentication middleware
12:41
Adding extension methods
07:50
Section 4 summary
03:46

Client login and register

16 lectures
Introduction
01:44
Creating a nav bar
12:39
Introduction to Angular template forms
06:05
Introduction to Angular services
07:48
Injecting services into components
04:09
Using conditionals to show and remove content
07:04
Using the angular bootstrap components - dropdown
06:35
Introduction to observables
08:58
Persisting the login
16:44
Using the async pipe
07:02
Adding a home page
06:48
Adding a register form
06:25
Parent to child communication
08:38
Child to parent communication
05:05
Hooking up the register method to the service
12:23
Section 5 summary
01:56

Routing in Angular

10 lectures
Introduction
01:49
Creating some more components
07:24
Adding the nav links
03:00
Routing in code
04:26
Adding a toast service for notifications
11:43
Adding an Angular route guard
07:56
Adding a dummy route
04:02
Adding a new theme
05:48
Tidying up the app module by using a shared module
05:39
Section 6 summary
02:22

Error handling

10 lectures
Introduction
01:09
Creating an error controller for testing errors
08:47
Handling server errors
07:55
Exception handling middleware
12:14
Testing errors in the client
09:55
Adding an error interceptor
13:45
Validation errors
04:23
Handling not found
03:58
Adding a server error page
10:31
Section 7 summary
03:09

Extending the API

16 lectures
Introduction
01:57
Extending the user entity
05:17
Adding a DateTime extension to calculate age
04:55
Entity Framework relationships
10:09
Generating seed data
06:31
Seeding data part one
09:20
Seeding data part two
06:25
The repository pattern
07:25
Creating a repository
07:43
Updating the users controller
05:11
Adding a DTO for Members
04:57
Adding AutoMapper
05:26
Using AutoMapper
03:14
Configuring AutoMapper
03:32
Using AutoMapper queryable extensions
14:32
Section 8 summary
02:03

Building the User Interface

14 lectures
Introduction
01:45
Using TypeScript
07:38
Creating the member interface
05:11
Adding a member service
10:35
Retrieving the list of members
05:24
Creating member cards
09:52
Adding some style to the cards
05:43
Adding animated buttons
05:59
Using an interceptor to send the token
07:12
Routing to the detailed page
07:53
Styling the member detailed page
06:43
Styling the member detailed page part two
07:48
Adding a photo gallery (Angular 16+)
12:58
Section 9 summary
01:49

Updating resources

10 lectures
Introduction
02:17
Creating a member edit component
07:35
Creating the edit template form
07:46
Adding the update functionality
10:03
Adding a Can Deactivate route guard
07:33
Persisting the changes in the API
11:11
Updating the user in the client app
04:34
Adding loading indicators
12:58
Using the service to store state
10:27
Section 10 summary
01:21

Adding photo upload functionality

16 lectures
Introduction
07:11
Cloudinary Account
06:08
Configuring cloudinary in the API
05:06
Adding a photo service
09:55
Updating the users controller
07:33
Testing the photo upload
06:18
Using the Created At Route method
05:50
Adding a photo editor component
04:07
Adding a photo uploader
11:05
Adding a photo uploader part two
10:11
Setting the main photo in the API
05:33
Adding the main photo image to the nav bar
08:45
Setting the main photo in the client
06:53
Deleting photos - API
05:55
Deleting photos - Client
04:43
Section 11 summary
01:34

Reactive forms

12 lectures
Introduction
01:59
Reactive forms introduction
08:01
Client side validation
03:50
Adding custom validators
05:02
Validation feedback
08:57
Creating a reusable text input
15:23
Using the form builder service
02:41
Expanding the register form
05:15
Adding a reusable date input
13:41
Updating the API register method
06:32
Client side registration
15:29
Section 12 summary
02:04

Paging, Sorting and Filtering

19 lectures
Introduction
05:39
Adding a paged list class
09:21
Adding helper classes for pagination
07:29
Using the pagination classes
08:46
Setting up client pagination
10:08
Using the angular bootstrap pagination component
05:48
Adding filtering to the API
05:32
Adding additional filters
06:22
Cleaning up the member service
14:54
Adding filter buttons to the client
11:24
Adding sorting functionality
04:02
Adding an action filter
08:16
Making the Last Active action filter more optimal
05:40
Sorting on the client
07:33
Formatting dates
09:16
Restoring the caching for members
06:50
Restoring caching for member detailed
10:38
Remembering the filters for a user in the service
10:49
Section 13 summary
01:59

Adding the Like User feature

10 lectures
Introduction
02:31
Adding a likes entity
14:23
Adding a likes repository
04:35
Implementing the likes repository
07:58
Controller methods for the likes feature
10:33
Setting up the likes functions in the Angular app
03:39
Adding the likes component
09:57
Adding pagination for the likes
08:18
Paginating the likes on the client
04:15
Section 14 summary
02:11

Adding the messaging feature

19 lectures
Introduction
01:41
Setting up the entities for messaging
07:21
Setting up the message repository
06:40
Setting up the automapper profiles
03:41
Adding a message controller
09:23
Getting the messages from the Repo
09:01
Getting the message thread for 2 users
10:45
Setting up the Angular app for messaging
10:57
Designing the inbox
14:42
Adding the message thread in the client
07:35
Styling the message thread
11:04
Activating the message tab
07:59
Using query params
08:06
Using route resolvers
06:51
Sending messages
09:07
Fixing the photo weirdness
04:44
Deleting messages on the API
06:40
Deleting messages on the client
05:55
Section 15 summary
01:53

Identity and role management

20 lectures
Introduction
04:10
Setting up the entities
07:31
Configuring the DbContext
05:46
Configuring the startup class
03:54
Refactoring and adding a new migration
04:49
Updating the seed method
06:27
Updating the account controller
05:52
Adding roles to the app
05:19
Adding the roles to the JWT token
09:24
Adding policy based authorisation
06:06
Getting the users with roles
03:52
Editing user roles
07:35
Adding an admin component
02:14
Adding an admin guard
10:44
Adding a custom directive
07:30
Adding the edit roles component
07:44
Setting up modals
09:34
Editing roles in the client
05:51
Editing roles part two
11:01
Section 16 summary
01:25

SignalR

18 lectures
Introduction
04:29
Adding a presence hub
06:00
Authenticating to SignalR
03:58
Client side SignalR
10:29
Adding a presence tracker
11:16
Displaying online presence
07:29
Creating a message hub
09:33
Adding the send message method to the hub
05:22
Adding the hub connection to the message service
05:08
Refactoring the message components to use the hub
07:36
Sending messages via the hub
08:00
Tracking the message groups
08:57
Updating the message hub with group tracking
14:10
Dealing with UTC date formats
09:19
Notifying users when they receive a message
14:04
Optimizing the presence
08:08
Optimizing the messages
11:42
Section 17 summary
01:37

Unit of work pattern and finishing touches

10 lectures
Introduction
03:28
Implementing the unit of work
11:00
Refactoring the controllers to use the unit of work
09:38
Optimizing queries part one
04:19
Optimizing queries part two
05:17
Adding a confirmation service to the angular app
08:44
Getting the data from the confirmation modal
04:22
Tidying up the member message component
07:20
Section 18 summary
02:45
Photo management challenge
06:57

Publishing

19 lectures
Introduction
06:49
Preparing the angular app and serving this from the API server
10:30
Adding a fallback controller
03:13
Creating an angular production build
04:03
Switching the DB Server to PostGres
09:20
Changing the DB Server in our app
14:09
Dockerizing our app
11:28
Updating the config to use Postgres
08:14
Creating a deployment to fly io
12:56
Creating the config variables for fly io
07:04
Using github actions
13:04
Fixing the issues with the message thread
14:33
Automating the deployment
08:25
Heroku no longer providing a free service
00:20
Setting up Heroku
07:43
Deploying the app to Heroku
11:15
Using branches in git and connecting Heroku to GitHub
11:10
Merging changes and redeploying
04:43
End of course summary
05:17

Updating to .Net 6, Angular 12 and Bootstrap 5

5 lectures
Please see next section if you are updating to .Net 7 and Angular 14
00:12
How to update .Net 5 to .Net 6
11:21
.Net 6 new features and how to update the project to use them
19:07
Updating Angular to v12
14:02
How to update Bootstrap to v5
21:20

Updating to .Net 7, Angular 14 and Bootstrap 5

4 lectures
How to update to .Net 7
16:15
How to update to Angular 14
08:24
How to update to Bootstrap 5
09:26
Enabling Angular strict mode
22:04

Updating the project to Angular 16

2 lectures
Updating the Angular project to Angular 16 and updating other packages
19:49
Replacing the photo gallery package
15:12

Bonus - Legacy Content

1 lectures
Where to access the legacy content (previous version of the course)
01:33

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete Introduction to OpenFOAM

The Complete Introduction to OpenFOAM

25 VND
50.000 VND
Learn to build an e-commerce store with .Net, React & Redux

Learn to build an e-commerce store with .Net, React & Redux

90 VND
50.000 VND
Learn Step by Step CakePHP 4 Beginners to Advance Tutorial

Learn Step by Step CakePHP 4 Beginners to Advance Tutorial

25 VND
50.000 VND
Advanced Embedded Systems Bare-Metal Programming Ground Up™

Advanced Embedded Systems Bare-Metal Programming Ground Up™

90 VND
50.000 VND
Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

65 VND
50.000 VND
Bootstrap - Create 4 Real World Projects

Bootstrap - Create 4 Real World Projects

25 VND
50.000 VND
Build REST APIs with Python, Django REST Framework: Web API

Build REST APIs with Python, Django REST Framework: Web API

25 VND
50.000 VND
Complete Android Development with Kotlin Masterclass

Complete Android Development with Kotlin Masterclass

40 VND
50.000 VND
Lập trình react js chuyên sâu với React Hooks and Bootstrap

Lập trình react js chuyên sâu với React Hooks and Bootstrap

25 VND
50.000 VND
Vue - The Complete Guide (incl. Router & Composition API)

Vue - The Complete Guide (incl. Router & Composition API)

120 VND
50.000 VND
Python Django - The Practical Guide

Python Django - The Practical Guide

105 VND
50.000 VND
Ethereum and Solidity: The Complete Developer's Guide

Ethereum and Solidity: The Complete Developer's Guide

100 VND
50.000 VND
NestJS Zero to Hero - Modern TypeScript Back-end Development

NestJS Zero to Hero - Modern TypeScript Back-end Development

80 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Java Servlet, JSP and Hibernate: Build eCommerce Website

Java Servlet, JSP and Hibernate: Build eCommerce Website

25 VND
50.000 VND
Backend Master Class [Golang + Postgres + Kubernetes + gRPC]

Backend Master Class [Golang + Postgres + Kubernetes + gRPC]

100 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi