Programming Steps

228 Ionic-v1 Animated Spinners

Animated Spinners
code example:

<title>Ionic Pull to Refresh</title>

<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
        <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
        <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
        <ion-spinner icon="spiral"></ion-spinner>
      </p>

</ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
 
  
});  
    </script>
  </body>
</html>

227 Ionic-v1 Side Menu and Navigation: Nightly

Side Menu and Navigation: Nightly
code example:

<title>Side Menus</title>

<ion-nav-view></ion-nav-view>

<ion-side-menu-content>
          <ion-nav-bar class="bar-positive">
            <ion-nav-back-button>
            </ion-nav-back-button>

<ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>

<ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>

<ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          <ion-content>
            <ul class="list">
              
              <a href="#/event/check-in" class="item" menu-close>Check-in</a>
              <a href="#/event/attendees" class="item" menu-close>Attendees</a>
            </ul>
          </ion-content>
        </ion-side-menu>

</ion-side-menus>
    </script>

<div ng-hide="showForm">
            <pre ng-bind="attendee | json"></pre> 
            <a href="#/event/attendees">View attendees</a>
          </div>
        </ion-content>
      </ion-view>
    </script>

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "templates/event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "templates/check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "templates/attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })
  
  $urlRouterProvider.otherwise("/event/home");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.attendees = [
    { firstname: 'Nicolas', lastname: 'Cage' },
    { firstname: 'Jean-Claude', lastname: 'Van Damme' },
    { firstname: 'Keanu', lastname: 'Reeves' },
    { firstname: 'Steven', lastname: 'Seagal' }
  ];
  
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller('CheckinCtrl', function($scope) {
  $scope.showForm = true;
  
  $scope.shirtSizes = [
    { text: 'Large', value: 'L' },
    { text: 'Medium', value: 'M' },
    { text: 'Small', value: 'S' }
  ];
  
  $scope.attendee = {};
  $scope.submit = function() {
    if(!$scope.attendee.firstname) {
      alert('Info required');
      return;
    }
    $scope.showForm = false;
    $scope.attendees.push($scope.attendee);
  };
  
})

.controller('AttendeesCtrl', function($scope) {
  
  $scope.activity = [];
  $scope.arrivedChange = function(attendee) {
    var msg = attendee.firstname + ' ' + attendee.lastname;
    msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); 
    msg += new Date().getMilliseconds();
    $scope.activity.push(msg);
    if($scope.activity.length > 3) {
      $scope.activity.splice(0, 1);
    }
  };
  
});  
    </script>
  </body>
</html>

226 Ionic-v1 Blank Starter

Blank Starter
code example:

225 Ionic-v1 Ionic Ion: Tinder Cards

Ionic Ion: Tinder Cards
code example:

<html>
  <head>
       <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <link rel="stylesheet" href="https://code.ionicframework.com/contrib/ionic-contrib-tinder-cards/ionic.tdcards.css">
    
    <title>Ionic Swipe Down</title>

td-card {
  position: absolute;
  left: 50%;
  margin-top: 80px;
  margin-bottom: 40px;
  margin-left: -150px;
  width: 300px;
  height: 300px;

border: 1px solid #999;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
  border-radius: 6px;
}
/*
td-card.card-0 {
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  top: 0px;
  z-index: 10;
}
td-card.card-1 {
  -webkit-transform: translate3d(0, 4px, 0);
  transform: translate3d(0, 4px, 0);
  z-index: 9;
}
td-card.card-2 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
  z-index: 8;
}
*/

td-card .image {
  position: relative;
}

td-card img {
  max-width: 100%;
  border-radius: 6px;
}

.yes-text {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 30px;
  color: rgb(111, 250, 111);
  opacity: 0;
}
.no-text {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: rgb(255, 115, 115);
  opacity: 0;
}

.fade {
  -webkit-transition: 0.2s opacity linear;
  transition: 0.2s opacity linear;
  opacity: 0;
}  
    </style>
  </head>
<body ng-app="starter" no-scroll>
    <ion-pane ng-controller="CardsCtrl">
      <ion-header-bar class="bar-default">
        <h1 class="title">TD Cards</h1>
      </ion-header-bar>

<td-cards>
        <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{$index}}">
          <div class="image" ng-controller="CardCtrl">
            <div class="no-text">NOPE</div>
            <img ng-src="{{card.image}}">
            <div class="yes-text">LIKE</div>
          </div>
        </td-card>
      </td-cards>
    </ion-pane>
