Book Image

Angular Projects - Second Edition

By : Aristeidis Bampakos
Book Image

Angular Projects - Second Edition

By: Aristeidis Bampakos

Overview of this book

Packed with practical advice and detailed recipes, this updated second edition of Angular Projects will teach you everything you need to know to build efficient and optimized web applications using Angular. Among the things you’ll learn in this book are the essential features of the framework, which you’ll master by creating ten different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool. As you advance, you’ll familiarize yourself with implementing popular technologies, such as Angular Router, Scully, Electron, Angular service worker, Nx monorepo tools, NgRx, and more while building an issue tracking system. You’ll also work on a PWA weather application, a mobile photo geotagging application, a component UI library, and many other exciting projects. In the later chapters, you’ll get to grips with customizing Angular CLI commands using schematics. By the end of this book, you will have the skills you need to be able to build Angular apps using a variety of different technologies according to your or your client’s needs.
Table of Contents (12 chapters)

Enabling offline mode with the service worker

Users from anywhere can now access our Angular application to get weather information for any city they are interested in. When we say anywhere, we mean any network type such as broadband, cellular (3G/4G/5G), and Wi-Fi. Consider the case where a user is in a place with low coverage or frequent network outages. How is our application going to behave? Let's find out by conducting an experiment:

  1. Run the Angular application using the serve command of the Angular CLI:
    ng serve
  2. Open your favorite browser and navigate to http://localhost:4200, which is the default address and port number for an Angular CLI project. You should see the input field for entering the name of the city:
    Figure 4.2 – Entering the name of a city

    Figure 4.2 – Entering the name of a city

  3. Open the developer tools of your browser and navigate to the Network tab. Set the value of the Throttling dropdown to Offline:
    Figure 4.3 – Offline network mode

    Figure 4.3 – Offline network mode

  4. Try to refresh your browser....