AngularJS Simple Template Example

AngularJS Simple Template Example

by Sean Wessell

HTML

<script type="text/ng-template" id="embedded.home.html">
  <h1> Home </h1> {{ee.lastname}}
</script>
<script type="text/ng-template" id="embedded.about.html">
  <h1> About </h1> {{content}}
</script>
<div>
  <div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>

  <div ng-view></div>
</div>

JavaScript

var scope = {
  co: {
    "co": "TECH",
    "name": "Technical Dept",
    "dba": ""
  }
  ee: {
    "lastname": "Wessell",
    "firstname": "Sean",
    "address1": "150 Prescott Street",
    "address2": "",
    "city": "Worcester",
    "state": "MA",
    "zip": "01605",
    "status": "A",
    "birthdate": "12/25/1982",
    "hiredate": "01/28/2008",
    "accruals": [{
      "co": "DEMO",
      "id": "  1477",
      "bcode": "P40",
      "startDate": "2010-03-04T00:00:00",
      "endDate": "2100-12-31T00:00:00",
      "lastAccrueDate": "2014-10-30T00:00:00",
      "usedHours": 225.000000,
      "availableHours": 22.174875,
      "printOnStub": "H",
      "checkStubDesc": "Personal"
    }, {
      "co": "DEMO",
      "id": "  1477",
      "bcode": "V40",
      "startDate": "2001-10-08T00:00:00",
      "endDate": "2100-12-31T00:00:00",
      "lastAccrueDate": "2014-10-30T00:00:00",
      "usedHours": 720.000000,
      "availableHours": 26.713725,
      "printOnStub": "H",
      "checkStubDesc": "Vacation"
    }],
    "deductions": [{
      "dcode": "APre",
      "startDate": "2010-03-04T00:00:00",
      "endDate": "2100-12-31T00:00:00",
      "lastDate": "2014-08-28T00:00:00",
      "calcCode": "Flat",
      "rate": 7.250000,
      "frequency": "",
      "goal": "1.00",
      "paidTowardsGoal": "0.00",
      "description": "Accident Insurance (Pre)"
    }, {
      "dcode": "CPost",
      "startDate": "2012-11-08T00:00:00",
      "endDate": "2100-12-31T00:00:00",
      "lastDate": "2014-08-28T00:00:00",
      "calcCode": "Flat",
      "rate": 9.780000,
      "frequency": "",
      "goal": "0.00",
      "paidTowardsGoal": "0.00",
      "description": "Cancer Insurance (Post)"
    }, {
      "dcode": "H",
      "startDate": "2010-03-04T00:00:00",
      "endDate": "2100-12-31T00:00:00",
      "lastDate": "2014-08-28T00:00:00",
      "calcCode": "Flat",
      "rate": 117.690000,
      "frequency": "",
      "goal": 0.00,
      "paidTowardsGoal": 0.00,
      "description":...