Home > DeveloperSection > Forums > Developing Single Page Application In AngularJS.
Ankit Singh

Total Post:341

Points:2389
Posted on    January-26-2016 11:22 PM

 Angular JS Angular JS  Web Application 
Ratings:


 1 Reply(s)
 345  View(s)
Rate this:
I want to Use  Single Page Application In AngularJS.How to do this Please Help me.


aditya kumar Patel

Total Post:242

Points:1722
Posted on    January-27-2016 4:41 AM


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>



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>



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>

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>

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

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) {

     
});









Don't want to miss updates? Please click the below button!

Follow MindStick