angular.module('grant.app', ['ui.router.grant'])
.config( function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME (anyone can access)
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// HOUSE OF STARK (only Starks can access)
.state('starks', {
url: '/house-of-stark',
templateUrl: 'partial-starks.html',
controller: function($scope, animal) {
$scope.animal = animal;
},
resolve: {
animal: function(grant) {
return grant.only({test: 'stark', state: 'denied'});
}
}
})
// HOUSE OF LANNISTER (only Lannisters can access)
.state('lannister', {
url: '/house-of-lannister',
templateUrl: 'partial-lannister.html',
controller: function($scope, animal) {
$scope.animal = animal;
},
resolve: {
animal: function(grant) {
return grant.only({test: 'lannister', state: 'denied'});
}
}
})
// HOUSE OF TARGARYEN (only Targaryens can access)
.state('targaryen', {
url: '/house-of-targaryen',
templateUrl: 'partial-targaryen.html',
controller: function($scope, animal) {
$scope.animal = animal;
},
resolve: {
animal: function(grant) {
return grant.only({test: 'targaryen', state: 'denied'});
}
}
})
// DENIED (state for failed permissions)
.state('denied', {
url: '/denied',
templateUrl: 'partial-denied.html'
})
})
.run(function(grant, houseService) {
grant.addTest('stark', function() {
return houseService.isStark();
});
grant.addTest('lannister', function() {
return houseService.isLannister();
});
grant.addTest('targaryen', function() {
return houseService.isTargaryen();
});
grant.addTest('got', function() {
return houseService.isGameOfThrones();
});
})
.controller('AppController', function($state, houseService) {
var vm = this;
vm.character = undefined;
vm.selectHouse = _selectHouse;
vm.signout = _signout;
function _selectHouse(house, character) {
houseService.setHouse(house);
vm.character = character;
$state.reload();
}
function _signout() {
vm.character = undefined;
houseService.setHouse(undefined);
$state.reload();
}
})
.factory('houseService', function($http) {
var whichHouse;
return {
setHouse: function(house) {
whichHouse = house;
},
isStark: function() {
return (whichHouse === 'stark') ? 'Dire Wolf' : false;
},
isLannister: function() {
return (whichHouse === 'lannister') ? 'Lion' : false;
},
isTargaryen: function() {
return (whichHouse === 'targaryen') ? 'Dragon' : false;
}
};
})
<!DOCTYPE html>
<html>
<head>
<title>Grant of Thrones</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href="app.css" rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/ryandrewjohnson/ui-router.grant/master/src/grant.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="grant.app" ng-controller="AppController as app">
<nav class="navbar navbar-inverse">
<a class="navbar-brand" ui-sref="home">Grant of Thrones</a>
</nav>
<div class="container">
<div class="row center-block" ng-if="app.character">
<h2 class="text-center">Welcome <span>{{app.character}}</span></h2>
<button class="btn btn-danger center-block" ng-click="app.signout()">Sign Out</button>
</div>
<div class="row" ng-if="!app.character">
<div class="col-xs-4 col-md-4 got-role">
<img src="http://www.alfabetajuega.com/multimedia/imagenes/201408/77357.ned_stark.jpg" class="img-thumbnail">
<label>Ned Stark</label>
<button ng-click="app.selectHouse('stark', 'Ned Stark')" type="button" class="btn btn-primary btn-block">Select</button>
</div>
<div class="col-xs-4 col-md-4 got-role">
<img src="http://www.yareah.com/wp-content/uploads/2015/03/1-1.jpg" class="img-thumbnail">
<label>Jamie Lannister</label>
<button ng-click="app.selectHouse('lannister', 'Jamie Lannister')" type="button" class="btn btn-primary btn-block">Select</button>
</div>
<div class="col-xs-4 col-md-4 got-role">
<img src="http://fantasticfangirls.org/wp-content/uploads/2013/02/dany.png" class="img-thumbnail">
<label>Daenerys Targaryen</label>
<button ng-click="app.selectHouse('targaryen', 'Daenerys Targaryen')" type="button" class="btn btn-primary btn-block">Select</button>
</div>
</div>
</div>
<div class="main-content" ui-view></div>
</body>
</html>
.got-role,
.got-house {
text-align: center;
}
.got-role label,
.got-house label {
font-size: 16px;
display: block;
}
.got-role img,
.got-house img {
width: 100%;
height: 50%;
}
.got-house button {
margin-top: 10px;
}
.main-content {
margin-top: 20px;
}
.jumbotron h2 {
margin-top: 0;
}
<div class="jumbotron text-center">
<h2>Available Houses:</h2>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4 got-house">
<img src="http://fc06.deviantart.net/fs70/i/2012/277/f/d/house_stark_by_montezuma3-d5gr1wa.jpg" class="img-thumbnail">
<button ui-sref="starks" type="button" class="btn btn-primary btn-block btn-success">House Stark</button>
</div>
<div class="col-xs-4 col-md-4 got-house">
<img src="http://fc01.deviantart.net/fs71/i/2012/279/f/9/house_lannister_by_montezuma3-d5gzgcc.jpg" class="img-thumbnail">
<button ui-sref="lannister" type="button" class="btn btn-primary btn-block btn-success">House Lannister</button>
</div>
<div class="col-xs-4 col-md-4 got-house">
<img src="http://fc03.deviantart.net/fs71/i/2012/279/1/9/house_targaryen_by_montezuma3-d5gzbkr.jpg" class="img-thumbnail">
<button ui-sref="targaryen" type="button" class="btn btn-primary btn-block btn-success">House Targaryen</button>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center">
<h2>Welcome to House Stark</h2>
<p>Where winter is always coming!</p>
<p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
<div class="container">
<div class="row">
<img src="http://cdn.hbowatch.com/wp-content/uploads/2011/12/detail-111228.jpg" class="house-img img-thumbnail" />
</div>
</div>
</div>
<div class="jumbotron text-center">
<h2>Welcome to House Lannister</h2>
<p>Where we always pay our debts!</p>
<p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
<div class="container">
<div class="row">
<img src="http://img.pandawhale.com/post-30203-Jaime-Lannister-NICE-gif-Imgur-sl2C.gif" class="house-img img-thumbnail" />
</div>
</div>
</div>
<div class="jumbotron text-center">
<h2>Welcome to House Targaryen</h2>
<p>Where winter is always coming!</p>
<p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
<div class="container">
<div class="row">
<img src="http://www.quickmeme.com/img/17/1710c24a575438c9038087e9deecfe1edb7361483158e8b38123c1a73db9da63.jpg" class="house-img img-thumbnail" />
</div>
</div>
</div>
<div class="jumbotron text-center">
<h2>Access Denied!</h2>
<p>You do not have permission to access this page.</p>
<div class="container">
<div class="row">
<img src="http://media.giphy.com/media/c3LrSypJkaj0A/giphy.gif" class="house-img img-thumbnail" />
</div>
<button ui-sref="home" class="btn btn-danger center-block btn-home">Back to Home</button>
</div>
</div>s