What Is Angular Router? What’s New Angular 4 Router?
The Angular Router enables navigation from one view to the next as users perform application tasks.
Angular 4 comes with some useful changes in the router. Let’s take a look in the detail changes! Stayed Informed – Angular 4 Q/A
The Components of Routing and Navigation -
1. Router Imports
2. Router Configuration
3. Router Outlet
4. Router Link
5. Router State
6. Router Events
Angular Routing Overview -
1. Enter the URL in your address bar for your browser navigations.
2. Click on your navigations links on the page and the browser navigates to a new page which you have entered in the navigations URL.
3. Click the browsers back and forward buttons. The browser navigates backward and forward through the history of pages.
Router Imports- Angular Router is an optional service that presents a particular component view for a given URL i.e.
Router Configuration -
Router Outlet- It is a placeholder component and use to get expanded to each route's content.
Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive.
Router Link - It is use to link to application's routes and Router-link directive is used to link a specific part of your applications.
Router State -
After the end of each successful navigation life-cycle, the router builds a tree of Activated-Route objects that make up the current state of the router. You can access the current Router-State from anywhere in the application using the Router service and the router-State property.
Each Activated-Route in the Router-State provides methods to traverse up and down the route tree to get information from parent, child and sibling routes.
Router Events -
1. NavigationStart- This event is triggered when navigation starts.
2. RoutesRecognized - This event is triggered when Router parses the URL and routes are recognized.
3. RouteConfigLoadStart- This event is triggered before the Router lazy loads a route configuration.
4. RouteConfigLoadEnd - This event is triggered after a route has been lazy loaded.
5. NavigationEnd - This event is triggered when navigation ends successfully!
6. NavigationCancel - This event is triggered when navigation is cancelled.
7. NavigationError - This event is triggered when navigation fails due to error.
I hope you are enjoying with this post! Please share with you friends. Thank you!!