<script>
angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards'])

.directive('noScroll', function($document) {

return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

$document.on('touchmove', function(e) {
        e.preventDefault();
      });
    }
  }
})

.controller('CardsCtrl', function($scope, TDCardDelegate) {
  console.log('CARDS CTRL');
  var cardTypes = [
    { image: 'https://pbs.twimg.com/profile_images/696212819570655232/UJYdhVYj.jpg' },
    { image: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg' },
    { image: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png' },
    { image: 'https://pbs.twimg.com/profile_images/692904108424982528/0PESpDwT.jpg'}
  ];

$scope.cards = Array.prototype.slice.call(cardTypes, 0);

$scope.cardDestroyed = function(index) {
    $scope.cards.splice(index, 1);
  };

$scope.addCard = function() {
    var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
    newCard.id = Math.random();
    $scope.cards.push(angular.extend({}, newCard));
  }
})

.controller('CardCtrl', function($scope, TDCardDelegate) {
  $scope.cardSwipedLeft = function(index) {
    console.log('LEFT SWIPE');
    $scope.addCard();
  };
  $scope.cardSwipedRight = function(index) {
    console.log('RIGHT SWIPE');
    $scope.addCard();
  };
});
  
  </script>
  </body>
</html>

224 Ionic-v1 Side Menu Exposed On Large Viewport: Nightly

Side Menu Exposed On Large Viewport: Nightly
code example:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     
    <title>Side Menu Exposed On Large Viewport</title>

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
 
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
});  
    </script>
  </body>
</html>

223 Ionic-v1 Popover: Nightly

Popover: Nightly
code example:

.controller('AppCtrl', function($scope, $ionicPopover) {

$ionicPopover.fromTemplateUrl('templates/popover.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });

$scope.demo = 'ios';
  $scope.setPlatform = function(p) {
    document.body.classList.remove('platform-ios');
    document.body.classList.remove('platform-android');
    document.body.classList.add('platform-' + p);
    $scope.demo = p;
  }

});  
    </script>
  </body>
</html>

https://codepen.io/-kaik-/pen/GggagK/

222 Ionic-v1 Footer Toggle: Nightly

Footer Toggle: Nightly
code example:

<body ng-controller="AppCtrl">
    
  <ion-content padding="true" ng-class="{'has-footer': showFooter}">
    <button ng-click="toggleFooter()" class="button button-assertive">Toggle Footer</button>
    </ion-content>
  <ion-footer-bar class="bar-assertive" ng-if="showFooter">
</ion-footer-bar>
<script>
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope) {
  $scope.showFooter = true;
  $scope.toggleFooter = function() {
    console.log('Toggling footer');
    $scope.showFooter = !$scope.showFooter;
  }
})  
    </script>
  </body>
</html>

https://codepen.io/-kaik-/pen/GggagK/

221A Ionic-v1 Ionic zoomable images gallery

Ionic zoomable images gallery
code example:

<html ng-app="demoApp">
  <head>
    <meta charset="utf-8">
    <title>
      Zoomable images
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  
    <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<style>
ion-content{
	background-color: grey;
}

.container{
	background-color: grey;
}

.scrollCanvas{
  width: 100%;
  height: 100%;
  background-color: black;
}

.image{
  	width: 100%;
  	height: 600px;
  	background-size: contain;
  	background-repeat: no-repeat;
  	background-position: center, center;
}  
    </style>
  </head>
  
  <body class="padding" ng-controller="DemoCtrl">
    <ion-content>
     
    <ion-slide-box>
	
		      <ion-slide ng-repeat="image in images"> 
             <div class="container" ng-if="slideVisible($index)" class="scrollCanvas">
                  <ion-scroll class="scrollCanvas" zooming="true" min-zoom="1" direction="xy" locked="false">
                        <div class="image" style="background-image: url( {{image}} )"></div>  
                  </ion-scroll>
             </div>
             <div> </div>
      </ion-slide>
	
	</ion-slide-box>

<br/><br/>
	 <a href="kaikreations.blogspot.com.es">Visit my blog for more tutorials</a>
	<br/><br/>
      
  </ion-content>
