<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="https://cdn.rawgit.com/tushariscoolster/ngPermission/master/dist/ngPermission.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router","ngPermission"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
resolve: {
authorization: ["ngPermissionService", function (ngPermissionService) {
return ngPermissionService.role(["admin"])
}]
}
})
}).run(['$rootScope', '$timeout', function ($rootScope, $timeout) {
$rootScope.$on('ngPermission', function (event, roles, defer) {
//alert("inn")
console.log(roles)
$timeout(function () {
defer.resolve();
}, 3000)
// do what you want to do
});
}])
</script>
</body>
</html>
<h1>Route 1</h1>
<hr/>
Resolved resolved delay
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>