import {MainCtrl} from "MainCtrl";
import {Security} from "security";
var app = angular.module('plunker', [])
.controller('MainCtrl', MainCtrl)
.service('security', Security);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
traceur.options.experimental = true;
</script>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
</head>
<body ng-controller="MainCtrl as mc">
<div class="panel panel-primary">
<div class="panel-heading">Hello {{mc.name}}!</div>
<div class="panel-body" ng-show="mc.canDeleteUsers()">Yay! I can delete Users</div>
</div>
<script>
System.import("app").then(function(a) {
angular.element(document).ready(function() {
angular.bootstrap(document, ['plunker']);
});
});
</script>
</body>
</html>
/* Put your css in here */
body {
padding: 10px;
}
export class Security {
constructor() {
this._permissions = ['deleteUsers'];
}
get username() {
return "Don Joe";
}
isAdmin() {
return true;
}
checkAccess(permission) {
return this._permissions.find(perm => perm === permission);
}
}
export class MainCtrl {
constructor(security) {
this._security = security;
}
get name() {
return this._security.username;
}
canDeleteUsers() {
return this._security.checkAccess("deleteUsers");
}
}