<script>
angular.module('demoApp', ['ionic'])
.controller('DemoCtrl',function($scope, $ionicSlideBoxDelegate) {
  
  $scope.images = [
    						 "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSeuNVzlDcFunjMxXa3_ui65_fJgwvT8Eq0M5GluaIbl5DJYLOaCI0McDw",
    						 "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTg_tgzzbgiZ9QnAe8-xtbnBe04jJ7Ke7s60llFYcwhiZqFQO1BQ6mqdh0W",
    						 "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQamBcgUQKpzafi4MNW6WYnS6wxvJCiQjKc_uoAz4ycmyHO2qvV0q4sCazG",
                   "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSqXQBbyRukbsao9ljVsi8SMW7GWVlXl2By4jS7QiqFNr3ChFf9Lw", 
                   "https://ga-core.s3.amazonaws.com/production/uploads/program/default_image/2034/Angularjs-Bootcamp-LONDON.jpg",
                 ]
  
  
	$scope.slideVisible = function(index){
		if(  index < $ionicSlideBoxDelegate.currentIndex() -1 
       || index > $ionicSlideBoxDelegate.currentIndex() + 1){
      return false;
    }
		
		return true;
	}
  
 
});  
    </script>
  </body>
</html>

221 Ionic-v1 Scroll X and Y: Nightly

Scroll X and Y: Nightly
code example:

220 Ionic-v1 Collection-Repeat: 1.0.0-beta.9

Collection-Repeat: 1.0.0-beta.9
code example:

<title>Collection-Repeat: Early Preview</title>

<body ng-controller="MainCtrl">
  <ion-header-bar class="bar-positive">
    <h1 class="title">3000 Contacts</h1>
    <div class="button" ng-click="scrollBottom()">
      Scroll To Bottom
    </div>
  </ion-header-bar>
  <ion-header-bar class="bar-light bar-subheader">
    <input type="search"
      placeholder="Filter contacts..."
      ng-model="search"
      ng-focus="searchFocused = true"
      ng-blur="searchFocused = false"
      ng-change="scrollTop()">
    <button ng-if="search.length"
      class="button button-icon ion-android-close input-button"
      ng-click="clearSearch()">
    </button>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <a class="item my-item"
        collection-repeat="item in getContacts()"
        collection-item-height="getItemHeight(item)"
        collection-item-width="getItemWidth(item)"
        ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
        ng-style="{'line-height': getItemHeight(item) + 'px'}"
        ng-class="{'item-divider': item.isLetter}">
        <img ng-if="!item.isLetter" ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
        {{item.letter || (item.first_name+' '+item.last_name)}}
      </a>
    </div>
  </ion-content>
<script>
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
  var letters = $scope.letters = [];
  var contacts = $scope.contacts = [];
  var currentCharCode = 'A'.charCodeAt(0) - 1;

//window.CONTACTS is defined below
  window.CONTACTS
    .sort(function(a, b) {
      return a.last_name > b.last_name ? 1 : -1;
    })
    .forEach(function(person) {
      //Get the first letter of the last name, and if the last name changes
      //put the letter in the array
      var personCharCode = person.last_name.toUpperCase().charCodeAt(0);
      //We may jump two letters, be sure to put both in
      //(eg if we jump from Adam Bradley to Bob Doe, add both C and D)
      var difference = personCharCode - currentCharCode;
      for (var i = 1; i <= difference; i++) {
        addLetter(currentCharCode + i);
      }
      currentCharCode = personCharCode;
      contacts.push(person);
    });

//If names ended before Z, add everything up to Z
  for (var i = currentCharCode + 1; i <= 'Z'.charCodeAt(0); i++) {
    addLetter(i);
  }

function addLetter(code) {
    var letter = String.fromCharCode(code);
    contacts.push({
      isLetter: true,
      letter: letter
    });
    letters.push(letter);
  }

//Letters are shorter, everything else is 52 pixels
  $scope.getItemHeight = function(item) {
    return item.isLetter ? 40 : 100;
  };
  $scope.getItemWidth = function(item) {
    return '100%';
  };

$scope.scrollBottom = function() {
    $ionicScrollDelegate.scrollBottom(true);
  };

var letterHasMatch = {};
  $scope.getContacts = function() {
    letterHasMatch = {};
    //Filter contacts by $scope.search.
    //Additionally, filter letters so that they only show if there
    //is one or more matching contact
    return contacts.filter(function(item) {
      var itemDoesMatch = !$scope.search || item.isLetter ||
        item.first_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1 ||
        item.last_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1;

//Mark this person's last name letter as 'has a match'
      if (!item.isLetter && itemDoesMatch) {
        var letter = item.last_name.charAt(0).toUpperCase();
        letterHasMatch[letter] = true;
      }

return itemDoesMatch;
    }).filter(function(item) {
      //Finally, re-filter all of the letters and take out ones that don't
      //have a match
      if (item.isLetter && !letterHasMatch[item.letter]) {
        return false;
      }
      return true;
    });
  };

$scope.clearSearch = function() {
    $scope.search = '';
  };
});

window.CONTACTS = [{"id":1,"first_name":"Patrick","last_name":"Rogers","country":"Cyprus","email":"progers@yata.net"},
{"id":2,"first_name":"Janet","last_name":"Gordon","country":"Croatia","email":"jgordon@skivee.biz"},
{"id":3,"first_name":"Kathy","last_name":"Hamilton","country":"Armenia","email":"khamilton@rhynyx.biz"},
{"id":4,"first_name":"Stephanie","last_name":"Johnson","country":"Mauritius","email":"sjohnson@jabbertype.mau"}
];

</script>
  </body>
</html>

219 Ionic-v1 Accordion List: Nightly

Accordion List: Nightly
code example:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Accordion</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<style>
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}

/*
 * https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
 */
.list .item.item-accordion {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
  line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
  display: block !important;
}  
    </style>
  </head>

<body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Accordion List</h1>
    </ion-header-bar>

<ion-content>

<ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
             
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>

</ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.groups = [];
  for (var i=0; i<10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }
  
  /*
   * if given group is the selected group, deselect it
   * else, select the given group
   */
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };
  
});  
    </script>
  </body>
</html>

218 Ionic-v1 Shrinking Header: Nightly

Shrinking Header: Nightly
code example:

<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Shrinking Header</title>

.bar-header {
  height: 64px !important;
}
.bar-header > * {
  margin-top: 20px !important;
}

.scroll-content{
  top:0 !important
}  
    </style>
  </head>
  <body>
    <fake-statusbar></fake-statusbar>
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <div class="buttons">
          <button class="button button-icon ion-navicon"></button>
        </div>
        <h1 class="title">Things</h1>
      </ion-header-bar>
      
      <ion-content header-shrink scroll-event-interval="5">
        <div style="height: 64px;"></div>
        <div class="list card">

<div class="item item-avatar">
            <img src="https://ionicframework.com/img/docs/mcfly.jpg">
            <h2>Marty McFly</h2>
            <p>November 05, 1955</p>
          </div>

<div class="item item-body">
            <img class="full-image" src="https://ionicframework.com/img/docs/delorean.jpg">
            <p>
              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
              the content is from a card-body consisting of an image and paragraph text. The footer
              consists of tabs, icons aligned left, within the card-footer.
            </p>
            <p>
              <a href="#" class="subdued">1 Like</a>
              <a href="#" class="subdued">5 Comments</a>
            </p>
          </div>

<div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
              <i class="icon ion-thumbsup"></i>
              Like
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-chatbox"></i>
              Comment
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
            </a>
          </div>

</div>
        <div class="list card">

<div class="item item-avatar">
            <img src="https://ionicframework.com/img/docs/mcfly.jpg">
            <h2>Marty McFly</h2>
            <p>November 05, 1955</p>
          </div>

</div>
        <div class="list card">

<div class="item item-avatar">
            <img src="https://ionicframework.com/img/docs/mcfly.jpg">
            <h2>Marty McFly</h2>
            <p>November 05, 1955</p>
          </div>

</div>
      </ion-content>
    </ion-pane>
<script>
angular.module('ionic.example', ['ionic'])

.directive('fakeStatusbar', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>'
  }
})
.directive('headerShrink', function($document) {
  var fadeAmt;

return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var starty = $scope.$eval($attr.headerShrink) || 0;
      var shrinkAmt;
      
      var header = $document[0].body.querySelector('.bar-header');
      var headerHeight = header.offsetHeight;
      
      $element.bind('scroll', function(e) {
        var scrollTop = null;
        if(e.detail){
          scrollTop = e.detail.scrollTop;
        }else if(e.target){
          scrollTop = e.target.scrollTop;
        }
        if(scrollTop > starty){
          // Start shrinking
          shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
          shrink(header, $element[0], shrinkAmt, headerHeight);
        } else {
          shrink(header, $element[0], 0, headerHeight);
        }
      });
    }
  }
})

