If you want to create a SPA (Single Page Application) that navigates to different pages in your application with no page reloading, you need to use the ngRoute module. As the name implies, the ngRoute module will “route” your application to different pages without reloading the entire application.
First, create page snippets that you need for your application:
Below is an example of the welcome.html page. The other pages are created similarly.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
</head> <body>
<h1>Welcome</h1>
<p>Welcome content goes here...</p>
</body>
</html>
Write the following code to create an app and name it index.html.
<!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>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "welcome.html"})
.when("/products", {templateUrl : "products.html" })
.when("/services", {templateUrl : "services.html"})
.when("/contact_us", {templateUrl : "contact_us.html"});
});
</script>
<style>
a {border: 1px solid black;
padding:2px;
font-family:Arial;
margin-left:5px;
text-decoration: none;
background-color: blue;
color:white;
font-weight:bold;}
a:hover{background-color: red;}
</style>
<body ng-app="myApp">
<a href="#/!">Home</a>
<a href="#!products">Products</a>
<a href="#!services">Services</a>
<a href="#!contact_us">Contact Us</a>
<div ng-view>Page will be shown here...</div>
</body>
</html>
CODE EXPLANATION:
var app = angular.module("myApp", ["ngRoute"]);With the $routeProvider you can also define a controller for each "view".
First, let’s modify the pages that we created for our application. Notice you can add AngularJS expressions as you would do to any HTML page.
Below is an example of the products.html page. Do the same for the services.html and the contact_us.html page (but NOT the welcome.html page).
products.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
</head> <body>
<h1>Welcome</h1>
<p>Welcome content goes here...</p> <p>{{message}}</p>
</body>
</html>
Next, modify the main script with the following highlighted code:
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "welcome2.html"})
.when("/products", {templateUrl : "products2.html" , controller: "productsCtrl"})
.when("/services", {templateUrl : "services2.html", controller: "servicesCtrl"})
.when("/contact_us", {templateUrl : "contact_us2.html", controller: "contactUsCtrl"});
});
// Three controllers added ----------------------------------
app.controller("productsCtrl", function ($scope) {
$scope.message = "End of Products Page";
});
app.controller("servicesCtrl", function ($scope) {
$scope.message = "End of Services Page ";
});
app.controller("contactUsCtrl", function ($scope) {
$scope.message = "End of Contact Us Page ";
});
</script>
CAUTION: Be careful not to add a semicolon on the end of the first three .when() methods because this represent a “chain” of properties that are added to the $routProvider object. Also, make sure you add the comma before each controller).
NOTE: Notice that each "view" has its own controller which each gives the "message" variable a value.
The previous example used the templateUrl property in the $routeProvider.when() method. You can also use the template property which allows you to write HTML directly in the property value and not refer to a page. The advantage of this approach is if you have a small amount of content to display is that you don’t have to create separate pages for each link and you don’t have to create a controller for each.
Modify the previous $routeProvider with the following highlighted information and delete the three controllers code:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "index.html"})
.when("/products", {template : "<h1>Products</h1><p>Products content goes here</p>"})
.when("/services", {template : "<h1>Services</h1><p>Services content goes here</p>"})
.when("/contact_us",{template : "<h1>Contact Us</h1><p>Contact Us content goes here</p>"});
});
NOTE: The external files are in this case are not being used.
The previous example used the when() method of the $routeProvider. You can also use the otherwise method which is the default value when none have been selected. Modify the previous $routeProvider again with the following code:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/!", {templateUrl : "index.html"})
.when("/products", {template : "<h1>Products</h1><p>Products content goes here</p>"})
.when("/services", {template : "<h1>Services</h1><p>Services content goes here</p>"})
.when("/contact_us",{template : "<h1>Contact Us</h1><p>Contact Us content goes here</p>"})
.otherwise( {template : "<h1>None</h1><p>Nothing has been selected</p>"});
});
CAUTION:
Notice that once you click the Home button the Nothing has been selected message still persist.