Book Image

Angular Router

By : Victor Savkin
Book Image

Angular Router

By: Victor Savkin

Overview of this book

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.
Table of Contents (19 chapters)
Angular Router
Credits
About the Author
www.PacktPub.com
Customer Feedback
Preface

Imperative navigation


To navigate imperatively, inject the Router service and call navigate or navigateByUrl on it. Why two methods and not one?

Using router.navigateByUrl is similar to changing the location bar directly--we are providing the "whole" new URL. Whereas router.navigate creates a new URL by applying a series of passed-in commands, a patch, to the current URL.

To see the difference clearly, imagine that the current URL is /inbox/11/messages/22(popup:compose).

With this URL, calling router.navigateByUrl('/inbox/33/messages/44') will result in /inbox/33/messages/44, and calling router.navigate('/inbox/33/messages/44') will result in /inbox/33/messages/44(popup:compose).

Router.navigate

Let's see what we can do with router.navigate .

Passing an array or a string

Passing a string is sugar for passing an array with a single element.

router.navigate('/inbox/33/messages/44')

is sugar for

router.navigate(['/inbox/33/messages/44'])

which itself is sugar for

router.navigate(['/inbox', 33...