Presentation about using AngularJS in Cordova development.

1. Cordova development
with AngularJS
… and UI component libraries

2. Me
● Andreas Argelius
● From Sweden
● Living in Japan
● Loves food and beer

3. Me
● Works for Asial Corporation
● Developer on Onsen UI
… so I might be slightly biased towards AngularJS and Onsen UI

4. Cordova
Hybrid apps using
web technologies.
Java
Objective-C

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. SPA Frameworks

7. AngularJS
● Client-side framework
● Separates DOM manipulation from logic
● Two-way data binding

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. 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. Services - example
var module = angular.module('myServices', []);
module.factory('$myService', function() {
return {
doSomething: function() {
// Do stuff!
}
};
});

11. Dependency injection
Inject dependencies into controllers, directives
and services
var app = angular.module('myApp', ['myServices']);
app.controller('MyController', function($myService) {
$myService.doSomething();
});

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. Reasons for using services
● Promotes modular design
● Data abstraction
● Consistency
Don’t repeat yourself!

14. Services are singleton instances
Only initialized once (lazily)

15. Services in Cordova
Possible usage in Cordova development:
Angularize native APIs
Wrap API calls in AngularJS services

16. Example - GeoLocation
angular.module('app.services', []).
factory('$geolocation', function($q) {
return {
get: function() {
var deferred = $q.defer();
...
return deferred.promise;
}
};
});

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. ngCordova
● Camera, GeoLocation, Accelerometer, etc.
● AngularJS services
● Uses $q promises
github.com/driftyco/ng-cordova

19. Example - GeoLocation
angular.module('app', ['ngCordova']).
controller('LocationController', function($cordovaGeolocation) {
$cordovaGeolocation.
getCurrentPosition().
then(function(position) {
// Do stuff.
}, ...);
});

20. ngTouch
Touch events and helpers.
● Attribues: ng-click, ng-swipe-left, ng-swipe-
right
● $swipe service, to capture touch events.

21. ngTouch
Part of standard library
<script src=”angular-touch.js”></script>
<script>
angular.module('app', ['ngTouch']);
</script>

22. ngClick
<button ng-click=”doSomething()”>
Click me!
</button>
Replaces regular ng-click. Mobile browsers
introduce a 300ms delay. ngTouch removes delay.

23. Swipe handlers
<div
ng-controller=”CarouselCtrl”
ng-swipe-left=”next()”
ng-swipe-right=”prev()”>
...
</div>

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. 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. Directives - example
angular.module('app', [])
.directive('myOwnToolbar', function() {
return {
restrict: 'E'
// Lots of options that control
// the behavior of the directive.
};
});

27. Directives - example
Use it in your markup:
<my-own-toolbar>
My very own application!
</my-own-toolbar>

28. Memory leaks
Your directives may leak,
be careful!
Be nice to the garbage collector.

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. 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. Chrome Timeline
Detect memory leaks. Compare state before and after leaking
action.
Number of nodes should be same when returning to original state.

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. Native app components
● Page navigation
● Tab bar
● Toolbar
● List view
Cordova apps shouldn’t feel like
web applications!

34. UI components
Lots of other frameworks also available:
http://propertycross.com/

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. Onsen UI ng-model
Integrates with AngularJS
<ons-switch ng-model=”switchState”></ons-switch>
<p>State is: {{ switchState }}</p>

37. Onsen UI ng-model
Works like a checkbox:

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. Sushifinder - Ionic

40. Ionic
<ion-navbar>
...
</ion-navbar>

41. Ionic
<ion-list>
<ion-item>
...
</ion-item>
...
</ion-list>

42. Ionic
<ion-tabs>
<ion-tab
icon=”icon ion-search” ></ion-tab>
...
</ion-tabs>

43. Onsen UI
<ons-toolbar>
...
</ons-toolbar>

44. Onsen UI
<ons-list>
<ons-list-item modifier= ”chevron”>
...
</ons-list-item>
</ons-list>

45. Onsen UI
<ons-tabbar>
<ons-tabbar-item page= ”find.html” >
</ons-tabbar-item>
...
</ons-tabbar>

46. Thank you
for listening!