Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Developing SPA(Single Page Application) Step By Step

Article:
Viewed:  1373 
Posted On:  20/09/2015 05:27:39 
What is SPA? What is Single Page Application in AngularJS? 
SPA.zip
 

We have already heard a lot about AngularJS and SPA (Single Page Application). But when we start think to develop about SPA application then we have a lot of confusion ie: how can I develop SAP application, What steps should I take to develop SAP etc. So here I am going to explain step by step development of a SAP(Single Page Application).

So for SPA 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-different view depending on the router.

Now open Visual Studio -> Add -> New project

1_1.png

Image 1.

Now we need to add AngularJS reference into our application. So right click on Solution Explorer -> Manage Nuget packeges

2.png

Image 2.

3.png

Image 3.

4.png

Image 4.

Now again right click on Project's Solution Explorer -> Add New Item.

5.png

Image 5.

6.png

Image 6.

Now add a JavaScript file in your Project so right click on project's Solution Explorer -> Add New Item

7.png

Image 7.

8.png

Image 8.

Here in your MyScript.js file do below code:

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('/ContactUs', {
        templateUrl: 'ContactUs.html'
    })
    .when('/AboutUs', {
        templateUrl: 'AboutUs.html'
    });
});
app.controller('cfgController', function ($scope) {
 
    /*     
    Here you can handle controller for specific route as well.
    */
});

9.png

Image 9.

Now Add Home.html, Article.html, Blog.html, ContactUs.html & AboutUs.html in your application.

 Home.html:

<div style="padding-left:130px;padding-right:200px;">
    <h1> Welcome RS - To the SPA World! - HOME</h1>
    <p>Develop SPA (Single Page Application Step By Step.)</p>
</div>

10.png

Image 10.

Article.html

11.png

Image 11.

Blog.html

12.png

Image 12.

AboutUs.html:

13.png

Image 13.

ContactUs.html:

14.png

Image 14.

Now open your Index.html and do below code:

<!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: red;
                }
 
                    #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:skyblue;">
                <tr><td style="background-color:blue; color:white; font-size:30pt; text-align:center; padding:10px; height:50px;">
                               SPA - (Single Page Application - 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="#/ContactUs">Cotact us</a></li>
                                <li><a href="#/AboutUs">About us</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>@Copyright : RS</td>
                </tr>
                <tr>
                    <td style="height:4pt;"></td>
               </tr>
            </table>
 
        </div>
 
    </div>
</body>
</html>

15.png

Image 15.

Now run you application:

16.png

Image 16.

Click on Articles Menu and see your URL and content.

17.png

Image 17.

18.png

Image 18.

19.png

Image 19.

20.png

Image 20.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us