<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Ionic Framework -->
<link rel="stylesheet" href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" />
<script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ionicApp">
<ion-side-menus>
<!-- Center content -->
<ion-pane ion-side-menu-content>
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
<!-- Left menu -->
<ion-side-menu side="left">
<header class="bar bar-header bar-energized">
<div class="title">Title Of My App</div>
</header>
<ion-content has-header="true">
<div class="card">
<div class="item item-avatar item-text-wrap">
<img src="images/icon.png">
<h2>Version</h2>
<p>1.0.0</p>
</div>
<div class="item item-text-wrap">
<h2>Developer</h2>
<p>eugi</p>
</div>
</div>
<br><br><br><br><br>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="tabs.html" type="text/ng-template">
<ion-tabs tabs-type="tabs-icon-top">
<ion-tab title="Rivers"
href="#/tab/rivers"
icon="ion-waterdrop">
<ion-nav-view name="rivers-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="RiversClick"
href="#/tab/riversClick"
icon="ion-waterdrop">
<ion-nav-view name="riversClick-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="rivers.html" type="text/ng-template">
<ion-view title="'Rivers'">
<ion-content has-header="true" has-tabs="true">
<ul class="list">
<li class="item item-button-right" style="padding-right: 15px"
ng-repeat="river in rivers"
on-finish-render="repeatFinish()">
<button class="button button-icon button-large">
<i class="icon ion-android-star"></i>
</button>
{{river.Name}}
</li>
</ul>
</ion-content>
</ion-view>
</script>
<script id="riversClick.html" type="text/ng-template">
<ion-view title="'Rivers'">
<ion-content has-header="true" has-tabs="true">
<ul class="list">
<li class="item item-button-right" style="padding-right: 15px"
ng-repeat="river in rivers"
on-finish-render="repeatFinish()">
<button class="button button-icon button-large" ng-click="alert(river)">
<i class="icon ion-android-star"></i>
</button>
{{river.Name}}
</li>
</ul>
</ion-content>
</ion-view>
</script>
</body>
</html>
angular.module('ionicApp', ['ionic','ui.router'])
.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html'
})
.state('tabs.rivers', {
url: '/rivers',
views: {
'rivers-tab': {
templateUrl: 'rivers.html',
controller: 'RiversCtrl'
}
}
}).state('tabs.riversClic', {
url: '/riversClick',
views: {
'riversClick-tab': {
templateUrl: 'riversClick.html',
controller: 'RiversClickCtrl'
}
}
})
$urlRouterProvider.when('','/tab/rivers');
$urlRouterProvider.otherwise('/tab/rivers');
})
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$eval(attr.onFinishRender);
});
}
}
}
})
.controller('RiversCtrl',function($scope){
var start = new Date().getTime();
$scope.rivers = [{Name:'a0'},{Name:'a1'},{Name:'a2'},{Name:'a3'},{Name:'a4'},{Name:'a5'},{Name:'a6'},{Name:'a7'},{Name:'a8'},{Name:'a9'},
{Name:'b0'},{Name:'b1'},{Name:'b2'},{Name:'b3'},{Name:'b4'},{Name:'b5'},{Name:'b6'},{Name:'b7'},{Name:'b8'},{Name:'b9'},
{Name:'c0'},{Name:'c1'},{Name:'c2'},{Name:'c3'},{Name:'c4'},{Name:'c5'},{Name:'c6'},{Name:'c7'},{Name:'c8'},{Name:'c9'},
{Name:'d0'},{Name:'d1'},{Name:'d2'},{Name:'d3'},{Name:'d4'},{Name:'d5'},{Name:'d6'},{Name:'d7'},{Name:'d8'},{Name:'d9'},
{Name:'e0'},{Name:'e1'},{Name:'e2'},{Name:'e3'},{Name:'e4'},{Name:'e5'},{Name:'e6'},{Name:'e7'},{Name:'e8'},{Name:'e9'},
{Name:'f0'},{Name:'f1'},{Name:'f2'},{Name:'f3'},{Name:'f4'},{Name:'f5'},{Name:'f6'},{Name:'f7'},{Name:'f8'},{Name:'f9'},
{Name:'g0'},{Name:'g1'},{Name:'g2'},{Name:'g3'},{Name:'g4'},{Name:'g5'},{Name:'g6'},{Name:'g7'},{Name:'g8'},{Name:'g9'},
];
$scope.repeatFinish = function(){
alert("Seconds: "+((new Date().getTime())-start)/1000+"\n"+
"Rivers: "+$scope.rivers.length+"\n"+
"Rivers/s: "+1000*$scope.rivers.length/((new Date().getTime())-start)+"");
}
})
.controller('RiversClickCtrl',function($scope){
var start = new Date().getTime();
$scope.rivers = [{Name:'a0'},{Name:'a1'},{Name:'a2'},{Name:'a3'},{Name:'a4'},{Name:'a5'},{Name:'a6'},{Name:'a7'},{Name:'a8'},{Name:'a9'},
{Name:'b0'},{Name:'b1'},{Name:'b2'},{Name:'b3'},{Name:'b4'},{Name:'b5'},{Name:'b6'},{Name:'b7'},{Name:'b8'},{Name:'b9'},
{Name:'c0'},{Name:'c1'},{Name:'c2'},{Name:'c3'},{Name:'c4'},{Name:'c5'},{Name:'c6'},{Name:'c7'},{Name:'c8'},{Name:'c9'},
{Name:'d0'},{Name:'d1'},{Name:'d2'},{Name:'d3'},{Name:'d4'},{Name:'d5'},{Name:'d6'},{Name:'d7'},{Name:'d8'},{Name:'d9'},
{Name:'e0'},{Name:'e1'},{Name:'e2'},{Name:'e3'},{Name:'e4'},{Name:'e5'},{Name:'e6'},{Name:'e7'},{Name:'e8'},{Name:'e9'},
{Name:'f0'},{Name:'f1'},{Name:'f2'},{Name:'f3'},{Name:'f4'},{Name:'f5'},{Name:'f6'},{Name:'f7'},{Name:'f8'},{Name:'f9'},
{Name:'g0'},{Name:'g1'},{Name:'g2'},{Name:'g3'},{Name:'g4'},{Name:'g5'},{Name:'g6'},{Name:'g7'},{Name:'g8'},{Name:'g9'},
];
$scope.repeatFinish = function(){
alert("Seconds: "+((new Date().getTime())-start)/1000+"\n"+
"Rivers: "+$scope.rivers.length+"\n"+
"Rivers/s: "+1000*$scope.rivers.length/((new Date().getTime())-start)+"");
}
$scope.alert = function(river){alert(river.Name);}
})
/* Styles go here */