Book Image

ASP.NET Core 3 and Angular 9 - Third Edition

By : Valerio De Sanctis
Book Image

ASP.NET Core 3 and Angular 9 - Third Edition

By: Valerio De Sanctis

Overview of this book

<p>Learning full stack development calls for knowledge of both frontend and backend web development. By covering the impressive capabilities of ASP.NET Core 3.1 and Angular 9, right from project setup through to the deployment phase, this book will help you to develop your skills effectively. </p><p>The book will get you started with using the .NET Core framework and Web API Controllers to implement API calls and server-side routing in the backend. Next, you will learn to build a data model with Entity Framework Core and configure it using either a local SQL Server instance or cloud-based data stores such as Microsoft Azure. The book will also help you handle user input with Angular reactive forms and frontend and backend validators for maximum effect. You will later explore the advanced debugging and unit testing features provided by xUnit.net (.NET Core) and Jasmine, as well as Karma for Angular. Finally, you will implement various authentication and authorization techniques with the ASP.NET Core Identity system and the new IdentityServer, as well as deploy your apps on Windows and Linux servers using IIS, Kestrel, and Nginx. </p><p>By the end of this book, you will be equipped with the skills you need to create efficient web applications using ASP.NET Core and Angular.</p>
Table of Contents (14 chapters)
10
Authentication and Authorization
12
Windows and Linux Deployment
ufw

Adding the "Add a new City" button

Open the /ClientApp/src/app/cities/cities.component.html file and add the following code:

<!-- ... existing code ... -->

<h1>Cities</h1>

<p>Here's a list of cities: feel free to play with it.</p>

<p *ngIf="!cities"><em>Loading...</em></p>

<div class="commands text-right" *ngIf="cities">
<button type="submit"
[routerLink]="['/city']"
class="btn btn-success">
Add a new City
</button>
</div>

<!-- ... existing code ... -->

Here we go. There's nothing new here; we've added the usual route-based button within a container and a *ngIf structural directive to make it appear after the cities array becomes available.