Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic HumanTalks - 11/03/2015

1,353 views

Published on

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

Published in: Software
  • Be the first to comment

Ionic HumanTalks - 11/03/2015

  1. 1. Un jour pour prototyper une application mobile @loicknuchel
  2. 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/
  3. 3. Application mobile
  4. 4. Framework UI spécialisé mobile et basé sur Angular - Styles - Directives - Outils
  5. 5. Quelques composants Ionic
  6. 6. Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application Stack technologique
  7. 7. Code ...
  8. 8. <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
  9. 9. ● 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
  10. 10. <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
  11. 11. <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
  12. 12. <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
  13. 13. Et bien d’autres... ● Sidemenu ● Popover ● Modal ● ActionSheet ● Infinite-scroll ● Swapable liste ● Popup ● Checkbox ● Radio ● Slidebox ● Spinner ● Gestures ● Select ● ...
  14. 14. Ainsi qu’un ensemble d’outils...
  15. 15. SalooN (Android only…) http://bit.ly/saloon-app

×