HodentekHelp: How do you navigate between pages in a Single Page Application?

Saturday, August 19, 2017

How do you navigate between pages in a Single Page Application?

Here we are working with a Angular JS application.

Actually there are no 'Pages' in a Single Page Application (SAP) but no problem. If you are familiar with anchor tags in HTML, you could follow it with the help of the SRC's in your script that will help updating the page dynamically calling up the routing in AngularJS.

These are two important script references that you should add to your SPA:<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><br /><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
This is an important module that makes routing possible:
ngRoute:

ngRoute module provides the routing and deep linking services and directives for a Angular JS applications.

You should read the documentation which gets clearer when you do an example.

ngRoute teams up with ngView directive to render the partial views.

ngView:
"ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service."

Here is an example of a SPA hosted on my localhost (the file below is placed in the wwwroot directory of C:\inetpub

<!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="HtekApp">
<h1>HODENTEK BOOKS</h1>
<p><a href="#/!">Welcome to Hodentek</a></p>

<a href="#!SSIS">SSIS </a>
<a href="#!SSRS">SSRS</a>
<a href="#!Azure">Azure SQL</a>


<div ng-view></div>

<script>
var app = angular.module("HtekApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "Click on the link to see the contents"
    })
    .when("/SSIS", {
        template : "<h1>SQL Server Integration Serivces 2005"
    })
    .when("/SSRS", {
        template: "<h1>SQL Server Reporting Services</h1><h2>SSRS 2008: ISBN: </h2><h2>SSRS 2012: ISBN</h2>"
    })
    .when("/Azure", {
        template: "<h1>Microsoft SQL Azure Enterprise Application Development</h1>"
    });
});
</script>


</body>
</html>

The page renderings of the links are as shown:

Saturday, August 19, 2017

How do you navigate between pages in a Single Page Application?

No comments: