Build an app with ASPNET Core and Angular from scratch from Udemy

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.

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Introduction

Introduction to the course

Setting up the developer environment

Getting help

Course assets and source code

Building a walking skeleton Part One - API

Creating the .Net API Project using the dotnet CLI

Setting up VS code to work with C#

VS Code tips and troubleshooting

Getting to know the API project files

Creating our first Entity

Introduction to Entity Framework

Adding Entity Framework to our project

Adding a DbContext class

Creating the Connection string

Creating the database using Entity Framework Code first migrations

Adding a new API Controller

Making our code Asynchronous

Saving our code into Source control

Section 2 Summary

Building a walking skeleton Part Two - Angular

Creating the Angular application

Running the angular project and reviewing the bootstrap of the app

Adding VS Code extensions to work with Angular

Making HTTP requests in Angular

Adding CORS support in the API

Displaying the fetched users in the browser

Adding bootstrap and font-awesome

Adding HTTPS to Angular using mkcert

Saving into source control

Section 3 summary

Authentication basics

Safe storage of passwords

Updating the user entity

Creating a base API controller

Creating an Account Controller with a register endpoint

Using the debugger

Using DTOs

Adding validation

Adding a login endpoint

JSON web tokens

Adding a token service

Adding the create token logic

Creating a User DTO and returning the token

Adding the authentication middleware

Adding extension methods

Section 4 summary

Client login and register

Creating a nav bar

Introduction to Angular template forms

Introduction to Angular services

Injecting services into components

Using conditionals to show and remove content

Using the angular bootstrap components - dropdown

Introduction to observables

Persisting the login

Using the async pipe

Adding a home page

Adding a register form

Parent to child communication

Child to parent communication

Hooking up the register method to the service

Section 5 summary

Routing in Angular

Creating some more components

Adding the nav links

Routing in code

Adding a toast service for notifications

Adding an Angular route guard

Adding a dummy route

Adding a new theme

Tidying up the app module by using a shared module

Section 6 summary

Error handling

Creating an error controller for testing errors

Handling server errors

Exception handling middleware

Testing errors in the client

Adding an error interceptor

Validation errors

Handling not found

Adding a server error page

Section 7 summary

Extending the API

Extending the user entity

Adding a DateTime extension to calculate age

Entity Framework relationships

Generating seed data

Seeding data part one

Seeding data part two

The repository pattern

Creating a repository

Updating the users controller

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Strengthens an existing foundation for intermediate learners

Teaches x, which helps learners do y

Explores x, which is standard in industry y

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build an app with ASPNET Core and Angular from scratch with these activities:

Review basic programming concepts

Show steps

Strengthen your foundation by reviewing basic programming concepts, such as data types, variables, control flow, and functions.

Browse courses on Programming

Show steps

Review textbooks or online resources on basic programming concepts
Solve simple coding exercises
Build small projects to apply your knowledge

Review ASP.NET Core and Angular fundamentals

Show steps

Prepare for the course by reviewing the basics of ASP.NET Core and Angular. This will help you understand the concepts that will be covered in the course more easily.

Browse courses on ASP.NET Core

Show steps

Review the ASP.NET Core documentation
Review the Angular documentation
Build a simple ASP.NET Core and Angular application

Seek guidance from an experienced ASP.NET Core or Angular developer

Show steps

Connect with an experienced developer who can provide personalized guidance, share best practices, and help you overcome challenges.

Browse courses on ASP.NET Core

Show steps

Identify potential mentors
Reach out and request their guidance
Set up regular meetings to discuss your progress

Six other activities

Expand to see all activities and additional details

Show all nine activities

Follow tutorials on ASP.NET Core and Angular

Show steps

Enhance your understanding by following tutorials that provide step-by-step guidance on building ASP.NET Core and Angular applications.

Browse courses on ASP.NET Core

Show steps

Find tutorials on ASP.NET Core and Angular
Follow the tutorials and build the applications
Experiment with the applications and explore different features

Join a study group or online forum for ASP.NET Core and Angular

Show steps

Engage with other learners and experts to exchange knowledge, ask questions, and receive feedback on your work.

Browse courses on ASP.NET Core

Show steps

Find a study group or online forum
Introduce yourself and ask questions
Participate in discussions and share your knowledge

Solve coding challenges on ASP.NET Core and Angular

Show steps

Test and improve your programming skills by solving coding challenges related to ASP.NET Core and Angular.

Browse courses on ASP.NET Core

Show steps

Find coding challenges on ASP.NET Core and Angular
Solve the challenges and debug your code
Review your solutions and learn from your mistakes

Build a personal project using ASP.NET Core and Angular

Show steps

Apply your knowledge and skills by building your own project, which will allow you to explore the concepts in a practical setting.

Browse courses on ASP.NET Core

Show steps

Plan your project and define the features
Set up your development environment
Build the application using ASP.NET Core and Angular
Test and deploy your application

Mentor a beginner in ASP.NET Core or Angular

Show steps

Reinforce your understanding by teaching others and helping them overcome challenges, while also developing your communication and leadership skills.

Browse courses on ASP.NET Core

Show steps

Identify a beginner who needs help
Set up regular sessions to guide and support them
Provide feedback and encouragement

Contribute to open-source projects related to ASP.NET Core or Angular

Show steps

Make meaningful contributions to the community while gaining practical experience and showcasing your skills.

Browse courses on ASP.NET Core

Show steps

