Skip to content

Instantly share code, notes, and snippets.

@pjsvis

pjsvis/app.js

Created May 16, 2012 21:43
Show Gist options
  • Save pjsvis/2714192 to your computer and use it in GitHub Desktop.
Save pjsvis/2714192 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Example
Raw
app.js
// This is a module for cloud persistance in mongolab - https://mongolab.com
angular.module('mongolab', ['ngResource']).
factory('Project', function($resource) {
var Project = $resource('https://api.mongolab.com/api/1/databases' + '/cars/collections/projects/:id', {
apiKey: '4f99a253e4b015f77d298ab8'
}, {
update: {
method: 'PUT'
}
});
Project.prototype.update = function(cb) {
return Project.update({
id: this._id.$oid
}, angular.extend({}, this, {
_id: undefined
}), cb);
};
Project.prototype.destroy = function(cb) {
return Project.remove({
id: this._id.$oid
}, cb);
};
return Project;
});
var carApp = angular.module('carApp', ['mongolab']);
carApp.controller('CarCtrl', function($scope) {
$scope.title = 'Car Hire';
$scope.cars = [{
oid: 1,
make: "Honda",
model: "Civic",
color: "Black",
shade: "Dark",
hired: ""
}, {
oid: 2,
make: "Saab",
model: "Viggen",
color: "White",
shade: "Light",
hired: ""
}, {
oid: 3,
make: "Volvo",
model: "Estate",
color: "Red",
shade: "Dark",
hired: ""
}, {
oid: 4,
make: "Ford",
model: "Bronco",
color: "Black",
shade: "Dark",
hired: ""
}, {
oid: 5,
make: "Daihatsu",
model: "Charade",
color: "Yellow",
shade: "Light",
hired: ""
}];
$scope.colors = [{
name: 'Black',
shade: 'Dark'
}, {
name: 'White',
shade: 'Light'
}, {
name: 'Red',
shade: 'Dark'
}, {
name: 'Blue',
shade: 'Dark'
}, {
name: 'Yellow',
shade: 'Light'
}];
$scope.currentCar = _.first($scope.cars);
$scope.setCurrentCar = function(car) {
$scope.currentCar = car;
};
$scope.saveCar = function(car) {
if (car.id === null) {
$scope.cars.push(car);
} else {
$scope.cars[car.id] = car;
}
};
});
Raw
index.html
<!doctype html>
<html ng-app="carApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://sugarjs.com/release/1.2.3/minified/sugar-1.2.3.min.js"></script>
<script src="app.js"></script>
</head9
<body>
<div class="container" ng-controller="CarCtrl">
<h2>{{title}}</h2>
<input type="text" ng-model="filterCars" placeholder="Search"
class="input-medium search-query">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>
<a href="#" ng-click="setCurrentCar(null)"><i class="icon-plus-sign">&nbsp;&nbsp;</i></a>
</th>
<th>Make</th>
<th>Model</th>
<th>Hired</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars | filter:filterCars">
<td>
<a href="#" ng-click="setCurrentCar(car)"><i class="icon-pencil">&nbsp;&nbsp;</i></a>
</td>
<td>{{car.make}}</td>
<td>{{car.model}}</td>
<td>{{car.hired}}</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<div class="row">
<form class="form-vertical well span3">
<fieldset>
<legend>Car Hire Details</legend>
<div class="control-group">
<label>oid</label>
<input type="text" ng-model="currentCar.oid" placeholder="oid">
<label>Make</label>
<input type="text" ng-model="currentCar.make" placeholder="Make">
<label>Model</label>
<input type="text" ng-model="currentCar.model" placeholder="Model">
<label>Color</label>
<select ng-model="currentCar.color" ng-options="c.name for c in colors"
placeholder="Color"></select>
<label>Shade</label>
<select ng-model="currentCar.shade" ng-options="c.shade for c in colors"
placeholder="Shade"></select>
<label>Hired</label>
<input type="text" ng-date ng-model="currentCar.hired" placeholder="Hired">
<div>
<br>
<button ng-click="saveCar(currentCar)" class="btn btn-success">Save</button>
<button type="cancel" class="btn btn-default">Cancel</button>
</div>
</div>
</fieldset>
</form>
<div class="well span3">
<legend>Issues</legend>
<ol>
<li>How do we update/cancel an edit on an existing car?</li>
<li>How do we add a new car?</li>
<li>How do we set the shade based on the color and vice versa?</li>
<li>What about dates?</li>
</ol>
</div>
<div class="well span5">
<legend>Debug</legend>
<br><pre>cars: {{cars | json}}</pre>
<br>currentCar: <pre>{{currentCar | json}}</pre></div>
</div>
</body>
</html>
Raw
style.css
/* Put your css in here */
.container {
width:90%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment