Permalink
Find file
55d0db2 Oct 31, 2014
128 lines (113 sloc) 6.18 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="content/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
<script src="content/sushi-angular.js"></script>
</head>
<body kendo-mobile-application k-hash-bang="true" ng-app="sushiMobileApp">
<kendo-mobile-layout k-id="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
<kendo-mobile-button class="about-button" k-align="'right'" href="content/about-angular.html">About</kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<kendo-mobile-footer>
<kendo-mobile-tab-strip>
<a href="#!/" data-icon="home">Home</a>
<a href="#!menu" data-icon="organize">Our menu</a>
<a href="#!cart" data-icon="cart">Cart</a>
<a href="#!account" data-icon="contacts">Account</a>
</kendo-mobile-tab-strip>
</kendo-mobile-footer>
</kendo-mobile-layout>
<kendo-mobile-view id="index" k-title="'Kendo sushi'" k-layout="'default'" k-on-before-show="filterFeatured()" ng-controller="indexController">
<kendo-mobile-list-view id="featured" class="item-list" k-template="templates.menuTemplate" k-data-source="sushiCart.productsDataSource">
</kendo-mobile-list-view>
</kendo-mobile-view>
<kendo-mobile-view id="menu" k-title="'Menu'" k-layout="'default'" k-on-before-show="groupByCategory()" ng-controller="menuController">
<kendo-mobile-list-view id="menuList" class="item-list" k-template="templates.menuTemplate" k-data-source="sushiCart.productsDataSource">
</kendo-mobile-list-view>
</kendo-mobile-view>
<kendo-mobile-view id="cart" k-title="'Cart'" k-layout="'default'" ng-controller="cartController">
<h2 id="total">{{sushiCart.showTotal()}}</h2>
<img src="content/images/sad.png" id="empty-icon">
<kendo-mobile-button id="checkout" class="red-button" href="#!done" k-on-click="sushiCart.checkout()" ng-show="sushiCart.added.length">Checkout</kendo-mobile-button>
<div kendo-mobile-list-view="cartList" id="cartList" class="item-list" k-template="templates.cartItemTemplate" k-data-source="sushiCart.added"></div>
</kendo-mobile-view>
<kendo-mobile-view id="account" k-title="'My Account'" k-layout="'default'">
<kendo-mobile-list-view k-type="'group'">
<li>
Account
<ul>
<li>Username<span class="list-item-data">kendoSushi</span></li>
<li>Email<span class="list-item-data">sushi@kendoui.com</span></li>
</ul>
</li>
<li>
Notifications
<ul>
<li>New products<input type="checkbox" kendo-mobile-switch /></li>
<li>Exclusive promos<input type="checkbox" k-checked="true" kendo-mobile-switch /></li>
</ul>
</li>
</kendo-mobile-list-view>
</kendo-mobile-view>
<kendo-mobile-view id="done">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title>Done!</kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<kendo-mobile-content class="km-insetcontent">
<img src="content/images/happy.png" id="done-icon">
<h2>Thanks for shopping!</h2>
<h3>Your sushi is on the way.</h3>
<kendo-mobile-button id="done-button" href="#!cart">Done</kendo-mobile-button>
</kendo-mobile-content>
</kendo-mobile-view>
<kendo-mobile-view id="details" k-transition="'slide'" k-layout="'default'" ng-controller="detailsController" k-on-show="setCurrentItem(kendoEvent)">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-mobile-back-button k-align="'left'">Back</kendo-mobile-back-button>
<kendo-view-title>Item</kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<kendo-mobile-content>
<img ng-src="content/images/200/{{sushiCart.currentItem.image}}" />
<h2>{{sushiCart.currentItem.name}}</h2>
<p>{{sushiCart.currentItem.description}}</p>
<kendo-mobile-button id="buy-now" k-on-click="sushiCart.addToCart(kendoEvent)">
<span>{{sushiCart.currentItem.price | currency}}</span>
</kendo-mobile-button>
<span class="added" ng-show="sushiCart.showLabel()">{{sushiCart.currentItem.ordered}}</span>
</kendo-mobile-content>
</kendo-mobile-view>
<script id="menuTemplate" type="text/x-kendo-template">
<kendo-mobile-button k-on-click="sushiCart.addToCart(kendoEvent, dataItem)" data-item-id="{{dataItem.id}}">
{{dataItem.price | currency}}
</kendo-mobile-button>
<a class="details-link" data-role="listview-link" href="\#!details?id={{dataItem.id}}">
<img ng-src="content/images/75/{{dataItem.image}}" />
<h2>{{dataItem.name}}</h2>
<span class="added" ng-show="dataItem.visibleMessage">Item added to cart <span>{{dataItem.ordered}}</span> times.</span>
</a>
</script>
<script id="cartItemTemplate" type="text/x-kendo-template">
<kendo-mobile-button class="red-button" k-on-click="sushiCart.removeItem(kendoEvent, dataItem)" data-item-id="{{dataItem.id}}"
>&nbsp;&\\#x2716;&nbsp;
</kendo-mobile-button>
<a class="details-link" data-role="listview-link" href="\#!details?id={{dataItem.id}}">
<img ng-src="content/images/75/{{dataItem.image}}" />
<h2>{{dataItem.name}} (x {{dataItem.ordered}})</h2>
<span class="price">total: {{dataItem.price * dataItem.ordered | currency}}</span>
</a>
</script>
</body>
</html>