In this chapter, we’re going to need all the technical requirements listed in the previous chapters, with no additional resources, libraries, or packages.

The code files for this chapter can be found here: https://github.com/PacktPublishing/ASP.NET-Core-6-and-Angular/tree/main/Chapter_02.

Learning to use ASP.NET Core and Angular together means being able to work with both the front-end (client side) and back-end (server side) of a web application; to put it in other words, it means being able to design, assemble, and deliver a complete product.

Eventually, in order to do that, we’ll need to dig through the following:

• Back-end programming
• Front-end programming
• UI styling and UX design
• Database design, modeling, configuration, and administration
• Web server configuration and administration
• Web application deployment

At first glance, it can seem that this kind of approach goes against common sense; a single developer should not be allowed to do everything by themselves. Every developer knows that the back-end and the front-end require entirely different skills and experience, so why in the world should we do that?

Before answering this question, we should understand what we really mean...

In order to demonstrate how ASP.NET and Angular can work together to their full extent, we couldn’t think of anything better than building some small SPA projects with most, if not all, PWA features. The reason for this choice is quite obvious: there is no better approach to demonstrate some of the best features they have to offer nowadays. We’ll have the chance to work with modern interfaces and patterns such as the HTML5 pushState API, webhooks, data transport-based requests, dynamic web components, UI data bindings, and a stateless, AJAX-driven architecture capable of flawlessly encompassing all of these features. We’ll also make good use of some distinctive PWA features such as service workers and web manifest files.

If you don’t know the meaning of these definitions and acronyms, don’t worry, we are going to explore these concepts in the next couple of sections, which are dedicated to enumerating the most relevant...

What we need now is to conceive a suitable test case scenario similar to the ones we will eventually have to deal with – an example SPA project with all the core aspects we would expect from a potentially shippable product.

In order to do this, the first thing we need to do is to become our own customer for a minute and come up with an idea, a vision to share with our other self. We’ll then be able to put our developer shoes back on and split our abstract plan into a list of items we’ll need to implement; these items will be the core requirements of our project. Finally, we’ll set up our workstation by getting the required packages, adding the resource files, and configuring both the ASP.NET and Angular frameworks in the Visual Studio IDE.

Not your usual Hello World!

The code we’re going to write within this book won’t be just a shallow demonstration of full-stack development concepts; we won’t throw...

The first thing we have to do is set up our workstation; it won’t be difficult because we only need a small set of essential tools. These include Visual Studio 2022, an updated Node.js runtime, a development web server (such as the built-in IIS Express), and a decent source code control system, such as Git. We will take the latter for granted as we most likely already have it up and running.

In the next sections, we’ll set up the web application project, install or upgrade the packages and libraries, and build and eventually test the result of our work. However, before doing...

So far, so good; we’ve just set up a working skeleton of what’s about to come. Before moving on, let’s do a quick recap of what we just did (and learned) in this chapter.

First of all, we learned the differences between the various approaches that can be adopted to create web apps nowadays: SPAs, MPAs, and PWAs. We also explained that since we’ll be using .NET and Angular, we’ll stick to the SPA approach, but we’ll also implement most PWA features, such as service workers and web manifest files. In an attempt to reproduce a realistic production-case scenario, we also went through the most common SPA features, first from a technical point of view, and then putting ourselves in the shoes of a typical product owner while trying to enumerate their expectations.

Last, but not least, we learned how to properly set up our development environment; we chose to do that using the latest Angular SPA template shipped with the .NET SDK,...

For further information, we recommend the following topics: Single-Page Application (SPA), Progressive Web Application (PWA), Native Web Application (NWA), Multi-Page Application (MPA), Scrum, Agile Manifesto, ASP.NET Web API, Angular CLI, Node.js, npm, nvm for Windows, Visual Studio 2022, and Visual Studio Project Templates.

• Native Web Apps, Henrik Joreteg, 2015: https://blog.andyet.com/2015/01/22/native-web-apps/
• Manifesto for Agile Software Development, Kent Beck, Mike Beedle, and many others, 2001: https://agilemanifesto.org/
• Progressive Web Apps: https://developers.google.com/web/progressive-web-apps/
• Progressive Web Apps: Escaping Tabs Without Losing Our Soul: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
• What, Exactly, Makes Something A Progressive Web App?: https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/
• Scrum (software development): https://en.wikipedia.org/wiki/Scrum_(software_development)
• Waterfall model: https://en.wikipedia.org/wiki/Waterfall_model
• CLI-Based Front-End Project Templates: https://devblogs.microsoft.com/visualstudio/the-new-javascript-typescript-experience-in-vs-2022-preview-3/#cli-based-front-end-project-templates
• NVM for Windows:...