Introduction:
This article explain you about Single Page Application via multiple views on a single page using
AngularJS
AngularJS
Description:
AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided ng-view directives and $routeProvider services.
To implement this we need to write the code like as shown below
ng-view directives:-
<div ng-app = "myApp">
...
<div ng-view></div>
</div> $routeProvider :-
$routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.Points to be considered in example.
Download angular-route.js file .
$routeProvider.when defines a url "/#Home" which then is mapped to "Home.html". Home.html should be present in the same path as main html page.
"otherwise" is used to set the default view.
"controller" is used to set the corresponding controller for the view.
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/collapsemenu.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts-common/jquery-2.1.4.js"></script>
<script src="scripts-angular/angular.js"></script>
<script src="scripts-angular/angular-route.js"></script>
<script src="scripts-ctrls/ng-main-ctrl.js"></script>
<script src="scripts-ctrls/ng-menu.js"></script>
<script type="text/javascript">
var flag = 0;
$(document).ready(function () {
$('#containerview').css('height', ($(window).height() - 30) + 'px');
$('#containerview').css('width', ($(window).width() - 170) + 'px');
$('#containernavigation').css('height', ($(window).height() - 30) + 'px');
});
var slidedMenuId = "";
function expand(menuid) {
if (slidedMenuId != menuid) {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideDown(400);
slidedMenuId = menuid;
}
else {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideUp(400);
slidedMenuId = "";
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
"use strict";
$('#containernavigation').perfectScrollbar();
});
</script>
<base href="/" />
</head>
<body>
<div class="header">
<div class="header_left">
</div>
<div class="header_middle">
</div>
<div class="header_right">
<div class="header_userinfo_left">
</div>
<div class="header_userinfo_right">
<div class="notification">
</div>
<div class="userphoto_panel">
</div>
<div class="logout">
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div ng-app="myApp">
<div id="sliderNavigation" style="border: 0px solid #000;">
<div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
<div id="admin_menu" runat="server">
<div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
<a class="setting_tab">Setting</a>
</div>
<div id="setting_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
<div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
<a class="setting_tab">Home</a>
</div>
<div id="home_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
<div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
<a class="setting_tab">About</a>
</div>
<div id="about_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
</div>
</div>
<%--Container Pages--%>
<div style="border: 0px solid #000;" id="containerview" class="page_container font">
<div class="col-lg-12 ">
<div class="pagetittle">
: :
<p ng-bind="pagetitle"></p>
</div>
</div>
<div class="col-lg-12 ">
<div ng-view class="content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
</div>
</body>
</html>
Home.Html :
<div style="margin: auto; width: 50%;">
<h1>
{{home}}</h1>
</div>About.Html:
<div style="margin: auto; width: 50%;">
<h1>
{{about}}</h1>
</div>Contact.Html:
<div style="margin: auto; width: 50%;">
<h1>
{{contact}}</h1>
</div>JavaScript:- menu.js
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.
//settings
when('/Home', {
templateUrl: '../Pages/Home.html',
controller: 'homectrl',
}).
when('/About', {
templateUrl: '../Pages/About.html',
controller: 'aboutctrl',
}).
when('/Contact', {
templateUrl: '../Pages/Contact.html',
controller: 'contactctrl',
}).
otherwise({
redirectTo: '/'
});
});
myApp.controller("homectrl", function ($scope) {
$scope.home = 'WelCome to Home Page';
});
myApp.controller("aboutctrl", function ($scope) {
$scope.about = 'WelCome to AboutUS Page';
});
myApp.controller("contactctrl", function ($scope) {
$scope.contact = 'WelCome to ContactUS Page';
});
DEMO
No comments:
Post a Comment