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
Image 1.
Now we need to add AngularJS reference into our
application. So right click on Solution Explorer -> Manage Nuget packeges
Image 2.
Image 3.
Image 4.
Now again right click on Project's Solution Explorer
-> Add New Item.
Image 5.
Image 6.
Now add a JavaScript file in your Project so right
click on project's Solution Explorer -> Add New Item
Image 7.
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.
*/
});
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>
Image 10.
Article.html
Image 11.
Blog.html
Image 12.
AboutUs.html:
Image 13.
ContactUs.html:
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>
Image 15.
Now run you application:
Image 16.
Click on Articles Menu and see your URL and content.
Image 17.
Image 18.
Image 19.
Image 20.