You're reading from Learning Angular A no-nonsense beginner's guide to building web applications with Angular 10 and TypeScript

Product type Paperback

Published in Sep 2020

Publisher Packt

ISBN-13 9781839210662

Length 430 pages

Edition 3rd Edition

Languages

JavaScript

Tools

Angular

Concepts

Front End Web Development

Authors (2):

Aristeidis Bampakos

Pablo Deeleman

View More author details

Table of Contents (19) Chapters

Preface

1. Section 1: Getting Started with Angular

2. Chapter 1: Building Your First Angular App FREE CHAPTER

3. Chapter 2: Introduction to TypeScript

4. Section 2: Components – the Basic Building Blocks of an Angular App

5. Chapter 3: Component Interaction and Inter-Communication

6. Chapter 4: Enhance Components with Pipes and Directives

7. Chapter 5: Structure an Angular App

8. Chapter 6: Enrich Components with Asynchronous Data Services

9. Section 3: User Experience and Testability

10. Chapter 7: Navigate through Components with Routing

11. Chapter 8: Orchestrating Validation Experiences in Forms

12. Chapter 9: Introduction to Angular Material

13. Chapter 10: Giving Motion to Components with Animations

14. Chapter 11: Unit test an Angular App

15. Section 4: Deployment and Practice

16. Chapter 12: Bringing an Angular App to Production

17. Chapter 13: Develop a Real-World Angular App

18. Other Books You May Enjoy

Leave a review - let other readers know what you think

Chapter 7: Navigate through Components with Routing

In previous chapters, we did a great job of separating concerns and adding different layers of abstraction to increase the maintainability of an Angular 10 app. However, we have barely concerned ourselves with the user experience that we provide through the app.

Currently, our user interface is bloated with components scattered across a single screen. We need to provide a better navigational experience and a logical way to change the application's view intuitively. Now is the right time to incorporate routing and split the different areas of interest into different pages that are interconnected by a grid of links and URLs.

So, how do we deploy a navigation scheme between components of an Angular 10 app? We use the Angular router that was built with componentization in mind and create custom links to make our components react to them.

In this chapter, we will do the following: