Skip to content

Instantly share code, notes, and snippets.

@underhilllabs

underhilllabs/app.js

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save underhilllabs/ea2fd9e516cf71d85d3b to your computer and use it in GitHub Desktop.
Save underhilllabs/ea2fd9e516cf71d85d3b to your computer and use it in GitHub Desktop.
Download ZIP
Angular.js notes
Raw
app.js
(function() {
var app = angular.module('store', [ ] );
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
this.review.createOn = Date.now();
product.reviews.push(this.review);
this.review = {};
};
});
app.controller('StoreController', function() {
this.products = gems;
});
app.controller('PanelController', function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
}
});
var gems = [
{
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
canPurchase: true,
soldOut: false,
},
{
name: 'Pentagonal Gem',
price: 5.95,
canPurchase: false,
soldOut: false,
reviews: [
{
stars: 4,
body: 'I love this Geeeeeem!',
author: 'joe@montegna.com'
},
{
stars: 1,
body: 'Worst gem evar!',
author: 'me@robotsdungeon.com',
}
],
}
]
})();
Raw
index.html
<!DOCTYPE HTML>
<html ng-app="store">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<div ng-controller="StoreController as store">
<div class="item" ng-repeat="product in store.products">
<div class="item" ng-hide="product.soldOut">
<h1> {{product.name}} </h1>
<h2 class="pull-right"> {{product.price | currency}} </h2>
<p> {{product.description}} </p>
<button ng-show="product.canPurchase"> Add to Cart </button>
<section ng-controller="PanelController as
panel">
current tab is {{panel.tab}}
<ul class="nav nav-pills">
<li ng-class="{ active:isSelected(1)}">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{ active:isSelected(2)}">
<a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{ active:isSelected(3)}">
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Specification</h4>
<p>None yet</p>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>Reviews</h4>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}} {{review.createOn | date }}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote ng-repeat="review in reviewCtrl.product.reviews">
<b>Stars: {{reviewCtrl.review.stars}}</b>
{{reviewCtrl.review.body}}
<cite>by: {{reviewCtrl.review.author}} </cite>
</blockquote>
<!-- Review Form -->
<h4>Submit a Review</h4>
<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required>
<option value="">Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Write a short review of the product..." title="Review"></textarea>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" required />
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" value="Submit Review" />
</fieldset>
</form>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment