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:
  •  //const app = angular.module("myApp", ["ngRoute"]);

Example-1:Only “When” Method used

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
</script>
<script src=
</script>
   
<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>

chevron_right


Output :
Before Click

After Click on Courses@GeeksForGeeks

After Click on Internships@GeeksForGeeks

Example-2: “Otherwise” Method also used along with “when”

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
</script>
<script src=
</script>
  
<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>                    

chevron_right


Output :
Before Click

After Click on Courses@GeeksForGeeks

After Click on Internships@GeeksForGeeks



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.