More Related Content
Similar to Ionic HumanTalks - 11/03/2015 (20)
More from Loïc Knuchel (11)
Ionic HumanTalks - 11/03/2015
- 1. Un jour pour prototyper une application mobile
@loicknuchel
- 2. Loïc Knuchel
● Entrepreneur
● Développeur web freelance
● Organisateur des HumanTalks, Bagger, Blogger...
Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/blog/
- 10. Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technologique
- 13. ● collection-repeat: un ng-repeat
efficace pour de longues listes
<div class="list">
<div class="item item-avatar" collection-repeat="user in users">
<img ng-src="{{user.avatar}}"/>
<h2>{{user.name}}</h2>
<p>{{user.description}}</p>
</div>
</div>
Listes
- 14. <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>
$scope.doRefresh = function(){
$scope.users = [ ... ];
// Stop the ion-infinite-scroll from spinning
$scope.$broadcast('scroll.infiniteScrollComplete');
};
Pull-to-refresh
- 15. <ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Status" icon="ion-ios-pulse-strong">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<ion-tab title="Chats" icon="ion-ios-chatboxes">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" icon="ion-ios-gear">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
Navigation Tabs
- 16. <ion-popover-view>
<ion-content>
<div class="list">
<div class="item">Menu 1</div>
<div class="item">Menu 2</div>
<div class="item">Menu 3</div>
</div>
</ion-content>
</ion-popover-view>
$ionicPopover.fromTemplateUrl('popover.html', {
scope: $scope
}).then(function(popover){
$scope.popover = popover;
});
<button class="button icon ion-more" ng-click="popover.show($event)"></button>
Navigation Popover
- 17. Et bien d’autres...
● Sidemenu
● Popover
● Modal
● ActionSheet
● Infinite-scroll
● Swapable liste
● Popup
● Checkbox
● Radio
● Slidebox
● Spinner
● Gestures
● Select
● ...