Introduction à Ionic Framework pour les HumanTalks Paris. * Qu'est-ce qu'une application Ionic * Pourquoi utiliser Ionic * Comment utiliser Ionic

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/

5. Application mobile

7. Framework UI spécialisé mobile
et basé sur Angular
- Styles
- Directives
- Outils

9. Quelques composants Ionic

10. Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technologique

11. Code ...

12. <ion-view>
<ion-header-bar class="bar-positive">
<h1 class="title">Header</h1>
<button class="button button-clear icon ion-settings"></button>
</ion-header-bar>
<ion-content>
</ion-content>
<ion-footer-bar class="bar-dark">
<div class="title">Footer</div>
</ion-footer-bar>
</ion-view>
Header, Footer & Content

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
● ...

18. Ainsi qu’un ensemble d’outils...

22. SalooN (Android only…)
http://bit.ly/saloon-app