Angular.js
/
-- index.html
/js
== controllers
-- MainController.js
== vendor
-- angular.min.js
-- app.js
/css
app.js
var app = angular.module("PizzaPlanerApp", []);
MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
}
];
}]);
index.html
<body ng-app="PizzaPlanetApp">
<div class="header">
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div ng-repeat="appetizer in appetizers" class="appetizers row">
<div class="item col-md-9">
<h3 class="name">{{ appetizer.name }} </h3>
<p class="description">{{ appetizer.description }} </p>
</div>
<div class="price col-md-3">
<p class="price">{{ appetizer.price | currency }} </p>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="row" ng-repeat="exercise in exercises">
<div class="exercise-icon col-xs-2"><img src="{{ exercise.icon }}"> </div>
<div class="col-xs-6">
<p class="exercise-name"> {{ exercise.name }}</p>
</div>
<div class="col-xs-4 counters">
<span ng-click="decrease($index)" class="decrease">-</span>
<span class="count"> {{ exercise.count }} </span>
<span ng-click="increase($index)" class="increase">+</span>
</div>
</div>
</div>
</div>