Angular Routing
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.
<body ng-app="myApp">
<a href="#!main">Home</a>
<a href="#!about">About</a>
<a href="#!contact">Contact</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.html"
})
.when("/about", {
templateUrl : "about.html"
})
.when("/contact", {
templateUrl : "contact.html"
});
});
</script>
</body>
Note: To make your applications ready for routing, you must include the AngularJS Route module:
1. Download from Angular site. Download
2. Use CDN <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
There are three different ways to include the ng-view directive in your application:
1. <div ng-view></div>
2. <ng-view></ng-view>
3. <div class="ng-view"></div>
Note: Applications can only have one ng-view directive