A simple demo of SneakerJS

<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/5.3.1/pouchdb.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
    <script src="https://rawgithub.com/andyhasit/SneakerJS/master/dist/sneakerjs.js"></script>
    <script src="script.js"></script>
    
  </head>

  <body ng-app="app">
    <h1>SneakerJS demo</h1>
    <p>
      This app stores data in a PouchDB database in your browser named 'sneakerjs_demo_plunkr_1' <br/>
      You could equally connect to a CouchDB instance, or replicate from your PouchDB to a CouchDB.<br/>
      <br/>
      Try creating some people, and giving them things.<br/>
      Note that when you delete a person, it deletes their things too.<br/>
      Have a look at the index.html and script.js files to see how little code it takes to do this.<br/>
      Then go to <a href="https://github.com/andyhasit/SneakerJS">github</a> to see what else SneakerJS can do (this is meant to be a bare minimal example)
    </p> 
    <div class="container" ng-controller="Ctrl">
      <input ng-model="newPersonName" placeholder="person name">
      <button ng-click="db.newPerson({name: newPersonName})">Add person</button>
      <h3>People:</h3>
      <div ng-repeat="person in db.allPeople()">
        
        <div class="person-things">
          <div class="person">
            {{person.name}}
            <button ng-click="db.deleteItem(person)">x</button>
          </div>
          {{person.name}}'s things:
          <div ng-repeat="thing in db.getPersonThings(person)">
            
            <button ng-click="db.deleteItem(thing)">X</button>{{thing.name}}
          </div>
          <input ng-model="newThingName">
        <button ng-click="db.newThing({name: newThingName, person: person})">Add thing</button>
        </div>
        
      </div>
    </div>
    
  </body>

</html>


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

app.service('db', function(SneakerModel, $rootScope) {
  var backend = new PouchDB('sneakerjs_demo_plunkr_1');
  SneakerModel.call(this, backend);
  var db = this;
  db.collection('person', ['name'], {plural: 'people'});
  db.collection('thing', ['name']);
  db.oneToMany('person', 'thing');
  $rootScope.db = db;
});

app.controller('Ctrl', function(db, $scope){
  db.dataReady().then(function(){
    //You can do stuff here knowing the data is ready.
    $scope.$digest();
  });
  
});

/* Styles go here */
button {
  margin-right: 5px;
}

.person {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.person-things {
  margin: 10px;
  border: 1px solid grey;
  padding: 10px;
  border-radius:7px;
}

SneakerJS demo

See: https://github.com/andyhasit/SneakerJS