-
-
Save djom202/f1b12d92fcaed8fb9799a1890e69118c to your computer and use it in GitHub Desktop.
Files for AngularJS blog post.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*--------------------- | |
| :: Food | |
| -> model | |
| ---------------------*/ | |
| module.exports = { | |
| attributes : { | |
| name: 'STRING', | |
| type: 'STRING', | |
| expiration: 'DATE', | |
| quantity: 'STRING', | |
| percentRemaining: 'INTEGER' | |
| } | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 id="header"> | |
| Food Inventory | |
| </h1> | |
| <div id="content" ng-controller="FoodController"> | |
| <table> | |
| <thead> | |
| <tr class="row"> | |
| <th>Name</th> | |
| <th>Type</th> | |
| <th>Expiration</th> | |
| <th>Quantity</th> | |
| <th>Percent Remaining</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="row" ng-repeat="f in food"> | |
| <td>{{f.name}}</td> | |
| <td>{{f.type}}</td> | |
| <td>{{f.expiration}}</td> | |
| <td>{{f.quantity}}</td> | |
| <td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <button ng-click="toggleForm()" ng-hide="isFormActive">Add One</button> | |
| <button ng-click="toggleForm()" ng-show="isFormActive">Hide Form</button> | |
| <form ng-show="isFormActive"> | |
| <hr /> | |
| <label for="name">Name:</label> | |
| <input name="name" ng-model="editableFood.name" /> | |
| <br /> | |
| <label for="type">Type:</label> | |
| <input name="type" ng-model="editableFood.type" /> | |
| <br /> | |
| <label for="expiration">Expiration</label> | |
| <input name="expiration" ng-model="editableFood.expiration" /> | |
| <br /> | |
| <label for="quantity">Quantity</label> | |
| <input name="quantity" ng-model="editableFood.quantity" /> | |
| <br /> | |
| <label for="percentRemaining">Percent Remaining</label> | |
| <input name="percentRemaining" ng-model="editableFood.percentRemaining" /><br /> | |
| <div class="span4 text-right"> | |
| <div class="row"> | |
| <button ng-click="toggleForm()">Cancel</button> | |
| <button ng-click="addFood()">Add</button> | |
| </div> | |
| </div> | |
| </form> | |
| </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> | |
| <script type='text/javascript'> | |
| var foodApp = angular.module('foodApp', ['ngResource']); | |
| foodApp.factory('Food', ['$resource', function($resource){ | |
| return $resource('/food/:id', {id:'@id'}); | |
| }]); | |
| function FoodController($scope, Food){ | |
| $scope.food = Food.query(); | |
| $scope.isFormActive = false; | |
| $scope.toggleForm = function(){ | |
| if ($scope.isFormActive){ | |
| $scope.isFormActive = false; | |
| return; | |
| } | |
| $scope.isFormActive = true; | |
| $scope.editableFood = new Food(); | |
| }; | |
| $scope.addFood = function(){ | |
| $scope.editableFood.$save(); | |
| $scope.food.push($scope.editableFood); | |
| $scope.toggleForm(); | |
| }; | |
| }; | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="foodApp"> | |
| <head> | |
| <title><%- title %></title> | |
| <!-- Viewport mobile tag for sensible mobile support --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script> | |
| <!-- JavaScript and stylesheets from your assets folder are included here --> | |
| <%- assets.css() %> | |
| <%- assets.js() %> | |
| </head> | |
| <body> | |
| <%- body %> | |
| <!-- Templates from your view path are included here --> | |
| <%- assets.templateLibrary() %> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment