AngularJS Couch DB telabase prototype

AngularJS Couch DB telabase prototype

HTML

<div ng-app="project">
  
  <div ng-view ></div>

  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
  <div class="container-fluid">
    <h2>telabase helpdesk tickets</h2>
    <div class="row-fluid">
      <div class="span3">
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <table>
      <thead>
      <tr>
        <th>Project</th>
        <th>Description</th>
        <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="project in projects.rows | filter:search | orderBy:'doc.name'">
        <td><a href="{{project.doc.site}}" target="_blank">{{project.doc.name}}</a></td>
        <td>{{project.doc.description}}</td>
        <td>
          <a href="#/edit/{{project.doc._id}}"><i class="icon-pencil"></i></a>
        </td>
      </tr>
      </tbody>
    </table>
        </div>
      <div class="span8">
        <pre>{{projects|json}}</pre>
        
        </div>
    </div>
          
  </script>



  <!-- CACHE FILE: detail.html -->
  <script type="text/ng-template" id="detail.html">
    <form name="myForm">
      <div class="control-group" ng-class="{error: myForm.name.$invalid}">
        <label>Name</label>
        <input type="text" name="name" ng-model="project.name" required>
        <span ng-show="myForm.name.$error.required" class="help-inline">
            Required</span>
      </div>
    
      <div class="control-group" ng-class="{error: myForm.site.$invalid}">
        <label>Website</label>
        <input type="url" name="site" ng-model="project.site" required>
        <span ng-show="myForm.site.$error.required" class="help-inline">
            Required</span>
        <span ng-show="myForm.site.$error.url" class="help-inline">
            Not a URL</span>
      </div>
    
      <label>Description</label>
      <textarea name="description" ng-model="project.description"></textarea>
    
      <br>
      <a href="#/"...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<style>

JavaScript

// before using, install CouchDB 1.3 on localhost, enable CORS, create a database named "projects"

angular.module('project', ['CouchDB']).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller:ListCtrl, templateUrl:'list.html'}).
      when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
      when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
      otherwise({redirectTo:'/'});
  });

function ListCtrl($scope, ProjectCouch) {
    $scope.projects = ProjectCouch.get({q:'_all_docs', include_docs: 'true', limit: 10});
}

function CreateCtrl($scope, $location, ProjectCouch) {
  $scope.save = function() {
    ProjectCouch.save($scope.project, function(project) {
      $location.path('/edit/' + project.id);
    });
  }
}

function EditCtrl($scope, $location, $routeParams, ProjectCouch) {
  var self = this;

  ProjectCouch.get({q: $routeParams.projectId}, function(project) {
    self.original = project;
    $scope.project = new ProjectCouch(self.original);
  });

  $scope.isClean = function() {
    return angular.equals(self.original, $scope.project);
  }

  $scope.destroy = function() {
    self.original.destroy(function() {
      $location.path('/');
    });
  };

  $scope.save = function() {
    $scope.project.update(function() {
      $location.path('/');
    });
  };
}

angular.module('CouchDB', ['ngResource']).
    factory('ProjectCouch', function($resource) {
        var ProjectCouch = $resource(':protocol//:server/:db/:q/:r/:s/:t',
                                     {protocol: 'http:', server: 'localhost:5984', db: 'projects'}, {update: {method:'PUT'}   
                               }
       ); 

       ProjectCouch.prototype.update = function(cb) {
        return ProjectCouch.update({q: this._id},
            this, cb);
      };

      ProjectCouch.prototype.destroy = function(cb) {
          return ProjectCouch.remove({q: this._id, rev: this._rev}, cb);
      };

      return...