</script>
  </body>
</html>

217 ionic-v1 Sign-in, then Tabs: Nightly

Sign-in, then Tabs: Nightly
code example:

<ion-tab title="Home" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
          </ion-tab>

<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
            <ion-nav-view name="about-tab"></ion-nav-view>
          </ion-tab>

<ion-tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
          </ion-tab>

</ion-tabs>
      </ion-view>
    </script>

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('signin', {
      url: '/sign-in',
      templateUrl: 'templates/sign-in.html',
      controller: 'SignInCtrl'
    })
    .state('forgotpassword', {
      url: '/forgot-password',
      templateUrl: 'templates/forgot-password.html'
    })
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
          templateUrl: 'templates/home.html',
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: '/facts',
      views: {
        'home-tab': {
          templateUrl: 'templates/facts.html'
        }
      }
    })
    .state('tabs.facts2', {
      url: '/facts2',
      views: {
        'home-tab': {
          templateUrl: 'templates/facts2.html'
        }
      }
    })
    .state('tabs.about', {
      url: '/about',
      views: {
        'about-tab': {
          templateUrl: 'templates/about.html'
        }
      }
    })
    .state('tabs.navstack', {
      url: '/navstack',
      views: {
        'about-tab': {
          templateUrl: 'templates/nav-stack.html'
        }
      }
    })
    .state('tabs.contact', {
      url: '/contact',
      views: {
        'contact-tab': {
          templateUrl: 'templates/contact.html'
        }
      }
    });

$urlRouterProvider.otherwise('/sign-in');

})

.controller('SignInCtrl', function($scope, $state) {
  
  $scope.signIn = function(user) {
    console.log('Sign-In', user);
    $state.go('tabs.home');
  };
  
})

.controller('HomeTabCtrl', function($scope) {
  console.log('HomeTabCtrl');
});  
    </script>
  </body>
</html>

216 ionic-v1 Tabs And Navigation: Nightly

Tabs And Navigation: Nightly
code example:

<ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

</ion-tabs>
    </script>

.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope) {
  console.log('HomeTabCtrl');
})  
    </script>
  </body>
</html>

215 Ionic-v1 Custom Loading Bar: Nightly

Custom Loading Bar: Nightly
code example:

<html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Custom Loading Bar</title>

/* transition 'sliding down' (check below)*/
  -webkit-transition: 200ms all;
}

/* 
 * make the content's top changes animate.
 * might not always look good, but looks
 * good when our loader is added & removed
 */
.has-header {
  -webkit-transition: 200ms top;
}
.has-header.has-loading {
  /* 44px (header) + 24px */
  top: 68px;
}

/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
  height: 0;
  border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
  height: 24px;
  border-width: 1px;
}
  
  </style>
  </head>
  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello!</h1>
    </ion-header-bar>
    <div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
      Loading...
    </div>
    <ion-content ng-class="{'has-loading': data.isLoading}">
      <ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
    </ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.data = {
    isLoading: false
  };
}]);  
    </script>
  </body>
</html>

214 Ionic-v1 Popup: Nightly

Popup: Nightly
code example:

<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Popups
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body class="padding" ng-controller="PopupCtrl">
    <button class="button button-dark" ng-click="showPopup()">
      show
    </button>
    <button class="button button-primary" ng-click="showConfirm()">
      Confirm
    </button>
    <button class="button button-positive" ng-click="showAlert()">
      Alert
    </button>
    
    <script id="popup-template.html" type="text/ng-template">
      <input ng-model="data.wifi" type="text" placeholder="Password">
    </script>
<script>
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

