AngularJS | Routing - GeeksforGeeks

16 Jan, 2020
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: //const app = angular.module("myApp", ["ngRoute"]);
 //const app = angular.module("myApp", ["ngRoute"]);
Example-1:Only “When” Method used
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>   <body ng-app="myApp">   <p><a href="#/!"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"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 :Before Click
After Click on Courses@GeeksForGeeks
After Click on Internships@GeeksForGeeks
Example-2: “Otherwise” Method also used along with “when”
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>  <body ng-app="myApp">  <p><a href="#/!"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"  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 :Before Click
After Click on Courses@GeeksForGeeks
After Click on Internships@GeeksForGeeks
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular | keyup event
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
Angular PrimeNG Messages Component
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
Angular 10 (blur) Event