Base Angular + UI Bootstrap

AngularJS: core, animations UI Bootstrap: Bootstrap 3.2.x CSS

by Jason Aden

HTML

<script src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div class="container" ng-app>
<h2>Pet Day Care</h2>
<span class="text-muted lead">Managing Events through Inheritance</span>

<div ng-controller="DogListCtrl">
    <h3>Dogs</h3>
    <table class="table">
        <tr>
            <th>Breed</th>
            <th>Name</th>
            <th></th>
        </tr>
        <tr ng-repeat="pet in pets | orderBy:sorter.sortField">
            <td>{{pet.breed}}</td>
            <td>{{pet.name}}</td>
            <td><a href="" ng-click="walk(pet)">walk</a>
            </td>
        </tr>
    </table>
    <ul class="list-unstyled">
        <li ng-repeat="log in logs track by $index">{{log}}</li>
    </ul>
</div>
</div>

JavaScript

var app = angular.module('myApp', []);

// Service that walks a dog.
app.service('dogwalk', function () {
    return function(name) {
        var now = new Date();
        return "Walking " + name + ' at ' +
            now.getHours() + ":" + now.getMinutes() + ':' +
            now.getSeconds()
    };
});

// Basic pet object with name and pet breed.
function Pet(name, breed) {
    this.name = name;
    this.breed = breed;
}

// List of Dogs. Supports walking.
function DogListCtrl($scope, dogwalk) {
    $scope.logs = [];

    // Create some dogs, including their type.
    $scope.pets = [
      new Pet('Pinky', 'Poodle'),
      new Pet('Apples', 'Poodle'),
      new Pet('Killer', 'German Shepard')
    ];

    // Walk the dog with the dogwalk service.
    $scope.walk = function (pet) {
        this.logs.push(dogwalk(pet.name))
    }
}