DEVELOPING SINGLE PAGE APPLICATION IN ANGULARJS.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 808  View(s)
Ratings:
Rate this:
I want to Use  Single Page Application In AngularJS.How to do this Please Help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: Developing Single Page Application In AngularJS.


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








Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!