Routing - lordoftheflies/angular-essential-training GitHub Wiki

Selecting transcript lines in this section will navigate to timestamp in the video

  • Client-side web applications can take on many shapes from small widgets to interactive forms to full blown multi-tool experiences. When you start needing to build a client-side solution that supports tool navigation, like say, a customer management system that allows a user to view, edit, and create customers, and the same for orders, you need some sort of routing solution. A server-delivered solution allows you to handle routing based on unique URL requests to the server. But on the client-side you want to be able to not send URL requests to the server and instead handle them in the client, adjusting the UI and the data displayed accordingly. Angular provides a router module out of the box for doing just that. It supports configuring route paths to components, route params, so you can have variables in the URL, a directive for working with links that do routing, a directive for specifying where in a template the routed component will display, creating child routes, and routing life cycle hooks for responding to routing events. The Angular router also handles all of the navigation interception. It will interpret a URL request and run it through its route logic to find a match and alter the component tree accordingly. It also handles history state, altering the way a browser handles it by default so that back and forward actions by the user will result in Angular route changes. Using the router gives your apps a familiar feel to standard client-server website experience users have grown accustomed to. But it also provides you with a way to load different components through a set of configuration instructions and links rather than a bunch of conditional logic scripting.