// Triggered on a button click, or some other target
 $scope.showPopup = function() {
   $scope.data = {}

// An elaborate, custom popup
   var myPopup = $ionicPopup.show({
     template: '<input type="password" ng-model="data.wifi">',
     title: 'Enter Wi-Fi Password',
     subTitle: 'Please use normal things',
     scope: $scope,
     buttons: [
       { text: 'Cancel' },
       {
         text: '<b>Save</b>',
         type: 'button-positive',
         onTap: function(e) {
           if (!$scope.data.wifi) {
             //don't allow the user to close unless he enters wifi password
             e.preventDefault();
           } else {
             return $scope.data.wifi;
           }
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log('Tapped!', res);
   });
   $timeout(function() {
      myPopup.close(); //close the popup after 3 seconds for some reason
   }, 3000);
  };
   // A confirm dialog
   $scope.showConfirm = function() {
     var confirmPopup = $ionicPopup.confirm({
       title: 'Consume Ice Cream',
       template: 'Are you sure you want to eat this ice cream?'
     });
     confirmPopup.then(function(res) {
       if(res) {
         console.log('You are sure');
       } else {
         console.log('You are not sure');
       }
     });
   };

// An alert dialog
   $scope.showAlert = function() {
     var alertPopup = $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     });
     alertPopup.then(function(res) {
       console.log('Thank you for not eating my delicious ice cream cone');
     });
   };
});  
    </script>
  </body>
</html>

213 Ionic-v1 Pull To Refresh: Nightly

Pull To Refresh: Nightly
code example:

<title>Ionic Pull to Refresh</title>

<ion-header-bar class="bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </ion-header-bar>

<ion-content>
      <ion-refresher on-refresh="doRefresh()">
                     
      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>
    </ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];
  
  $scope.doRefresh = function() {
    
    console.log('Refreshing!');
    $timeout( function() {
      //simulate async response
      $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

//Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    
    }, 1000);
      
  };
  
});  
    </script>
  </body>
</html>

212 Ionic-v1 ActionSheet: Nightly

ActionSheet: Nightly
code example:

.controller('AppCtrl', function($scope, $ionicActionSheet) {
  
  $scope.showActionsheet = function() {
    
    $ionicActionSheet.show({
      titleText: 'ActionSheet Example',
      buttons: [
        { text: '<i class="icon ion-share"></i> Share' },
        { text: '<i class="icon ion-arrow-move"></i> Move' },
      ],
      destructiveText: 'Delete',
      cancelText: 'Cancel',
      cancel: function() {
        console.log('CANCELLED');
      },
      buttonClicked: function(index) {
        console.log('BUTTON CLICKED', index);
        return true;
      },
      destructiveButtonClicked: function() {
        console.log('DESTRUCT');
        return true;
      }
    });
  };

});  
    </script>
  </body>
</html>

211 Ionic-v1 Modal: Nightly

Modal: Nightly
code example:

.controller('AppCtrl', function($scope, $ionicModal) {
  
  $scope.contacts = [
    { name: 'Gordon Freeman' },
    { name: 'Barney Calhoun' },
    { name: 'Lamarr the Headcrab' },
  ];

$ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  
  $scope.createContact = function(u) {        
    $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
    $scope.modal.hide();
  };

});  
    </script>
  </body>
</html>

210 Ionic-v1 List: Nightly

List: Nightly
code example:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <style>
      body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}
    </style>
  </head>

<body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      </div>
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <div class="buttons">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
        </button>
      </div>
    </ion-header-bar>

<ion-content>

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

<ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

</ion-list>

</ion-content>
<script>
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  
  $scope.data = {
    showDelete: false
  };
  
  $scope.edit = function(item) {
    alert('Edit Item: ' + item.id);
  };
  $scope.share = function(item) {
    alert('Share Item: ' + item.id);
  };
  
  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };
  
  $scope.onItemDelete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };
  
  $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 },
    { id: 13 },
    { id: 14 },
    { id: 15 },
    { id: 16 },
    { id: 17 },
    { id: 18 },
    { id: 19 },
    { id: 20 },
    { id: 21 },
    { id: 22 },
    { id: 23 },
    { id: 24 },
    { id: 25 },
    { id: 26 },
    { id: 27 },
    { id: 28 },
    { id: 29 },
    { id: 30 },
    { id: 31 },
    { id: 32 },
    { id: 33 },
    { id: 34 },
    { id: 35 },
    { id: 36 },
    { id: 37 },
    { id: 38 },
    { id: 39 },
    { id: 40 },
    { id: 41 },
    { id: 42 },
    { id: 43 },
    { id: 44 },
    { id: 45 },
    { id: 46 },
    { id: 47 },
    { id: 48 },
    { id: 49 },
    { id: 50 }
  ];
  
});  
    </script>
  </body>
</html>