Angularjs single page website , menu on the top whenever we click on menu item the corresponding data move to top with in the same page, i.e all pages data in the same page jst like jquery mobile website:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('siteApp', []);
app.controller( 'appController', function( $scope ) {
//Main login here
});
app.controller( 'routeController', function( $scope, $routeParams , $timeout ) {
/*
Scroll to element ID
*/
$scope.scrollTo = function(selector){
console.log(selector);
if(jQuery('#' + selector).length == 1){
console.log(jQuery('#' + selector).offset().top);
jQuery('html, body').animate({
scrollTop: jQuery('#' + selector).position().top
});
};
}
if(typeof $routeParams.page !== 'undefined' && $routeParams.page.length > 0){
$timeout(function() { $scope.scrollTo($routeParams.page) }, 1);
}
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home/:page', {
templateUrl: 'home-template.html',
controller: 'routeController'
}).
when('/location/nolita/:page', {
templateUrl: 'templates/location-nolita.html'
})
.when('/location/plaza/:page', {
templateUrl: 'templates/location-plaza.html'
})
.when('/location/third/:page', {
templateUrl: 'templates/location-third.html'
})
.when('/food-drink/:page', {
templateUrl: 'templates/food-drink.html'
}).
when('/delivery-catering/:page', {
templateUrl: 'templates/delivery-catering.html'
}).
otherwise({
redirectTo: '/home/'
});
}]);
app.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () {
return { height: w.height() };
};
scope.$watch(scope.getWindowDimensions, function (dimensions) {
scope.windowHeight = dimensions.height;
scope.style = function () {
return {
'min-height': scope.windowHeight + 'px'
};
};
}, true);
w.bind('resize', function () {
scope.$apply();
});
}
});
</script>
<body ng-app="siteApp" ng-controller="appController">
<div class="wrapper">
<script type="text/ng-template" id="home-template.html">
<ul>
<li><a href="#/home/page-17">Page 17</a></li>
<li><a href="#/home/page-18">Page 18</a></li>
<li><a href="#/home/page-19">Page 19</a></li>
<li><a href="#/home/page-20">Page 20</a></li>
</ul>
<div class="page" id="page-17" >
<div class="page-inner" ng-style="style()" resize>
17
</div>
</div>
<div class="page" id="page-18">
<div class="page-inner" ng-style="style()" resize>
18
</div>
</div>
<div class="page" id="page-19">
<div class="page-inner" ng-style="style()" resize>19</div>
</div>
<div class="page" id="page-20">
<div class="page-inner" ng-style="style()" resize>20</div>
</div>
</script>
<div class="view" ng-view>
</div>
</div>
<style>
.page-inner{
border: 1px solid red;
width:500px; height:500px;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('siteApp', []);
app.controller( 'appController', function( $scope ) {
//Main login here
});
app.controller( 'routeController', function( $scope, $routeParams , $timeout ) {
/*
Scroll to element ID
*/
$scope.scrollTo = function(selector){
console.log(selector);
if(jQuery('#' + selector).length == 1){
console.log(jQuery('#' + selector).offset().top);
jQuery('html, body').animate({
scrollTop: jQuery('#' + selector).position().top
});
};
}
if(typeof $routeParams.page !== 'undefined' && $routeParams.page.length > 0){
$timeout(function() { $scope.scrollTo($routeParams.page) }, 1);
}
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home/:page', {
templateUrl: 'home-template.html',
controller: 'routeController'
}).
when('/location/nolita/:page', {
templateUrl: 'templates/location-nolita.html'
})
.when('/location/plaza/:page', {
templateUrl: 'templates/location-plaza.html'
})
.when('/location/third/:page', {
templateUrl: 'templates/location-third.html'
})
.when('/food-drink/:page', {
templateUrl: 'templates/food-drink.html'
}).
when('/delivery-catering/:page', {
templateUrl: 'templates/delivery-catering.html'
}).
otherwise({
redirectTo: '/home/'
});
}]);
app.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () {
return { height: w.height() };
};
scope.$watch(scope.getWindowDimensions, function (dimensions) {
scope.windowHeight = dimensions.height;
scope.style = function () {
return {
'min-height': scope.windowHeight + 'px'
};
};
}, true);
w.bind('resize', function () {
scope.$apply();
});
}
});
</script>
<body ng-app="siteApp" ng-controller="appController">
<div class="wrapper">
<script type="text/ng-template" id="home-template.html">
<ul>
<li><a href="#/home/page-17">Page 17</a></li>
<li><a href="#/home/page-18">Page 18</a></li>
<li><a href="#/home/page-19">Page 19</a></li>
<li><a href="#/home/page-20">Page 20</a></li>
</ul>
<div class="page" id="page-17" >
<div class="page-inner" ng-style="style()" resize>
17
</div>
</div>
<div class="page" id="page-18">
<div class="page-inner" ng-style="style()" resize>
18
</div>
</div>
<div class="page" id="page-19">
<div class="page-inner" ng-style="style()" resize>19</div>
</div>
<div class="page" id="page-20">
<div class="page-inner" ng-style="style()" resize>20</div>
</div>
</script>
<div class="view" ng-view>
</div>
</div>
<style>
.page-inner{
border: 1px solid red;
width:500px; height:500px;
}
</style>
</body>
</html>
No comments:
Post a Comment