- If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
- In the previous examples we have used the When method of the $routeProvider.
- You can also use the otherwise method, which is the default route when none of the others get a match.
Program
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js">
</script>
<body ng-app="myApp">
<p>
<a href="#/!">Main</a>
</p>
<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>
<p>
Click on the links to change the content.
</p>
<p>
Use the "otherwise" method to define what to display when none of the links are clicked.
</p>
<div ng-view>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
$routeProvider
.when("/banana",
{
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato",
{
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise
({
template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
});
});
</script>
</body>
</html>
Output