Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | Routing

  • Difficulty Level : Medium
  • Last Updated : 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"]);

Example-1:Only “When” Method used




<!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>

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=
</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>                    

Output :
Before Click

After Click on Courses@GeeksForGeeks

After Click on Internships@GeeksForGeeks




My Personal Notes arrow_drop_up
Recommended Articles
Page :