Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / developing single page application in angularjs.
Ask Question
Anonymous User
Anonymous User

Other

I am a content writter !

Message

1 Answers

Anonymous User
Anonymous User 27 Jan 2016
Report Abuse

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>
Anonymous User

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>

Anonymous User
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>
Anonymous User
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>
Anonymous User

Home.cshtml

<div style="padding-left:130px;padding-right:200px;">
    <h1> This is home page</h1>
    <p>Home</p>
</div>
Anonymous User
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) {

     
});








advertising