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.

SF Cordova Meetup

Presentation about using AngularJS in Cordova development.

SF Cordova Meetup

  1. 1. Cordova development with AngularJS … and UI component libraries
  2. 2. Me ● Andreas Argelius ● From Sweden ● Living in Japan ● Loves food and beer
  3. 3. Me ● Works for Asial Corporation ● Developer on Onsen UI … so I might be slightly biased towards AngularJS and Onsen UI
  4. 4. Cordova Hybrid apps using web technologies. Java Objective-C
  5. 5. SPA (Single Page Application) The whole app in one HTML file ● No page reload ● Manipulate DOM with JavaScript ● Load content dynamically More fluid and “native” feel.
  6. 6. SPA Frameworks
  7. 7. AngularJS ● Client-side framework ● Separates DOM manipulation from logic ● Two-way data binding
  8. 8. AngularJS - features Services Objects that can be inserted in various places through dependency injection. Directives Define reusable custom HTML tags, attributes or classes. Controllers Control application state.
  9. 9. Services Substitutable objects that can be used throughout your application. What can we use services for? ● Data storage, e.g. database models ● Calling APIs (both local and external)
  10. 10. Services - example var module = angular.module('myServices', []); module.factory('$myService', function() { return { doSomething: function() { // Do stuff! } }; });
  11. 11. Dependency injection Inject dependencies into controllers, directives and services var app = angular.module('myApp', ['myServices']); app.controller('MyController', function($myService) { $myService.doSomething(); });
  12. 12. Services - substitutable ● Services should be substitutable by a service with same API. ● Use promises even if without async calls in service. If you switch from localStorage to some remote storage the service will be substitutable if you used promises for the original version, even if localStorage isn’t asynchronous.
  13. 13. Reasons for using services ● Promotes modular design ● Data abstraction ● Consistency Don’t repeat yourself!
  14. 14. Services are singleton instances Only initialized once (lazily)
  15. 15. Services in Cordova Possible usage in Cordova development: Angularize native APIs Wrap API calls in AngularJS services
  16. 16. Example - GeoLocation angular.module('app.services', []). factory('$geolocation', function($q) { return { get: function() { var deferred = $q.defer(); ... return deferred.promise; } }; });
  17. 17. Example - GeoLocation angular.module('app', ['app.services']). controller('PositionController', function($scope, $geolocation) { $geolocation.get().then(function(position) { $scope.currentPosition = position; }, function(error) { // Handle error. }) }); https://gist.github.com/argelius/2ecf0b7c08f31a11eaff
  18. 18. ngCordova ● Camera, GeoLocation, Accelerometer, etc. ● AngularJS services ● Uses $q promises github.com/driftyco/ng-cordova
  19. 19. Example - GeoLocation angular.module('app', ['ngCordova']). controller('LocationController', function($cordovaGeolocation) { $cordovaGeolocation. getCurrentPosition(). then(function(position) { // Do stuff. }, ...); });
  20. 20. ngTouch Touch events and helpers. ● Attribues: ng-click, ng-swipe-left, ng-swipe- right ● $swipe service, to capture touch events.
  21. 21. ngTouch Part of standard library <script src=”angular-touch.js”></script> <script> angular.module('app', ['ngTouch']); </script>
  22. 22. ngClick <button ng-click=”doSomething()”> Click me! </button> Replaces regular ng-click. Mobile browsers introduce a 300ms delay. ngTouch removes delay.
  23. 23. Swipe handlers <div ng-controller=”CarouselCtrl” ng-swipe-left=”next()” ng-swipe-right=”prev()”> ... </div>
  24. 24. $swipe service Only one method: $swipe.bind() $swipe.bind({ start: function(e) { // listens for 'mousedown' or 'touchstart' console.log('You tapped (' + e.x + ',' + e.y + ')'); } // also 'move', 'end' and 'cancel'. }
  25. 25. Directives ● Attach a behavior or change a DOM element ● Create custom tags, attributes or classes ● Allows for cleaner markup Using: module.directive( 'myDirective' , function($dep1, $dep2) { ... });
  26. 26. Directives - example angular.module('app', []) .directive('myOwnToolbar', function() { return { restrict: 'E' // Lots of options that control // the behavior of the directive. }; });
  27. 27. Directives - example Use it in your markup: <my-own-toolbar> My very own application! </my-own-toolbar>
  28. 28. Memory leaks Your directives may leak, be careful! Be nice to the garbage collector.
  29. 29. Memory leaks If an object owns a reference to the DOM element, you must remove it when the directive is removed from the DOM. scope.$on('$destroy', function() { this._element = null; }.bind(this)); Also remove event listeners!
  30. 30. Memory leaks ● Mobile devices have less memory than desktop computers ● Hybrid apps may be open for a very long time ● Even a small memory leak may be disastrous!
  31. 31. Chrome Timeline Detect memory leaks. Compare state before and after leaking action. Number of nodes should be same when returning to original state.
  32. 32. Directives in Cordova Nice way to use directives in Cordova: ● Emulate native UI components to make users feel at home. ● Utilize native APIs directly from the markup.
  33. 33. Native app components ● Page navigation ● Tab bar ● Toolbar ● List view Cordova apps shouldn’t feel like web applications!
  34. 34. UI components Lots of other frameworks also available: http://propertycross.com/
  35. 35. Built on top of Angular ● Ionic and Onsen use AngularJS to create custom tags. ● Natural to write the app using AngularJS since it’s already loaded.
  36. 36. Onsen UI ng-model Integrates with AngularJS <ons-switch ng-model=”switchState”></ons-switch> <p>State is: {{ switchState }}</p>
  37. 37. Onsen UI ng-model Works like a checkbox:
  38. 38. Components example ● Sample Sushifinder app ● Gets position with $geolocation service we created before ● Asks foursquare API for nearby sushi restaurants https://github.com/argelius/ionic-sushifinder
  39. 39. Sushifinder - Ionic
  40. 40. Ionic <ion-navbar> ... </ion-navbar>
  41. 41. Ionic <ion-list> <ion-item> ... </ion-item> ... </ion-list>
  42. 42. Ionic <ion-tabs> <ion-tab icon=”icon ion-search” ></ion-tab> ... </ion-tabs>
  43. 43. Onsen UI <ons-toolbar> ... </ons-toolbar>
  44. 44. Onsen UI <ons-list> <ons-list-item modifier= ”chevron”> ... </ons-list-item> </ons-list>
  45. 45. Onsen UI <ons-tabbar> <ons-tabbar-item page= ”find.html” > </ons-tabbar-item> ... </ons-tabbar>
  46. 46. Thank you for listening!

×