Successfully reported this slideshow.

Ionic HumanTalks - 11/03/2015

3

Share

Loading in …3
×
1 of 22
1 of 22

Ionic HumanTalks - 11/03/2015

3

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×