AngularJS Routing
Last Updated :
01 Aug, 2023
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.
AngularJS also provides the ability to pass parameters in routes, which means, it allows us to dynamically generate routes and handle different data based on the parameters. We can define route patterns with placeholders for parameters, and AngularJS will extract the values from the URL and make them available in your controller. This parameterization of routes can be useful for creating dynamic pages or handling specific data queries within a single-page 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...