Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Angular Router
Angular Router

Angular Router: From Angular core team member and creator of the router

Arrow left icon
Profile Icon Victor Savkin
Arrow right icon
$18.99 $27.99
Book Mar 2017 118 pages 1st Edition
eBook
$18.99 $27.99
Print
$34.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Victor Savkin
Arrow right icon
$18.99 $27.99
Book Mar 2017 118 pages 1st Edition
eBook
$18.99 $27.99
Print
$34.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$18.99 $27.99
Print
$34.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Angular Router

Chapter 1. What Do Routers Do?

Before we jump into the specifics of the Angular router, let's talk about what routers do in general.

As you know, an Angular application is a tree of components. Some of these components are reusable UI components (for example, list and table), and some are application components, which represent screens or some logical parts of the application. The router cares about application components, or, to be more specific, about their arrangements. Let's call such component arrangements router states. So a router state defines what is visible on the screen.

Note

A router state is an arrangement of application components that defines what is visible on the screen.

Router configuration


The router configuration defines all the potential router states of the application. Let's look at an example:

[
  {
    path: ':folder',
    children: [
      {
        path: '',
        component: ConversationsCmp
      },
      {
        path: ':id',
        component: ConversationCmp,
        children: [
          { path: 'messages', component: MessagesCmp },
          { path: 'messages/:id', component: MessageCmp }
        ]
      }
    ]
  },
  {
    path: 'compose',
    component: ComposeCmp,
    outlet: 'popup'
  },
  {
    path: 'message/:id',
    component: PopupMessageCmp,
    outlet: 'popup'
  }
]

Don't worry about understanding all the details. I will cover them in later chapters. For now, let's depict the configuration as follows:

As you can see the router configuration is a tree, with every node representing a route. Some nodes have components associated with them, some do not. We also use color to designate different outlets, where an outlet is a location in the component tree where a component is placed.

Router state


A router state is a subtree of the configuration tree. For instance, the example below has ConversationsCmp activated. We say activated instead of instantiated as a component can be instantiated only once but activated multiple times (any time its route's parameters change):

Not all subtrees of the configuration tree are valid router states. If a node has multiple children of the same color, i.e., of the same outlet name, only one of them can be active at a time. For instance, ComposeCmp and PopupMessageCmp cannot be displayed together, but ConversationsCmp and PopupMessageCmp can. Stands to reason, an outlet is nothing but a location in the DOM where a component is placed. So we cannot place more than one component into the same location at the same time.

Navigation


The router's primary job is to manage navigation between states, which includes updating the component tree.

Note

Navigation is the act of transitioning from one router state to another.

To see how it works, let's look at the following example. Say we perform a navigation from the state above to this one:

Because ConversationsCmp is no longer active, the router will remove it. Then, it will instantiate ConversationCmp with MessagesCmp in it, with ComposeCmp displayed as a popup.

Summary


That's it. The router simply allows us to express all the potential states which our application can be in, and provides a mechanism for navigating from one state to another. The devil, of course, is in the implementation details, but understanding this mental model is crucial for understanding the implementation.

Isn't it all about the URL?


The URL bar provides a huge advantage for web applications over native ones. It allows us to reference states, bookmark them, and share them with our friends. In a well-behaved web application, any application state transition results in a URL change, and any URL change results in a state transition. In other words, a URL is nothing but a serialized router state. The Angular router takes care of managing the URL to make sure that it is always in-sync with the router state.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • • Written by the creator of the Angular router, giving you the best information straight from the source
  • • Get full coverage of the entire Angular Router library and understand exactly how every command works
  • • Essential for all serious users of Angular who need to manage states within their applications

Description

Managing state transitions is one of the hardest parts of building applications. This is especially true on the web, where you also need to ensure that the state is reflected in the URL. In addition, you might want to split applications into multiple bundles and load them on demand. Doing this transparently isn’t easy. The Angular router solves these problems. Using the router, you can declaratively specify application states, manage state transitions while taking care of the URL, and load bundles on demand. This book is a complete description of the Angular router written by its designer. It goes far beyond a how-to-get-started guide and talks about the library in depth. The mental model, design constraints, and the subtleties of the API-everything is covered. You’ll learn in detail how to use the router in your own applications. Predominantly, you’ll understand the inner workings of the router and how you can configure it to work with any edge cases you come across in your sites. Throughout the book, you’ll see examples from real-world use in the MailApp application. You can view the full source of this application and see how the router code works to manage the state of the application and define what is visible on screen. Reading this book will give you deep insights into why the router works the way it does and will make you an Angular router expert.

What you will learn

  • • Understand the role of the Angular router and how to make the most of it
  • • Build and parse complex URLs
  • • Learn about the componentless and empty-path routes
  • • Take control of states in your application
  • • Make use of imperative navigation
  • • Understand guards and how they can benefit your applications
  • • Optimize configuration and run tests on your routing

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Mar 20, 2017
Length 118 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781787288904
Vendor :
Google

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Mar 20, 2017
Length 118 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781787288904
Vendor :
Google

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together

Stars icon
Total $ 73.97 107.97 34.00 saved
Angular Services
$24.99 $35.99
Expert Angular
$29.99 $43.99
Angular Router
$18.99 $27.99
=
Book stack Total $ 73.97 107.97 34.00 saved Stars icon

Table of Contents

19 Chapters
Angular Router Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Author Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Customer Feedback Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. What Do Routers Do? Chevron down icon Chevron up icon
2. Overview Chevron down icon Chevron up icon
3. URLs Chevron down icon Chevron up icon
4. URL Matching Chevron down icon Chevron up icon
5. Redirects Chevron down icon Chevron up icon
6. Router State Chevron down icon Chevron up icon
7. Links and Navigation Chevron down icon Chevron up icon
8. Lazy Loading Chevron down icon Chevron up icon
9. Guards Chevron down icon Chevron up icon
10. Events Chevron down icon Chevron up icon
11. Testing Router Chevron down icon Chevron up icon
12. Configuration Chevron down icon Chevron up icon
Fin Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.