Angular 2 - Routing

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 wanna be able to not send URL requests to the server, and instead handle them in the client, adjusting the UI, and the data display accordingly. 

Angular provides a router module out of the box for doing just that. It supports configuring route pass 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 lifecycle hooks for responding to routing events. The Angular router also handles all 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 the 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.