LH :: Maintain session during refresh

This commit is contained in:
Lim Han 2015-02-07 21:33:40 +08:00
parent f0ca57d2a3
commit 5b18fa6621
6 changed files with 117 additions and 9 deletions

View file

@ -5,7 +5,7 @@
<div class="jumbotron-headline-cell">
<h1>Pet care for the People who love them</h1>
<p>PetClinic is here to enhance people's relationships with their pets</p>
<p><a class="btn btn-primary btn-lg" data-scroll-to-target href="#services" role="button">Learn more</a></p>
<p><a class="btn btn-primary btn-lg" data-scroll-to-target href="#contact-us" role="button">Learn more</a></p>
</div>
</div>
</div>

View file

@ -1,16 +1,18 @@
var MainController = ['$scope','$rootScope','$state',function($scope, $rootScope, $state) {
var MainController = ['$scope','$rootScope','$state','$sessionStorage', function($scope, $rootScope, $state, $sessionStorage) {
$scope.$storage = $sessionStorage;
$scope.getSession = function() {
return $scope.session;
return $scope.$storage.session;
};
$scope.login = function() {
$scope.session = { 'username' : 'test' };
$scope.$storage.session = { 'username' : 'test' };
$state.go('dashboard');
};
$scope.logout = function() {
$scope.session = null;
$scope.$storage.session = null;
$state.go('landing');
};
@ -51,7 +53,7 @@ var MainController = ['$scope','$rootScope','$state',function($scope, $rootScop
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
var requireLogin = toState.data.requireLogin;
if (requireLogin && $scope.session == null) {
if (requireLogin && $scope.getSession() == null) {
event.preventDefault();
$state.go('landing');
}

View file

@ -7,7 +7,7 @@
<p>Finding the pets that are currently under our care.</p>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<input type="text" class="form-control input-lg" placeholder=".col-md-8">
<input id="search" type="text" class="form-control input-lg" placeholder="Scooby Doo">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary btn-lg btn-block">Discover</button>
@ -30,7 +30,7 @@
</div>
<div class="row">
<div class="col-md-3" data-ng-repeat="pet in pets">
<div class="col-md-3" data-ng-repeat="pet in pets | filter:search">
<div class="thumbnail">
<a href="#"><img data-ng-src="images/pets/pet{{pet.id % 10 + 1}}.jpg" alt="Generic placeholder image"></a>
<div class="caption">

View file

@ -33,6 +33,7 @@
<script src="js/lib/angular-ui-router-statehelper.js"></script>
<script src="js/lib/angular-animate.js"></script>
<script src="js/lib/angular-cookies.js"></script>
<script src="js/lib/angular-storage.js"></script>
<script src="js/lib/angular-mocks.js"></script>
<script src="services/services.js"></script>

View file

@ -1,4 +1,4 @@
var app = angular.module('spring-petclinic', ['ui.router','ui.router.stateHelper','ngAnimate','ngCookies','ngResource','ngMockE2E']);
var app = angular.module('spring-petclinic', ['ui.router','ui.router.stateHelper','ngAnimate','ngCookies','ngResource','ngMockE2E','ngStorage']);
/** Start of Configurable constants **/

View file

@ -0,0 +1,105 @@
'use strict';
(function() {
/**
* @ngdoc overview
* @name ngStorage
*/
angular.module('ngStorage', []).
/**
* @ngdoc object
* @name ngStorage.$localStorage
* @requires $rootScope
* @requires $window
*/
factory('$localStorage', _storageFactory('localStorage')).
/**
* @ngdoc object
* @name ngStorage.$sessionStorage
* @requires $rootScope
* @requires $window
*/
factory('$sessionStorage', _storageFactory('sessionStorage'));
function _storageFactory(storageType) {
return [
'$rootScope',
'$window',
'$log',
function(
$rootScope,
$window,
$log
){
// #9: Assign a placeholder object if Web Storage is unavailable to prevent breaking the entire AngularJS app
var webStorage = $window[storageType] || ($log.warn('This browser does not support Web Storage!'), {}),
$storage = {
$default: function(items) {
for (var k in items) {
angular.isDefined($storage[k]) || ($storage[k] = items[k]);
}
return $storage;
},
$reset: function(items) {
for (var k in $storage) {
'$' === k[0] || delete $storage[k];
}
return $storage.$default(items);
}
},
_last$storage,
_debounce;
for (var i = 0, k; i < webStorage.length; i++) {
// #8, #10: `webStorage.key(i)` may be an empty string (or throw an exception in IE9 if `webStorage` is empty)
(k = webStorage.key(i)) && 'ngStorage-' === k.slice(0, 10) && ($storage[k.slice(10)] = angular.fromJson(webStorage.getItem(k)));
}
_last$storage = angular.copy($storage);
$rootScope.$watch(function() {
_debounce || (_debounce = setTimeout(function() {
_debounce = null;
if (!angular.equals($storage, _last$storage)) {
angular.forEach($storage, function(v, k) {
angular.isDefined(v) && '$' !== k[0] && webStorage.setItem('ngStorage-' + k, angular.toJson(v));
delete _last$storage[k];
});
for (var k in _last$storage) {
webStorage.removeItem('ngStorage-' + k);
}
_last$storage = angular.copy($storage);
}
}, 100));
});
// #6: Use `$window.addEventListener` instead of `angular.element` to avoid the jQuery-specific `event.originalEvent`
'localStorage' === storageType && $window.addEventListener && $window.addEventListener('storage', function(event) {
if ('ngStorage-' === event.key.slice(0, 10)) {
event.newValue ? $storage[event.key.slice(10)] = angular.fromJson(event.newValue) : delete $storage[event.key.slice(10)];
_last$storage = angular.copy($storage);
$rootScope.$apply();
}
});
return $storage;
}
];
}
})();