AngularJS Simple Template Example

AngularJS Simple Template Example

by Sean Wessell

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-sanitize.min.js"></script>
<script type="text/ng-template" id="embedded.home.html">
  <h1> Welcome - {{co.name}} ({{co.co}}) </h1>
  <p ng-bind-html="renderHtml(co.contents)"></p>
</script>
<script type="text/ng-template" id="embedded.demo.html">
  <h1> Demographics - {{co.name}} ({{co.co}}) </h1>
</script>
<script type="text/ng-template" id="embedded.demo.html">
  <h1> Demographics - {{co.name}} ({{co.co}}) </h1>
  <form name="form" class="form-horizontal" role="form" novalidate>

    <div class="form-group">
      <label class="col-sm-3 col-sm-offset-1 control-label">Name</label>
      <div class="col-sm-6">
        <div class="input-group">
          <span class="input-group-addon input-group-addon_width"></span>
          <input ng-model="ee.name" type="text" class="form-control" disabled>
        </div>
      </div>
    </div>

    <div class="form-group" ng-class="{ 'has-error' : editAllowed && form.address1.$invalid }">
      <label class="col-sm-3 col-sm-offset-1 control-label" for="address1">Address 1 <em class="redAst">*</em></label>
      <div class="col-sm-6">
        <div class="input-group">
          <span class="input-group-addon input-group-addon_width"></span>
          <input ng-model="ee.address1" ng-disabled="!editAllowed" name="address1" id="address1" type="text" class="form-control" placeholder="ex: 1 Main Street" maxlength="50" autofocus ng-required="editAllowed">
        </div>
        <small ng-show="editAllowed && form.address1.$error.required" class="help-block">Address is required. </small>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 col-sm-offset-1 control-label" for="address2">Address 2</label>
      <div class="col-sm-6">
        <div...

CSS

table {
  width: 100%;
}

JavaScript

var scope = {
  co: {
    "co": "TECH",
    "name": "Technical Dept",
    "dba": "",
    "contents": "<style>\r\n    .border {\r\n        border: 2px solid #bfbfbf;\r\n        background: #bfbfbf;\r\n        border-radius: 2px;\r\n        height: 10px;\r\n        margin-bottom: 8px;\r\n        box-shadow: 5px 5px 5px #888888;\r\n        width: auto;\r\n    }\r\n\r\n    ul {\r\n        list-style-type: none;\r\n        padding: 0;\r\n        margin: 0;\r\n    }\r\n\r\n    .homeHead {\r\n        font-size: 1.5em;\r\n        font-weight: bold;\r\n    }\r\n</style>\r\n\r\n<section class=\"row\">\r\n    <article class=\"col-sm-12 col-md-5 col-md-offset-1\">\r\n        <div class=\"row\">\r\n            <div class=\"col-sm-12\">\r\n                <div class=\"homeHead\">Messages</div>\r\n                <div class=\"border\"></div>\r\n                Please take a moment to go into the <a href=\"https://www.employeeforward.com/account\">Account area</a> and enter your cell phone # as an alternate method of obtaining your EmployeeForward.com security code <br/>\r\n                <a href=\"/payhist\">Click Here to view your most recent Pay Stub</a>\r\n            </div>\r\n\r\n        </div>\r\n        <br />\r\n    </article>\r\n    <article class=\"col-sm-12 col-md-4 col-md-offset-1\">\r\n        <div class=\"homeHead\">Quick Links</div>\r\n        <div class=\"border\"></div>\r\n        <a href=\"/payhist\">View Last Paycheck</a><br/>\r\n        <a href=\"/taxes\">Taxes & W2s</a><br/>\r\n        <a href=\"http://www.harperspayroll.com/Employee_HandBook.doc\" target=\"_blank\">Employee Handbook</a><br/>\r\n        <a href=\"https://secure.entertimeonline.com/ta/hpsales.clock?rnd=FML\" target=\"_blank\">Time & Attendance</a><br/><br/>\r\n        <a href=\"https://hps.gethired.com/\" target=\"_blank\">Manage Onboarding</a><br/>\r\n        <a href=\"https://hps.gethired.com/\" target=\"_blank\">Open Positions</a><br/>\r\n        <a...