Single Page Application template in AngularJS

How to create a single page application (SPA) template?

In the preivous post, we learnt how to setup single page application project. In this post, we shall learn how to create Single Page Application template using HTML5, CSS3, Bootstrap and AngularJS.

Single Page Application Template

Open Visual Studio and go to ~/SPA folder and create Index.html page and copy-paste below code snippet. Let's see what is there in below code snippet of Single Page Application template.

Let's focus on non-highlited code snippet, these should be easy to understand as they are almost standard web page codes.

under <head> block. script and css pages are being referred. Apart from that two css classes are there that are used to show the "Loading ..." notification while the page or data is being loaded from the server.
under <body> top navigational menus and footer are being written, the css classes being used are coming from Bootstrap that help us to create responsive UI that is screen friendly (mobile, tabs, desktop( also called mobile friendly.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>TechFunda - Single Page Application</title>

    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/Site.css" rel="stylesheet" />
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/SPA/PersonalDetailsController.js"></script>
    <style>
        #divLoading {  
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:1000;
            background-color:#ddffdc;
            opacity: .8;
            content: 'Loading...';
         }

        .loading {
            position: absolute;
            left: 40%;
            top: 50%;
            margin-left: -32px;
            margin-top: -32px; 
            display: block;    
            color:black;
        }
    </style>
</head>
<body ng-app="app" ng-controller="SPAController">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/" title="SPA - TechFunda" class="navbar-brand">SPA - TechFunda</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">Home</a></li>
                    <li><a href="#/PD">Personal Details</a></li>
                    <li><a href="#/about">About us</a></li>
                    <li><a href="#/contact">Contact us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        <h1>{{Title}}</h1>
        <div id="divLoading" ng-show="loading" style="font-size:50px;">
            <div class="loading" >
                Loading .....
            </div>
        </div>
        <div ng-view></div>
        <hr />
        <footer>
            License: FREE to use by anyone in any form
            <p>&copy; Developed by Sheo Narayan from <a href="http://www.dotnetfunda.com" target="_blank">http://www.dotnetfunda.com</a>.</p>
        </footer>
    </div>
</body>
</html>

Now let us focus on highlighted code snippets above

under <head> block,

1^st <script> line referes to angularjs .js file
2^nd <script> line refers to angular-route module .js file that will be used to navigate user from one view to another
the last <script> line refers to our own .js file where we are going to write our own Javascript code (AngularJS, jQuery etc).

under <body> block

<body> tag has ng-app and ng-controller attributes (ng-app="app" ng-controller="SPAController") that instruct AngularJS to set the scope of the entire body tag with that particular app and controller.
We have "divLoading" element that accomodate another <div> with content as "Loading ....." that will be shown while the data loads from the server. Just a notification to the user so he/she knows some processing is going on.
<div ng-view></div> tag creates placeholder for AngularJS to render the views from server based on links clicked by user. So in real time, only this placeholder content would change, the remaining code either at top for header or bottom for footer would remain same.

You can change anything from above Single Page Application template code to suit your requirements, however ensure that you are not removing the highlited code snippet.

Views: 25741 | Post Order: 70

AngularJS > Single Page Application

Single Page Application template in AngularJS

How to create a single page application (SPA) template?

Related Posts

Utility Tools