Book Image

Hands-On Full-Stack Web Development with ASP.NET Core

By : Tamir Dresher, Amir Zuker, Shay Friedman
Book Image

Hands-On Full-Stack Web Development with ASP.NET Core

By: Tamir Dresher, Amir Zuker, Shay Friedman

Overview of this book

Today, full-stack development is the name of the game. Developers who can build complete solutions, including both backend and frontend products, are in great demand in the industry, hence being able to do so a desirable skill. However, embarking on the path to becoming a modern full-stack developer can be overwhelmingly difficult, so the key purpose of this book is to simplify and ease the process. This comprehensive guide will take you through the journey of becoming a full-stack developer in the realm of the web and .NET. It begins by implementing data-oriented RESTful APIs, leveraging ASP.NET Core and Entity Framework. Afterward, it describes the web development field, including its history and future horizons. Then, you’ll build webbased Single-Page Applications (SPAs) by learning about numerous popular technologies, namely TypeScript, Angular, React, and Vue. After that, you’ll learn about additional related concerns involving deployment, hosting, and monitoring by leveraging the cloud; specifically, Azure. By the end of this book, you’ll be able to build, deploy, and monitor cloud-based, data-oriented, RESTful APIs, as well as modern web apps, using the most popular frameworks and technologies.
Table of Contents (22 chapters)
Title Page
PacktPub.com
Contributors
Preface
Index

Busy indicator


As a final implementation step, let's implement a busy indicator on our page:

  1. Generate a BusyComponent component as part of the shared module with the following command:
ng generate component modules/shared/busy
  1. Replace the HTML file /src/app/modules/shared/busy/busy.component.html contents with the following:
<div class="loader-container">
    <div class="loader"></div>
</div>

 

 

  1. Replace the CSS file /src/app/modules/shared/busy/busy.component.css contents with the following:
.loader-container {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: azure;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  1. Export the component in SharedModule...