---
title: "Developing Single Page Application In AngularJS."  
description: "Developing Single Page Application In AngularJS."  
author: "Anonymous User"  
published: 2016-01-26  
updated: 2016-01-27  
canonical: https://www.mindstick.com/forum/33931/developing-single-page-application-in-angularjs  
category: "angular js"  
tags: ["angular js", "web application"]  
reading_time: 4 minutes  

---

# Developing Single Page Application In AngularJS.

I want to Use Single [Page](https://www.mindstick.com/articles/13031/why-to-make-a-wikipedia-page) [Application](https://www.mindstick.com/articles/12824/calculator-application-in-android) In AngularJS.How to do this Please Help me.

## Replies

### Reply by Anonymous User

\

For single page application we have ng-route and ng-view directive. Ng-route manage the routing of a web application and ng-view allows us to render different view depending on the router.

\

```
Index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Single page web app using Angularjs</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/MyScript.js"></script>
    <style type="text/css">
        #navcontainer ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: left;
            padding-top: 4px;
        }

            #navcontainer ul li {
                display: inline;
            }

                #navcontainer ul li a {
                    text-decoration: none;
                    padding: .2em 1em;
                    color: white;
                    background-color: #0882D8;
                }

                    #navcontainer ul li a:hover {
                        color: #fff;
                        background-color: #369;
                    }
    </style>
</head>
<body ng-app="single-page-app">
    <div ng-controller="cfgController">
        <div>
            <table style="width:100%; background-color:#ff9900;">
                <tr><td style="background-color:#00A1FF; color:white; font-size:30pt; text-align:center; padding:10px; height:50px;">Single Page Application in AngularJS</td></tr>
                <tr>
                    <td id="navcontainer">
                        <nav>
                            <ul>
                                <li><a href="#/">Home</a></li>
                                <li><a href="#/Article">Articles</a></li>
                                <li><a href="#/Blog">Blog</a></li>
                                <li><a href="#/Interview">Interview</a></li>
                                <li><a href="#/Forum">Forum</a></li>
                            </ul>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td style="height:20pt;"></td>
                </tr>
                <tr>
                    <td>
                        <div ng-view>
                            <!--
                                This section Will show SPA concept.
                            -->
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height:20pt;"></td>
                </tr>

                <tr>
                    <td style="height:4pt;"></td>
                </tr>
            </table>

        </div>

    </div>
</body>
</html>Forum.html
```

```
<div style="padding-left:130px;padding-right:200px;">
    <h1> This is Forum Page</h1>
 <article>
        <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4>
    <div class="row">
        <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;">
            <span class="glyphicon glyphicon-folder-open" title="Category"></span>&nbsp;<a href=" " title="See all posts in C#">C#</a>
            <span class="glyphicon glyphicon-bookmark" title="Tag"></span>
            <a href="#" title="See all posts in C#">C#</a><span>&nbsp;</span>
<a href="#" title="See all posts in .NET">.NET</a><span>&nbsp;</span>

        </div>
    </div>
    <div class="row">

            <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;">
                By&nbsp;<span class="text-primary"><a href="#">Manoj Bhatt</a></span>&nbsp;posted
        <span class="glyphicon glyphicon-time"></span>&nbsp;<span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span>
            </div>

        <div class="col-sm-5 col-md-5 text-right viewsbox">

            <span class="glyphicon glyphicon-pencil"></span>
                <a href="#">&nbsp;0
                    Reply(s)
                </a>
            <br>
            <span class="glyphicon glyphicon-eye-open"></span>
                <a href="#">&nbsp;5  View(s)
                </a>
        </div>
    </div>
</article>
</div>
```

![Developing Single Page Application In AngularJS.](https://www.mindstick.com/mindstickforums/132ef060-bd2b-4cb0-9830-c94c4e4ac2af/images/aa5634fb-cec6-47ed-a2f2-aef6976621a6.png)\
\

```
Article.Html

<div style="padding-left:130px;padding-right:200px;">
    <h1> This is - ARTICLE Page</h1>
     <article>
        <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4>
    <div class="row">
        <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;">
            <span class="glyphicon glyphicon-folder-open" title="Category"></span>&nbsp;<a href=" " title="See all posts in C#">C#</a>
            <span class="glyphicon glyphicon-bookmark" title="Tag"></span>
            <a href="#" title="See all posts in C#">C#</a><span>&nbsp;</span>
<a href="#" title="See all posts in .NET">.NET</a><span>&nbsp;</span>

        </div>
    </div>
    <div class="row">

            <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;">
                By&nbsp;<span class="text-primary"><a href="#">Manoj Bhatt</a></span>&nbsp;posted
        <span class="glyphicon glyphicon-time"></span>&nbsp;<span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span>
            </div>

        <div class="col-sm-5 col-md-5 text-right viewsbox">

            <span class="glyphicon glyphicon-pencil"></span>
                <a href="#">&nbsp;0
                    Reply(s)
                </a>
            <br>
            <span class="glyphicon glyphicon-eye-open"></span>
                <a href="#">&nbsp;5  View(s)
                </a>
        </div>
    </div>
</article>
</div>
```

\
![Developing Single Page Application In AngularJS.](https://www.mindstick.com/mindstickforums/132ef060-bd2b-4cb0-9830-c94c4e4ac2af/images/414c9636-afb5-4830-98a6-7ba98c6f9018.png)\

```
Blog.html

<div style="padding-left:130px;padding-right:200px;">
    <h1> This is Blog Page</h1>
  <article>
        <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4>
    <div class="row">
        <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;">
            <span class="glyphicon glyphicon-folder-open" title="Category"></span>&nbsp;<a href=" " title="See all posts in C#">C#</a>
            <span class="glyphicon glyphicon-bookmark" title="Tag"></span>
            <a href="#" title="See all posts in C#">C#</a><span>&nbsp;</span>
<a href="#" title="See all posts in .NET">.NET</a><span>&nbsp;</span>

        </div>
    </div>
    <div class="row">

            <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;">
                By&nbsp;<span class="text-primary"><a href="#">Manoj Bhatt</a></span>&nbsp;posted
        <span class="glyphicon glyphicon-time"></span>&nbsp;<span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span>
            </div>

        <div class="col-sm-5 col-md-5 text-right viewsbox">

            <span class="glyphicon glyphicon-pencil"></span>
                <a href="#">&nbsp;0
                    Reply(s)
                </a>
            <br>
            <span class="glyphicon glyphicon-eye-open"></span>
                <a href="#">&nbsp;5  View(s)
                </a>
        </div>
    </div>
</article>
</div>
```

![Developing Single Page Application In AngularJS.](https://www.mindstick.com/mindstickforums/132ef060-bd2b-4cb0-9830-c94c4e4ac2af/images/201ff8e5-44c3-4f4a-83bd-0366910de293.png)\

```
Interview.html

<div style="padding-left: 130px; padding-right: 200px;">
    <h1>This is Interview Page</h1>
    <article>
        <h4><a href="#">What is Boxing and Unboxing type conversion?</a></h4>
        <div class="row">
            <div class="col-sm-7 col-md-7 populartag" style="padding-left: 0;">
                <span class="glyphicon glyphicon-folder-open" title="Category"></span>&nbsp;<a href=" " title="See all posts in C#">C#</a>
                <span class="glyphicon glyphicon-bookmark" title="Tag"></span>
                <a href="#" title="See all posts in C#">C#</a><span>&nbsp;</span>
                <a href="#" title="See all posts in .NET">.NET</a><span>&nbsp;</span>

            </div>
        </div>
        <div class="row">

            <div class="col-sm-7 col-md-7 postedbox" style="padding-left: 0; margin-top: 7.5px;">
                By&nbsp;<span class="text-primary"><a href="#">Manoj Bhatt</a></span>&nbsp;posted
        <span class="glyphicon glyphicon-time"></span>&nbsp;<span title="1/26/2016 10:29:21 PM"> 43 minutes ago</span>
            </div>

            <div class="col-sm-5 col-md-5 text-right viewsbox">

                <span class="glyphicon glyphicon-pencil"></span>
                <a href="#">&nbsp;0
                    Reply(s)
                </a>
                <br>
                <span class="glyphicon glyphicon-eye-open"></span>
                <a href="#">&nbsp;5  View(s)
                </a>
            </div>
        </div>
    </article>
</div>
```

![Developing Single Page Application In AngularJS.](https://www.mindstick.com/mindstickforums/132ef060-bd2b-4cb0-9830-c94c4e4ac2af/images/df6b4e0a-bc31-4356-96ec-2ed7b38e74be.png)\

## Home.cshtml

```
<div style="padding-left:130px;padding-right:200px;">
    <h1> This is home page</h1>
    <p>Home</p>
</div>
```

![Developing Single Page Application In AngularJS.](https://www.mindstick.com/mindstickforums/132ef060-bd2b-4cb0-9830-c94c4e4ac2af/images/1bd0cf49-89f2-4d36-9c1b-1c47876b3e51.png)\

```
Myscript.js

var app = angular.module('single-page-app', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'Home.html'
        })
        .when('/Article', {
            templateUrl: 'Article.html'
        })
    .when('/Blog', {
        templateUrl: 'Blog.html'
    })
    .when('/Forum', {
        templateUrl: 'Forum.html'
    })
    .when('/Interview', {
        templateUrl: 'Interview.html'
    });
});
app.controller('cfgController', function ($scope) {


});
```

\
\
\
\
\
\
\
\


---

Original Source: https://www.mindstick.com/forum/33931/developing-single-page-application-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
