Single Page Application view pages in AngularJS

How to create single page application view pages?

In previous post, we learnt how to create Single Page Application template, and then how to create navigation systems and CRUD $http services, in this post we shall learn how to create Single Page Application pages that will have information like About Us, Contact us and other CRUD functionality.

Single Page Application view pages

We have already created folder structure of the single page application in this post. Now create few blank html pages as shown in the picture. Remember that we had already created the index.html page earlier here, we will only create following pages

create.html - help us to render a HTML form to create a new record into the database
delete.html - help us to delete a record from the database
details.html - show details of a single record from the database
edit.html - help us to edit a record to the database
index.html - help us to list all records from the database

about.html - show about details of the application / compnay
contact.html - show contact details
home.html - Landing page of the Single Page Application section

Single Page Application Pages

Creating AngularJS controllers for main pages

Create following AngularJS controllers into ~/Scripts/SPA/PersonalDetailsController.js file corresponding to main pages of the Single Page Applications.

In these AngularJS controllers, we have just set the Title property of the scope and in Default controller only (remember that this SPAController is referenced into the Index page defined here), we have set $rootScope.loading property value. (this property will help us to show and hide the "Loading ..." message while the data is loading to the page).

Difference between $scope and $rootScope

$scope is limited to the AngluarJS controller in which it is declared and can be accessed only within the element in which this controller is set.

$rootScope is available publically throughout the application, irrespective of in which controller it is defined.

// ===================================================
// Create other controllers for respective pages
// ===================================================

// default controller
app.controller("SPAController", function ($scope, $rootScope) {
    $scope.Title = "Welcome";
    $rootScope.loading = false;
});

// Home controller
app.controller("HomeController", function ($scope) {
    $scope.Title = "Single Page Application (SPA)";
});

// About controller
app.controller("AboutController", function ($scope) {
    $scope.Title = "About us";
});

// Contact controller
app.controller("ContactController", function ($scope) {
    $scope.Title = "Contact us";
});

Creating main page's views of Single Page Applications

We have already created AnngularJS controllers above, it's time to create respective page views.

home.html
This has some static text and an expression to write the value of Title property defined in the $scope.

<h1>{{Title}}</h1>
<p>
    Welcome to database driven Single Page Application development tutorials from <a href="http://techfunda.com" target="_blank"><strong>TechFunda.com</strong></a>.
</p>
<h2>Technology used</h2>
<ul>
    <li>HTML5</li><li>Bootstrap</li><li>ASP.NET Web API</li><li>AngularJS</li>
</ul>
<br />
<b>Click on <i>Personal Details</i> menu at the top to proceed.</b>

The out of above view looks like

Single Page Application Home page

contact.html

This view also has some static text and an expression for Title property.

<h1>{{Title}}</h1>
<p>
    Hyderabad, India.
</p>

The output of Contact page looks like this

Single Page Application contact

about.html

This page also has some static text and an expression for Title property.

<h1>{{Title}}</h1>
<p class="jumbotron">
    TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.

    Keep coming, new how to are being submitted every day !
</p>

The output of About page looks like

Single Page Application about

Now when we run the aplication and click on the navigational link at the top, we would be getting output that looks like above images.

How Sinlge Page Application view works

Remember that all navigational hyper link url starts with "#" - read the template post here that instruct the browser that you need not redirect the page to outer url but the target to navigate is within the page.

So suppose when user clicks on Home link, the AngularJS route module take charge of navigation, that goes and find out home.html from the server and place it's content (output) in place of <div ng-view></div> of ~/SPA/index.html. Same happens with other links of Sinlge Page Application as well.

Look at the Single Page Application route navigation post.

Clicking on Home link at the top menu, sets templateUrl to home.html and controller to HomeController and that shows the respective Title and Home page view as shown in above image.
Clicking on About us link, sets templateUrl to about.html and controller to AboutController that shows the respective Title and About page view as shown in above image.
Clicking on Contact us link, sets templateUrl to contact.html and controller to ContactController that shows the respective Title and Contact page view as shown in above image.