Find open-source projects related to ASP.NET Core or Angular
Review the project documentation and codebase
Identify areas where you can contribute
Submit your contributions and provide feedback on others' work

Career center

Learners who complete Build an app with ASPNET Core and Angular from scratch will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front End Developers are responsible for building and maintaining the user interface of websites and web applications. This course teaches the fundamentals of Angular, a popular framework for building interactive and responsive web applications. By learning Angular, you can develop a strong foundation for a career as a Front End Developer and enhance your employability in the tech industry. The course also covers essential concepts such as routing, data binding, component architecture, and user experience design, which are crucial for building modern and engaging web applications.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full Stack Developers possess expertise in both front end and back end development. This course provides a comprehensive overview of both Angular (front end) and ASP.NET Core (back end), equipping you with the skills to build complete web applications from scratch. By mastering both technologies, you can become a versatile Full Stack Developer, capable of handling all aspects of web development, from designing the user interface to managing the underlying data and logic.

See salaries and explore the career path for Full-Stack Developer

Web Developer

Web Developers are responsible for the design, development, and maintenance of websites and web applications. This course focuses on building a complete web application using Angular (front end) and ASP.NET Core (back end), providing a hands-on experience in both technologies. By completing this course, you will acquire the necessary skills to become a competent Web Developer, capable of developing dynamic and interactive web solutions.

See salaries and explore the career path for Web Developer

Software Engineer

Software Engineers design, develop, and maintain software systems. This course offers a solid foundation in the principles and practices of software development, with a focus on web application development using Angular (front end) and ASP.NET Core (back end). By applying the concepts learned in this course, you can enhance your problem-solving and analytical skills, becoming a more effective Software Engineer in the field of web development.

See salaries and explore the career path for Software Engineer

Back-End Developer

Back End Developers focus on the server-side of web applications, ensuring data management, business logic, and integration with other systems. This course covers ASP.NET Core, a powerful framework for building robust and scalable back ends. By learning ASP.NET Core, you can develop a solid foundation for a career as a Back End Developer and contribute to the efficient and secure functioning of web applications.

See salaries and explore the career path for Back-End Developer

Data Analyst

Data Analysts collect, analyze, and interpret data to uncover insights and inform decision-making. This course does not directly teach data analysis, but it provides a foundation in data management and web development using ASP.NET Core. By understanding how data is structured and processed in web applications, you can gain a better understanding of data analysis and its applications.

See salaries and explore the career path for Data Analyst

UX Designer

UX Designers focus on the user experience of websites and applications, ensuring they are intuitive, usable, and enjoyable to use. This course covers fundamental principles of user experience design and provides practical experience in building user interfaces using Angular. By learning Angular, you can develop a stronger understanding of how user interfaces are constructed and how to design them for optimal user experience.

See salaries and explore the career path for UX Designer

IT Consultant

IT Consultants provide expert advice and guidance to businesses on technology-related matters. This course does not directly teach IT consulting, but it provides a strong foundation in web development and software engineering principles. By understanding the technical aspects of web application development, you can gain valuable insights into the challenges and opportunities businesses face in the digital age.

See salaries and explore the career path for IT Consultant

Project Manager

Project Managers plan, execute, and deliver projects successfully. This course does not directly teach project management, but it provides practical experience in managing a software development project from start to finish. By applying the concepts learned in this course, you can develop essential project management skills, such as planning, communication, and risk management, which are valuable in various industries.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts bridge the gap between business and technology, translating business requirements into technical specifications. This course provides a foundation in web development and software engineering principles, which can be valuable for Business Analysts who need to understand the technical aspects of software systems. By learning the basics of Angular and ASP.NET Core, you can gain a better understanding of how web applications are built and how they can meet business needs.

See salaries and explore the career path for Business Analyst

Quality Assurance Analyst

Quality Assurance Analysts ensure the quality and reliability of software products. This course does not directly teach software testing, but it provides a foundation in software development and testing principles. By understanding the process of building and testing web applications, you can gain valuable insights into the challenges and techniques of software quality assurance.

See salaries and explore the career path for Quality Assurance Analyst

Technical Writer

Technical Writers create user manuals, documentation, and other materials to explain technical concepts. This course provides a foundation in web development and software engineering principles, which can be valuable for Technical Writers who need to understand the technical aspects of software systems. By learning the basics of Angular and ASP.NET Core, you can gain a better understanding of how web applications are built and how to document them effectively.

See salaries and explore the career path for Technical Writer

Product Manager

Product Managers are responsible for the development and launch of new products or features. This course does not directly teach product management, but it provides a foundation in web development and software engineering principles. By understanding the technical aspects of web application development, you can gain valuable insights into the challenges and opportunities involved in product development and management.

See salaries and explore the career path for Product Manager

Scrum Master

Scrum Masters facilitate Agile development teams, ensuring they follow Scrum principles and practices. This course does not directly teach Scrum, but it provides practical experience in working on a software development project using Agile methodologies. By applying the concepts learned in this course, you can develop essential Scrum Master skills, such as facilitation, conflict resolution, and team management.

See salaries and explore the career path for Scrum Master

IT Support Specialist

IT Support Specialists provide technical support to users and maintain computer systems. This course does not directly teach IT support, but it provides a foundation in web development and software engineering principles. By understanding the technical aspects of web application development, you can gain valuable insights into the challenges and techniques of IT support, particularly in troubleshooting and resolving web-related issues.

See salaries and explore the career path for IT Support Specialist