app.js

## app.js
    var foodApp = angular.module('foodApp', ['ngResource']);

    foodApp.factory('Food', ['$resource', function($resource){
        return $resource('/food/:id', {id:'@id'}, { update: {method:'PUT' } } );
    }]);

    foodApp.config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/food', {templateUrl: '/templates/list.html', controller: FoodController})
        .when('/food/edit/:id', {templateUrl: '/templates/edit.html', controller: FoodController})
        .when('/food/create', {templateUrl: '/templates/edit.html', controller: FoodController})
        .when('/food/:id', {templateUrl: '/templates/detail.html', controller: FoodController})
        .otherwise({redirectTo: '/food'});
    }]);

## controllers.js
    function FoodController($scope, $routeParams, $location, Food){
       $scope.sort = "name";
       $scope.reverse = false;

       if($routeParams.id){
         $scope.currentFood = Food.get({id: $routeParams.id});
       } else {
        $scope.currentFood = new Food();
        $scope.food = Food.query();
       }

      $scope.changeSort = function(value){
          if ($scope.sort == value){
            $scope.reverse = !$scope.reverse;
            return;
          }

          $scope.sort = value;
          $scope.reverse = false;
      }

      $scope.addFood = function(){
            if ($scope.currentFood.id && $scope.currentFood.id != 0){
              Food.get({id: $scope.currentFood.id}, function(food){
                  food.type = $scope.currentFood.type;
                  food.name = $scope.currentFood.name;
                  food.percentRemaining = $scope.currentFood.percentRemaining;
                  food.quantity = $scope.currentFood.quantity;

                  food.$update({}, function(){
                    $location.path( "/" );
                  });
              });
            } else {
              $scope.currentFood.$save();
              $location.path( "/" );
            }
      };
    };

## detail.html
<a href="#/food/">Back</a> |
<a href="#/food/edit/{{currentFood.id}}">Edit</a>

  <h2>{{currentFood.name}}</h2>
  <div class="row">
    <div class="span3">{{currentFood.type}}</div>
    <div class="span3">{{currentFood.expiration}}</div>
    <div class="span3">{{currentFood.quantity}}</div>
  </div>
  <div class="row">
    <div class="span12 progress">
      <div class="bar" style="width: {{currentFood.percentRemaining}}%"></div>
    </div>
  </div>

## edit.html
  <form>
      <label for="name">Name:</label>
      <input name="name" ng-model="currentFood.name" />
      <br />

      <label for="type">Type:</label>
      <input name="type" ng-model="currentFood.type" />
      <br />

      <label for="expiration">Expiration</label>
      <input name="expiration" ng-model="currentFood.expiration" />
      <br />

      <label for="quantity">Quantity</label>
      <input name="quantity" ng-model="currentFood.quantity" />
      <br />

      <label for="percentRemaining">Percent Remaining</label>
      <input name="percentRemaining" ng-model="currentFood.percentRemaining" /><br />

        <div class="span4 text-right">
          <div class="row">
            <a href='#/food' class="btn">Cancel</a>
            <button ng-click="addFood()" class='btn btn-primary'>Add</button>
          </div>
        </div>
  </form>

## index.ejs
<h1 id="header">
   Food Inventory
</h1>
<div ng-view></div>

<div id="footer">
    <a target="_blank" href="http://sailsjs.com" class="copyright">Built with Sails.js</a>
</div>

<style type="text/css">
  label { width: 150px; display:inline-block; text-align:right; }
  button { margin-right: 10px;}
  .text-right { text-align: right;}
</style>

## list.html
    <div class="filter">
      <label for="filter">filter:</label>
      <input type="text" name="filter" ng-model="filter" />
    </div>
    <table>
      <thead>
        <tr class="row">
          <th><a ng-click="changeSort('name')">Name</a></th>
          <th><a ng-click="changeSort('type')">Type</a></th>
          <th><a ng-click="changeSort('expiration')">Expiration</a></th>
          <th><a ng-click="changeSort('quantity')">Quantity</a></th>
          <th><a ng-click="changeSort('percentRemaining')">Percent Remaining</a></th>
        </tr>
      </thead>
      <tbody>
        <tr class="row" ng-repeat="f in food | filter:filter | orderBy:sort:reverse">
            <td><a href="#/food/{{f.id}}">{{f.name}}</a></td>
            <td>{{f.type}}</td>
            <td>{{f.expiration}}</td>
            <td>{{f.quantity}}</td>
            <td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"></div></td>
        </tr>
      </tbody>
    </table>
   <br /> <a href='/#food/create'>Create</a></br /><br />