Step by step approach for creating a single page application
using angularjs.
1.
Lets take the Index.html as the master page and rest of the pages are child
page.
You need to include all the resource file reference
to that page only.
For single page application you need to
include angular-route.min.js along
with angular.min.js.
Code snippet :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Single Page
Application</title>
<!--Outside
CSS and JS you need to download from respective source -->
<!--<link
href="Style/bootstrap.min.css" rel="stylesheet" />-->
<link href="Content/bootstrap.css" rel="stylesheet" />
<!--<script
src="scripts/jquery.min.js"></script>-->
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<!--<script
src="scripts/route.js"></script>-->
<script src="Scripts/angular-route.min.js"></script>
<!--
Application using JS and CSS -->
<script src="Scripts/application.js"></script>
<link href="Content/Site.css" rel="stylesheet" />
<!--<script
src="Scripts/index.js"></script>-->
<!--<script
src="Scripts/application.js"></script>-->
<script src="Scripts/application/Home.js"></script>
<script src="Scripts/application/About.js"></script>
<script src="Scripts/application/Contact.js"></script>
<script src="Scripts/application/Events.js"></script>
<script src="Scripts/application/Places.js"></script>
<script src="Scripts/application/RathoreDetail.js"></script>
<script src="Scripts/application/Gallary.js"></script>
</head>
<body>
<header>
<nav class="navbar
navbar-default">
<div class="container-fluid" >
<!-- Brand and toggle get
grouped for better mobile display -->
<div class="navbar-header" style="height:60px;" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img width="50" src="images/rathore-rajput-logo-wallpapers.jpg" style="border: solid 2px #ebed5d" /><!--Khatriya Rathore--></a>
</div>
<!-- Collect the nav links,
forms, and other content for toggling -->
<div class="collapse navbar-collapse" data-toggle="collapse" id="bs-example-navbar-collapse-1" style="font-size:18px;padding-top:10px">
<ul class="nav
navbar-nav">
<!--<li><a
href="#">Action</a></li>-->
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Home">Home</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#About">About</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#RathoreDetail">Rathore Detail</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Gallary">Gallary</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Events">Events</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Places">Places</a></li>
<li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<!--
MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" >
<!--
angular templating -->
<!--
this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
2.
Code for making the route for application which
is written in application.js.
See the below code snippet;
.when('/About', {
templateUrl: 'About.html',
controller: 'About'
})
TemplateUrl is the URL
for page which you want to show.
Controller is the name
of controller which you want to bind for that page.
Code Snippet
var app = angular.module('myApp', ['ngRoute']);
// configure our routes
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Home.html',
controller: 'Home'
})
//
route for the FixedDeposit page
.when('/About', {
templateUrl: 'About.html',
controller: 'About'
})
// route for the Loan
page
.when('/Home', {
templateUrl: 'Home.html',
controller: 'Home'
})
.when('/Events', {
templateUrl: 'Events.html',
controller: 'Events'
})
.when('/Places', {
templateUrl: 'Places.html',
controller: 'Places'
})
.when('/Contact', {
templateUrl: 'Contact.html',
controller: 'Contact'
})
.when('/Gallary', {
templateUrl: 'Gallary.html',
controller: 'Gallary'
})
.otherwise({
redirectTo: '/',
templateUrl: 'Home.html',
controller: 'Home'
});
});
3.
How there is code in one page that how we will
display the page
Below code snippet for controller
it is for contact page
// Controller for Loan
app.controller('Contact', function ($scope) {
$scope.message = 'Check the details about Loan.';
});
Below code snippet for HTML page
<div ng-controller="Contact">
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-offset-1
headerText">
Contacts
</div>
</div>
<div class="row">
<div class="col-md-1"> </div>
<div class="col-md-10">
You can see the list of
contacts.
</div>
<div class="col-md-1"> </div>
</div>
</div>
</div>
No comments:
Post a Comment