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");
  }
}