AngularJS Routing
Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application. The ngRoute module helps in accessing different pages of an application without reloading the entire application.
Important:
- $routeProvider is used to configure the routes. It helps to define what page to display when a user clicks a link. It accepts either when() or otherwise() method.
- The ngRoute must be added as a dependency in the application module:
Example 1: This example describes the AngularJS Routing by implementing the “when” method that specifies the new route definition to the $route service.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script src= </script> </head> <body ng-app="myApp"> <p> <a href="#/!"> <img src= alt="GeeksforGeeks" style="width: 90vw;"> </a> </p> <a href="#!courses">Courses@geeksforgeeks</a> <br> <a href="#!internships">Internships@geeksforgeeks</a> <div ng-view></div> <script> const app = angular.module("myApp", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/", { template: `<h1>Welcome to GeeksForGeeks</h1> <p> Click on the links to change this content </p>` }) .when("/courses", { template: `<h1>Courses Offered</h1> <p> <ul> <li>Machine Learning Foundation</li> <li>Geeks Classes</li> <li>System Design</li> </ul> </p>` }) .when("/internships", { template: `<h1>Hire With Us</h1> <p> <ul> <li>Software Developer</li> <li>Technical Content Writer</li> <li>Technical Content Engineer</li> </ul> </p>` }); }); </script> </body> </html> |
Output:
Example 2: This example describes the AngularJS Routing by the “Otherwise” method is used with the “when” method, where the otherwise() method is used to set the route definition to change the route when no route definition is matched.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script src= </script> </head> <body ng-app="myApp"> <p> <a href="#/!"> <img src= alt="GeeksForGeeks" style="width: 90vw;"> </a> </p> <a href="#!courses">Courses@geeksforgeeks</a> <br> <a href="#!internships">Internships@geeksforgeeks</a> <div ng-view></div> <script> const app = angular.module("myApp", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/courses", { template: `<h1>Courses Offered</h1> <p> <ul> <li>Machine Learning Foundation</li> <li>Geeks Classes</li> <li>System Design</li> </ul> </p>` }) .when("/internships", { template: `<h1>Hire With Us</h1> <p> <ul> <li>Software Developer</li> <li>Technical Content Writer</li> <li>Technical Content Engineer</li> </ul> </p>` }) .otherwise({ template: `<h1>Please Select Something!</h1> <p> Nothing has been selected yet </p>` }); }); </script> </body> </html> |
Output:
Please Login to comment...