DEVELOPING SINGLE PAGE APPLICATION IN ANGULARJS.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 951  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) {
    
         
    });
    








      Modified On Apr-11-2018 01:00:19 AM

Answer

NEWSLETTER

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