sf cordova meetup
DESCRIPTION
Presentation about using AngularJS in Cordova development.TRANSCRIPT
Cordova development with AngularJS… and UI component libraries
Me● Andreas Argelius● From Sweden● Living in Japan● Loves food and beer
Me● Works for Asial Corporation● Developer on Onsen UI
… so I might be slightly biased towards AngularJS and Onsen UI
CordovaHybrid apps using web technologies.
Java Objective-C
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.
SPA Frameworks
AngularJS● Client-side framework● Separates DOM manipulation from logic● Two-way data binding
AngularJS - featuresServicesObjects that can be inserted in various places through dependency injection.
DirectivesDefine reusable custom HTML tags, attributes or classes.
ControllersControl application state.
ServicesSubstitutable 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)
Services - examplevar module = angular.module('myServices', []);
module.factory('$myService', function() {
return {
doSomething: function() {
// Do stuff!
}
};
});
Dependency injectionInject dependencies into controllers, directives and services
var app = angular.module('myApp', ['myServices']);
app.controller('MyController', function($myService) {
$myService.doSomething();
});
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.
Reasons for using services● Promotes modular design● Data abstraction● Consistency
Don’t repeat yourself!
Services are singleton instances
Only initialized once (lazily)
Services in CordovaPossible usage in Cordova development:
Angularize native APIsWrap API calls in AngularJS services
Example - GeoLocationangular.module('app.services', []).
factory('$geolocation', function($q) {
return {
get: function() {
var deferred = $q.defer();
...
return deferred.promise;
}
};
});
Example - GeoLocationangular.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
ngCordova● Camera, GeoLocation, Accelerometer, etc.● AngularJS services● Uses $q promises
github.com/driftyco/ng-cordova
Example - GeoLocationangular.module('app', ['ngCordova']).
controller('LocationController', function($cordovaGeolocation) {
$cordovaGeolocation.
getCurrentPosition().
then(function(position) {
// Do stuff.
}, ...);
});
ngTouchTouch events and helpers.
● Attribues: ng-click, ng-swipe-left, ng-swipe-right
● $swipe service, to capture touch events.
ngTouchPart of standard library
<script src=”angular-touch.js”></script><script> angular.module('app', ['ngTouch']);
</script>
ngClick<button ng-click=”doSomething()”> Click me!</button>
Replaces regular ng-click. Mobile browsers introduce a 300ms delay. ngTouch removes delay.
Swipe handlers<div ng-controller=”CarouselCtrl” ng-swipe-left=”next()”ng-swipe-right=”prev()”>...
</div>
$swipe serviceOnly 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'.
}
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) {
...
});
Directives - exampleangular.module('app', [])
.directive('myOwnToolbar', function() {
return {
restrict: 'E'
// Lots of options that control
// the behavior of the directive.
};
});
Directives - exampleUse it in your markup:
<my-own-toolbar> My very own application! </my-own-toolbar>
Memory leaksYour directives may leak, be careful!
Be nice to the garbage collector.
Memory leaksIf 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!
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!
Chrome TimelineDetect memory leaks. Compare state before and after leaking action.
Number of nodes should be same when returning to original state.
Directives in CordovaNice way to use directives in Cordova:
● Emulate native UI components to make users feel at home.
● Utilize native APIs directly from the markup.
Native app components● Page navigation● Tab bar● Toolbar● List view
Cordova apps shouldn’t feel like web applications!
UI components
Lots of other frameworks also available:http://propertycross.com/
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.
Onsen UI ng-modelIntegrates with AngularJS
<ons-switch ng-model=”switchState”></ons-switch>
<p>State is: {{ switchState }}</p>
Onsen UI ng-modelWorks like a checkbox:
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
Sushifinder - Ionic
Ionic<ion-navbar>
...
</ion-navbar>
Ionic
<ion-list>
<ion-item>
...
</ion-item>
...
</ion-list>
Ionic
<ion-tabs>
<ion-tab
icon=”icon ion-search” ></ion-tab>
...
</ion-tabs>
Onsen UI<ons-toolbar>
...
</ons-toolbar>
Onsen UI
<ons-list>
<ons-list-item modifier= ”chevron”>
...
</ons-list-item>
</ons-list>
Onsen UI
<ons-tabbar>
<ons-tabbar-item page= ”find.html”>
</ons-tabbar-item>
...
</ons-tabbar>
Thank you for listening!